《刚刚问世》系列初窥篇-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)的相关操作非常简单,时间不早了今天就分享到这里,感谢你耐心地阅读!