《刚刚问世》系列初窥篇-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 tab

new_page = new_page_info.value

new_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 context

context.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 normally

popup.getByRole(AriaRole.BUTTON).click();

System.out.println(popup.title());

如果触发弹出窗口的操作未知，则可以使用以下模式。

// Get all popups when they open

page.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）的相关操作非常简单，时间不早了今天就分享到这里，感谢你耐心地阅读！