《刚刚问世》系列初窥篇-Java+Playwright自动化测试-10- 标签页（tab）操作

1.简介

本来按照计划这一系列的文章应该介绍Context和Page两个内容的，但是宏哥看了官方文档和查找资料发现其实和宏哥在Python+Playwright系列文章中的大同小异，差不了多少，再在这一个系列介绍就有点画蛇添足，索性就不介绍和讲解了，有兴趣的自己可以看宏哥之前写的，或者自己查找资料和官方文档进行了解和学习。今天讲解和分享的标签操作其实也是基于浏览器上下文（BrowserContext）进行操作的，而且宏哥在之前的BrowserContext也有提到过，但是有的童鞋或者小伙伴还是不清楚怎么操作，或者思路有点模糊，因此今天单独来对其进行讲解和分享一下，希望您有所帮助。

2.什么是tab标签页

Tabs 标签页又称选项卡（以下简称标签页），它是一种高效的屏幕空间利用手段，映射非常接近卡片的目录索引，用户可以基于索引标签，快速定位到目标中内容中去，这也是大多数用户来自现实世界的经验。

在 Web 页面中，它的使用场景也较为简单，当页面的内容信息量较多，用标签页可以对其分类，一方面可以提升查找信息的效率，另一方面可以精简用户单次获取到的信息量，用户更能够专注于当前已显示的内容。

‌标签页（Tab）是一种用户界面元素，用于组织和管理网页或应用程序中的内容，允许用户在不同的视图或数据集之间轻松切换。‌

标签页的设计灵感来源于现实生活中文件夹上的标签，通过隐喻的方式，设计师希望用户能够通过直观的方式理解和使用这一交互形式。

3.单标签页

单个标签操作这个是最简单的，之前讲的绝大多数都是单个标签的操作。通过context.new_page()就可以创建一个页面。

每个BrowserContext可以有多个页面。页面是指浏览器上下文中的单个选项卡或弹出窗口。它应该用于导航到URL并与页面内容交互。

// Create a page.

Page page = context.newPage();

// Navigate explicitly, similar to entering a URL in the browser.

page.navigate("http://example.com");

// Fill an input.

page.locator("#search").fill("query");

// Navigate implicitly by clicking a link.

page.locator("#submit").click();

// Expect a new url.

System.out.println(page.url());

实战举例：以度娘为例，首先启动浏览器，然后再设置浏览器的大小。查询“北京宏哥”后，刷新页面后执行回退操作到百度首页，然后有执行前进操作进入到搜索“北京宏哥”页面，最后退出浏览器。

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;

/**

 * @author 北京-宏哥

 *

 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）

 *

 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-10- 标签页（tab）操作 （详细教程）

 *

 * 2024年8月26日

 */

public class Test_Search {

    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(new Browser.NewContextOptions().setViewportSize(1280, 1024));

          //创建page

          Page page = context.newPage();

          //3.浏览器打开百度

          page.navigate("https://www.baidu.com/");

          //判断title是不是 百度一下，你就知道

          try{

               String baidu_title = "百度一下，你就知道";

               assert baidu_title == page.title();

               System.out.println("Test Pass");

          }catch(Exception e){

               e.printStackTrace();

          }

          //使用xpath属性定位百度首页输入框 ，并输入搜索内容：北京-宏哥

          page.locator("//*[@id='kw']").type("北京-宏哥"); 

          //使用路径与属性结合定位“百度一下”按钮，并点击 。

          page.locator("//span/input[@id='su']").click();

          // 5.刷新页面

          page.reload();

          // 6.浏览器后退

          page.goBack();

          // 7.浏览器前进

          page.goForward();

          //关闭page

          page.close();

          //关闭browser

          browser.close();

        }

      }

}

3.3运行代码

1.运行代码，右键Run'Test'，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作。如下图所示：

4.多标签页

每个浏览器上下文可以承载多个页面（选项卡）。

每个页面都像一个聚焦的活动页面。不需要将页面置于最前面。
上下文中的页面遵循上下文级别的模拟，例如视口大小、自定义网络路由或浏览器区域设置。

// Create two pages
Page pageOne = context.newPage();
Page pageTwo = context.newPage();

// Get pages of a browser context
List<Page> allPages = context.pages();

实战举例：在page_one 标签页打开百度，输入“北京-宏哥”，在page_two 标签页打开百度，输入“宏哥”。

4.1代码设计

按照上边的步骤进行代码设计，如下图所示：

4.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;

/**

 * @author 北京-宏哥

 *

 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）

 *

 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-10- 标签页（tab）操作 （详细教程）

 *

 * 2024年8月26日

 */

public class Test_Search {

    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(new Browser.NewContextOptions().setViewportSize(1280, 1024));

          //创建page

          Page page1 = context.newPage();

          //3.浏览器打开百度

          page1.navigate("https://www.baidu.com/");

          //使用xpath属性定位百度首页输入框 ，并输入搜索内容：北京-宏哥

          page1.locator("//*[@id='kw']").type("北京-宏哥"); 

          Page page2 = context.newPage();

          //3.浏览器打开百度

          page2.navigate("https://www.baidu.com/");

          //使用xpath属性定位百度首页输入框 ，并输入搜索内容：北京-宏哥

          page2.locator("//*[@id='kw']").type("宏哥");

          //关闭page

          page1.close();

          page2.close();

          //关闭browser

          browser.close();

        }

      }

}

4.3运行代码

1.运行代码，右键Run'Test'，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作。如下图所示：

5.小结

好了，关于标签页（tab）的相关操作非常简单，时间不早了今天就分享到这里，感谢你耐心地阅读！