🔥《刚刚问世》系列初窥篇-Java+Playwright自动化测试-17- 如何优雅地切换浏览器多窗口(详细教程)

1.简介

有时候我们在网页上点击一些按钮或超链接时,有时会打开一个新的网页窗口。这个时候如果下一步操作是在新的网页窗口上,那么就需要切换网页窗口,切换到新的网页窗口后再执行元素定位等操作。Playwright处理浏览器多窗口切换相比较于Selenium简单快捷。下边宏哥就给小伙伴们或者童鞋们介绍一下playwrigh如何优雅地切换浏览器多个窗口。

2.窗口切换步骤

1、 context.pages(); //获取所有的page对象,返回数据类型为列表,列表中的网页对象的索引按照打开顺序从0开始依次递增。

2、 page.bringToFront(); //激活网页,将网页显示在屏幕最上层,本行代码不写也不影响脚本执行。

3、 page.close(); //关闭网页。

3.测试场景

我们以访问百度为例,百度首页有多个选项,新闻,hao123网址导航,贴吧等多个选项,我们点击不同的选项,就会打开不同的新标签页。当打开多个标签页后, 如何切换到自己想要的页面上操作。

思路:我们可以通过脚本,输出百度首页各页面的标题,通过context.pages(); 可以获取到所有的page对象,每一个page对象就代表一个标签页实例。

3.1代码设计

3.2参考代码

ini 复制代码
package com.bjhg.playwright;

import java.util.List;

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自动化测试-17-  如何优雅地切换浏览器多窗口(详细教程)
 *
 * 2025年06月05日
 */
public class Test_Switch_Window {
    
    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(3000));
          //2.创建context
          BrowserContext context = browser.newContext();
         
          //创建page
          Page page = context.newPage();
          //3.浏览器打开网站
          page.navigate("https://www.baidu.com");
          //4.点击打开多个新的标签页
          List<Locator> links = page.locator("#s-top-left>a").all();
          for(Locator link:links){
              link.click();
          }
          
          //5.遍历page对象
          List<Page> pages = context.pages();
          for(Page i:pages){
              System.out.println(i.title());
          }
          
          System.out.println("Test Pass");
          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
    }

}

3.3运行代码

1.运行代码,右键Run As->Java Application,就可以看到控制台输出,如下图所示:

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

4.多窗口切换方法

4.1Title切换

从上边可以看到宏哥已经将所有的标签的title都循环出来了,因此我们只要切换到我们需要操作的title标签页即可切换对应窗口然后再进行后续定位操作。

4.1.1代码设计

4.1.2参考代码

java 复制代码
package com.bjhg.playwright;

import java.util.List;

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自动化测试-17-  如何优雅地切换浏览器多窗口(详细教程)
 *
 * 2025年06月05日
 */
public class Test_Switch_Window{
    
    public static Page switchToPage(BrowserContext context,String string){
        
        //切换到指定title 名称的标签页
        List<Page> pages = context.pages();
        
        for(Page i:pages){
            if(string != null){
                if(i.title().contains(string)){
                    //激活当前选项卡
                    i.bringToFront();
                    return i;
                }
            }else{
                System.out.println("not found title");
            }
//            return context.pages[0];        
        }
        return (Page) pages.listIterator(0); 
    }

    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(300));
          //2.创建context
          BrowserContext context = browser.newContext();
         
          //创建page
          Page page = context.newPage();
          //3.浏览器打开网站
          page.navigate("https://www.baidu.com");
          //4.点击打开多个新的标签页
          List<Locator> links = page.locator("#s-top-left>a").all();
          for(Locator link:links){
              link.click();
          }
          
          //5.打开多个tab 标签页, 切换到新闻页
          Page page1 = switchToPage(context, "新闻");
          System.out.println(page1.title());
          
          System.out.println("Test Pass");
          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
    }

}

4.1.3运行代码

1.运行代码,右键Run As->Java Application,就可以看到控制台输出,如下图所示:

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

4.2URL切换

和title的思路类似:前边已经将所有的标签的title都循环出来了,我们只要切换到我们需要操作的url标签页即可。

4.2.1代码设计

4.2.2参考代码

java 复制代码
package com.bjhg.playwright;

import java.util.List;

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 北京-宏哥
 * @param <context>
 * 
 * @公众号:北京宏哥(微信搜索,关注宏哥,提前解锁更多测试干货)
 * 
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-17-  如何优雅地切换浏览器多窗口(详细教程)
 *
 * 2025年06月05日
 */
public class Test_Switch_Window{
    
    public static Page switchToPage(BrowserContext context,String url){
        
        //切换到指定 URL 名称的标签页
        List<Page> pages = context.pages();
        
        for(Page i:pages){
            if(url != null){
                if(i.url().contains(url)){
                    //激活当前选项卡
                    i.bringToFront();
                    return i;
                }
            }else{
                System.out.println("not found url");
            }
//            return context.pages[0];        
        }
        return (Page) pages.listIterator(0); 
    }

    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(300));
          //2.创建context
          BrowserContext context = browser.newContext();
         
          //创建page
          Page page = context.newPage();
          //3.浏览器打开网站
          page.navigate("https://www.baidu.com");
          //4.点击打开多个新的标签页
          List<Locator> links = page.locator("#s-top-left>a").all();
          for(Locator link:links){
              link.click();
          }
          
          //5.打开多个tab 标签页, 切换到新闻页
          Page page1 = switchToPage(context, "hao");
          System.out.println(page1.title());
          
          System.out.println("Test Pass");
          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
    }

}

4.2.3运行代码

1.运行代码,右键Run As->Java Application,就可以看到控制台输出,如下图所示:

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

4.小结

本文主要介绍了playwright如何优雅地切换浏览器多窗口,playwright切换页面窗口不需要获取页面窗口的句柄,实现比selenium简单便捷许多,是playwright相对于selenium的一大优势。

相关推荐
白露与泡影7 小时前
Spring Boot 完整流程
java·spring boot·后端
空中海8 小时前
第二章:Maven进阶篇 — 依赖管理与构建生命周期
java·maven
xun-ming8 小时前
AI时代Java程序员自救手册
java·开发语言·人工智能
DavidSoCool8 小时前
GB28181 PTZCmd 完整指令对照表(8 位 16 进制)+ 详细注释 + 使用说明
java·sip·gb28181
张健11564096488 小时前
C++访问控制与友元
java·开发语言·c++
Sam_Deep_Thinking8 小时前
中小团队需要一个资源微服务
java·微服务·架构
Thanks_ks8 小时前
透过 Copy-On-Write 机制:理解并发编程中的性能与一致性权衡
java·多线程·并发编程·底层原理·写时复制·copyonwrite·性能优
kyriewen8 小时前
Webpack vs Vite:一个是“老黄牛”,一个是“猎豹”,你选谁?
前端·webpack·vite
打小就很皮...8 小时前
html2canvas + jsPDF 生成 PDF 的踩坑与解决方案总结
前端·pdf
一只幸运猫.8 小时前
JAVA后端面试题
java·开发语言