《刚刚问世》系列初窥篇-Java+Playwright自动化测试-9- 浏览器的相关操作 （详细教程）

1.简介

在自动化测试领域，元素定位是非常重要的一环。正确定位页面元素是测试用例能否成功执行的关键因素之一。playwright是一种自动化测试工具，它提供了丰富的元素定位方法，可以满足不同场景下的定位需求。前边宏哥已经通过不少的篇幅将playwright的元素定位的一些常用的基本方法和高级技巧基本介绍的差不多了，但是在Web端的UI自动化的测试中，我们通常需要使用一些方法来操作浏览器，用来模拟人工操作浏览器。今天就跟随宏哥学习了解一下。这一篇宏哥主要是介绍一下，在自动化测试的时候，我们常见的一些浏览器操作有哪些，宏哥将会一一介绍和讲解。

2.层级

在介绍浏览器的相关操作之前，宏哥先介绍一下层级，宏哥理解的其实就是操作层级，不对的话，欢迎批评指正。在Playwright中，测试层级为：

Broswer->Context->Page

以上层级和在Python中介绍的一模一样，因为都是playwright，换汤不换药，这里只不过是将Python语言变成了Java语言。

3.浏览器操作

宏哥首先介绍一下浏览器常用的基本操作，然后再通过具体实例给小伙伴或者童鞋们演示一下。既然是浏览器的操作，那首先得将浏览器启动（打开）才能操作，但是要打开或者启动浏览器需要安装浏览器驱动，因此首先介绍一下playwright如何安装浏览器驱动。

3.1安装浏览器驱动

默认安装三大浏览器驱动webkit、chromium、firefox ，这里不需要我们考虑驱动的版本和浏览器的版本是否匹配，这个就比selenium方便多了。这里宏哥就不赘述了，可以看宏哥前边的文章自行安装即可！当然代码中也会自动检测是否存在驱动，不存在就会自动安装，但取决于网路问题，经常会失败。一般都可以自动安装成功，如果不成功，你可以自己查找资料手动安装。宏哥前边介绍的就是代码自动检测，然后自动安装，宏哥推荐这种方法。如果实在不成功，你可以多尝试几遍。

3.2启动浏览器

浏览器是通过BrowserType.launch() 创建的。使用浏览器创建公共主页的示例：

import com.microsoft.playwright.*;  public class Example {   public static void main(String[] args) {     try (Playwright playwright = Playwright.create()) {       BrowserType firefox = playwright.firefox()       Browser browser = firefox.launch();       Page page = browser.newPage();       page.navigate('https://example.com');       browser.close();     }   } }

3.3相关方法

3.3.1browserType

获取浏览器所属的浏览器类型（chromium、firefox 或 webkit）。

//Usage  Browser.browserType();  //Returns  BrowserType

3.3.2close

如果此浏览器是使用 BrowserType.launch（） 获取的，则关闭浏览器及其所有页面（如果已打开）。

如果此浏览器已连接，将清除属于此浏览器的所有已创建上下文，并断开与浏览器服务器的连接。

敲黑板！！！注意：这类似于强制退出浏览器。因此，在调用 Browser.close（） 之前，您应该在之前使用 Browser.newContext（） 显式创建的任何 BrowserContext 上调用 BrowserContext.close（）。

//Usage  Browser.close(); Browser.close(options);  //Arguments  options Browser.CloseOptions (optional) setReason String (optional) Added in: v1.40#  The reason to be reported to the operations interrupted by the browser closure.  //Returns  void

3.3.3contexts

返回所有打开的浏览器上下文的数组。在新创建的浏览器中，这将返回零个浏览器上下文。

//Usage  Browser browser = pw.webkit().launch(); System.out.println(browser.contexts().size()); // prints "0" BrowserContext context = browser.newContext(); System.out.println(browser.contexts().size()); // prints "1"  //Returns  List<BrowserContext>

3.4查看浏览器UI

要查看浏览器UI，在启动浏览器时传递 headless=false 标志。

Playwright playwright = Playwright.create()； Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false)); Page page = browser.newPage();

3.5减慢执行速度

可以使用 slowMo 来减慢执行速度。在调试工具部分了解更多信息。

Playwright playwright = Playwright.create()； Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setSlowMo(50)); Page page = browser.newPage();

3.6访问跳转页面

page.navigate("http://playwright.dev");

3.7刷新、前进和后退

Page.reload() Page.goBack() Page.goForward()

3.8设置浏览器窗口大小

窗口包含在设备中，但您可以使用 Page.setViewportSize（） 在某些测试中覆盖它。

// Create context with given viewport BrowserContext context = browser.newContext(new Browser.NewContextOptions()   .setViewportSize(1280, 1024));  // Resize viewport for individual page page.setViewportSize(1600, 1200);  // Emulate high-DPI BrowserContext context = browser.newContext(new Browser.NewContextOptions()   .setViewportSize(2560, 1440)   .setDeviceScaleFactor(2);

3.9配置浏览器

在不同的浏览器上运行测试。

3.9.1特定浏览器运行

import com.microsoft.playwright.*;  public class Example {   public static void main(String[] args) {     try (Playwright playwright = Playwright.create()) {       // Launch chromium, firefox or webkit.       Browser browser = playwright.chromium().launch();       Page page = browser.newPage();       // ...     }   } }

3.9.2多个浏览器运行

import com.microsoft.playwright.*;  public class Example {   public static void main(String[] args) {     try (Playwright playwright = Playwright.create()) {       Browser browser = null;       String browserName = System.getenv("BROWSER");       if (browserName.equals("chromium")) {         browser = playwright.chromium().launch();       } else if (browserName.equals("firefox")) {         browser = playwright.firefox().launch();       } else if (browserName.equals("webkit")) {         browser = playwright.webkit().launch();       }       Page page = browser.newPage();       // ...     }   } }

4.项目实战

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

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自动化测试-9- 浏览器的相关操作 （详细教程）  *  * 2024年8月16日  */ 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();         }       }  }

4.3运行代码

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

2.运行代码后电脑端的浏览器的动作（先访问后搜索宏哥，然后刷新，后退到百度首页，然后再前进搜素宏哥的页面）。如下图所示：

5.小结

好了，关于浏览器的相关操作非常简单，时间不早了今天就分享到这里，感谢你耐心地阅读！