《刚刚问世》系列初窥篇-Java+Playwright自动化测试-11- 标签页（tab）操作
1.简介本来按照计划这一系列的文章应该介绍Context和Page两个内容的，但是宏哥看了官方文档和查找资料发现其实和宏哥在Python+Playwright系列文章中的大同小异，差不了多少，再在这一个系列介绍就有点画蛇添足，索性就不介绍和讲解了，有兴趣的自己可以看宏哥之前写的，或者自己查找资料和官方文档进行了解和学习。今天讲解和分享的标签操作其实也是基于浏览器上下文（BrowserContext）进行操作的，而且宏哥在之前的BrowserContext也有提到过，但是有的童鞋或者小伙伴还是不清楚怎么操作，或者思路有点模糊，因此今天单独来对其进行讲解和分享一下，希望您有所帮助。
2.什么是tab标签页
Tabs 标签页又称选项卡（以下简称标签页），它是一种高效的屏幕空间利用手段，映射非常接近卡片的目录索引，用户可以基于索引标签，快速定位到目标中内容中去，这也是大多数用户来自现实世界的经验。
在 Web 页面中，它的使用场景也较为简单，当页面的内容信息量较多，用标签页可以对其分类，一方面可以提升查找信息的效率，另一方面可以精简用户单次获取到的信息量，用户更能够专注于当前已显示的内容。
标签页（Tab）是一种用户界面元素，用于组织和管理网页或应用程序中的内容，允许用户在不同的视图或数据集之间轻松切换。
标签页的设计灵感来源于现实生活中文件夹上的标签，通过隐喻的方式，设计师希望用户能够通过直观的方式理解和使用这一交互形式。
3.处理新标签页
浏览器上下文中的事件page可用于获取在上下文中创建的新页面。这可用于处理通过target="_blank"链接打开的新页面。
# Get page after a specific action (e.g. clicking a link)with context.expect_page() as new_page_info: page.get_by_text("open new tab").click() # Opens a new tabnew_page = new_page_info.valuenew_page.wait_for_load_state()print(new_page.title())
实战举例：打开百度页面的-新闻链接，会出现一个新标签页，如下图所示：
3.1代码设计
按照上边的步骤进行代码设计，如下图所示：
3.2参考代码
package com.bjhg.playwright;import com.microsoft.playwright.Browser;import com.microsoft.playwright.BrowserContext;import com.microsoft.playwright.BrowserType;import com.microsoft.playwright.Locator;import com.microsoft.playwright.Page;import com.microsoft.playwright.Playwright;import com.microsoft.playwright.options.AriaRole;/** * @author 北京-宏哥 ** @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货） ** 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-10- 标签页（tab）操作 （详细教程） * * 2024年8月26日 */public class Test_Tab { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。 Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(500)); //2.设置浏览器窗口大小 BrowserContext context = browser.newContext(); //创建page Page page = context.newPage(); //3.浏览器打开百度 page.navigate("https://www.baidu.com/"); System.out.println(page.title()); // Get page after a specific action (e.g. clicking a link) Page newPage = context.waitForPage(() -> { page.getByText("网盘").click(); // Opens a new tab }); System.out.println(newPage.title()); //关闭page page.close(); //关闭browser browser.close(); } }}
3.3运行代码
1.运行代码，右键Run'Test'，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作。如下图所示：
如果触发新页面的操作未知，可以使用以下模式。
// Get all new pages (including popups) in the contextcontext.onPage(page -> {page.waitForLoadState();System.out.println(page.title());});
4.处理弹出窗口
如果页面打开一个弹出窗口（例如通过链接打开的页面），您可以通过监听页面上的事件target="_blank"来获取对它的引用。popup
除了browserContext.on('page')事件之外还会发出此事件，但仅针对与此页面相关的弹出窗口。
// Get popup after a specific action (e.g., click)Page popup = page.waitForPopup(() -> {page.getByText("open the popup").click();});// Interact with the popup normallypopup.getByRole(AriaRole.BUTTON).click();System.out.println(popup.title());
如果触发弹出窗口的操作未知，则可以使用以下模式。
// Get all popups when they openpage.onPopup(popup -> {popup.waitForLoadState();System.out.println(popup.title());});
宏哥找了半天也没有找到类似的例子，索性自己动手弄一个弹出窗口的例子。
4.1demo源代码
1.HTML源代码，如下所示：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title> 北京-宏哥的弹出窗口demo</title> <style> body { background-color: tomato; font-family: sans-serif; padding: 5em; } h1, p { text-align: center; } .cta { background-color: white; border: 1px solid lightgrey; border-radius: 6px; color: tomato; display: inline-block; font-family: "Open Sans", sans-serif; font-size: 1em; font-weight: 700; margin-bottom: 1em; padding: 0.3em 1em; text-decoration: none; } .cta:hover { background-color: lightgrey; color: slategrey; text-decoration: none; } .modaloverlay { background: rgba(0, 0, 0, 0.8); bottom: 0; left: 0; opacity: 0; pointer-events: none; position: fixed; right: 0; top: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; z-index: -1; display: none; } .modaloverlay:target { display: block; opacity: 1; pointer-events: auto; z-index: 99999; } .modaloverlay .modal { background-color: white; height: 100%; position: relative; margin: 0 auto; padding: 3em; overflow-y: scroll; -webkit-overflow-scrolling: touch; } @media (min-width: 60em) { .modaloverlay .modal { height: 75%; margin: 5% auto; max-height: 57em; max-width: 66em; width: 85%; } } .modaloverlay .modal > iframe, .modaloverlay .modal > div { border: none; width: 100%; height: 100%; } .modaloverlay .close { background-color: turquoise; color: white; font-size: 24px; padding: 8px 12px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0; z-index: 1; } </style></head><body translate="no" ><p>This is a example of a <a class="cta" href="#google" target="_blank">popup modal</a></p> <div id="google" class="modaloverlay"> <div class="modal"> <a href="#close" class="close">&times;</a> <div> <h1>这是一些窗口里的内容</h1> <p>如果页面打开一个弹出窗口（例如通过链接打开的页面），您可以通过监听页面上的事件target="_blank"来获取对它的引用。popup除了browserContext.on('page')事件之外还会发出此事件，但仅针对与此页面相关的弹出窗口。</p> </div> </div> </div></body></html>
2.浏览器预览demo的点击弹窗效果图，如下图所示：
4.2代码设计
4.3参考代码
package com.bjhg.playwright;import com.microsoft.playwright.Browser;import com.microsoft.playwright.BrowserContext;import com.microsoft.playwright.BrowserType;import com.microsoft.playwright.Locator;import com.microsoft.playwright.Page;import com.microsoft.playwright.Playwright;import com.microsoft.playwright.options.AriaRole;/** * @author 北京-宏哥 ** @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货） ** 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-10- 标签页（tab）操作 （详细教程） * * 2024年8月26日 */public class Test_Tab { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。 Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(500)); //2.设置浏览器窗口大小 BrowserContext context = browser.newContext(); //创建page Page page = context.newPage(); //3.浏览器打开百度 page.navigate("file:///C:/Users/Administrator/Desktop/66.html"); System.out.println(page.title()); // Get popup after a specific action (e.g., click) Page popup = page.waitForPopup(() -> { page.getByText("popup modal").click(); }); System.out.println(popup.title()); //关闭page page.close(); //关闭browser browser.close(); } }}
4.4运行代码
1.运行代码，右键Run'Test'，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作。如下图所示：
5.小结
在这进行实践操作过程中，宏哥发现了一个问题，宏哥记得在Python系列中的playwright处理新标签的时候，定位新闻的时候可以成功，但是Java系列中的playwright处理新标签的时候，定位新闻的时候却定位到多个。因此没有办法了，宏哥就定位了网盘。宏哥觉得不对啊，都是按官方文档操作的怎么可能一个成功，一个失败了，难道是官方的bug，仔细一想不可能啊，这么简单的问题怎么可能有bug，毕竟都是微软的骨灰级的大佬。然后宏哥返回查了一下Python的，发现没有按官方文档写，而是自己写的一个定位。造成这个现象的主要是因为这两个方法。
page.getByText("新闻").click(); //定位到多个新闻page.click("text=新闻"); //定位到新闻点击
page.getByText("新闻").click(); 和 page.click("text=新闻"); 之间的区别主要在于定位策略和执行方式。
page.getByText("新闻").click(); 使用了Playwright的getByText方法，这个方法允许你通过文本内容来定位页面元素。首先，它会找到文本内容为"新闻"的元素，然后执行点击操作。这种方法提供了更灵活的定位方式，因为它直接定位到具有特定文本内容的元素，而不需要预先知道元素的ID或其他属性。
page.click("text=新闻"); 直接使用了click方法，并通过text=新闻作为参数，这表明它可能使用了某种内部机制来识别和定位文本为"新闻"的元素。这种方法虽然简洁，但在某些情况下可能不如getByText方法灵活，因为它依赖于Playwright内部的处理逻辑来定位元素。
总的来说，page.getByText("新闻").click();提供了更明确的定位策略，允许你首先获取到元素，然后对元素执行操作，而page.click("text=新闻");则更侧重于直接执行点击操作，可能依赖于Playwright的内部机制来处理元素的定位。在实际应用中，如果需要更精确地控制元素的获取和操作，推荐使用page.getByText("新闻").click();的方式。
综上所述：宏哥的理解就是page.getByText("新闻").click(); 先定位然后再去点击，定位到三个新闻，点击的时候，不知道点击那个新闻就报错了，而page.click("text=新闻");先点击，然后再找新闻的文本传给点击。定位到第一个新闻传过去就点击结束了，没有报错。
好了，关于标签页（tab）的相关操作非常简单，时间不早了今天就分享到这里，感谢你耐心地阅读！
页:
[1]