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

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