微軟出品自動化神器【Playwright+Java】系列（九）多執行緒、重定向、彈出新視窗、截圖、新頁面、錄製、頁面物件模式操作

寫在前面

關於Playwright系列的文章，真的很久沒有寫了，今天一個不小心官方API部分過完了，下面將為大家逐一演示，感興趣的同學可以自行動手練習。

API部分

多執行緒

直白點說就是多執行緒下Playwright的使用，範例程式碼如下：

package org.example;

import com.microsoft.playwright.*;

import java.nio.file.Paths;

import static java.util.Arrays.asList;

public class PlaywrightThread extends Thread {
  private final String browserName;

  private PlaywrightThread(String browserName) {
    this.browserName = browserName;
  }

  public static void main(String[] args) throws InterruptedException {
    for (String browserName: asList("chromium", "webkit", "firefox")) {
      Thread thread = new PlaywrightThread(browserName);
      thread.start();
    }
  }

  @Override
  public void run() {
    try (Playwright playwright = Playwright.create()) {
      BrowserType browserType = getBrowserType(playwright, browserName);
      Browser browser = browserType.launch();
      Page page = browser.newPage();
      page.navigate("https://www.baidu.com/");
      page.locator("#kw").type("久曲健 部落格園");
      page.locator("#kw").press("Enter");
      page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("user-agent-" + browserName + ".png")));
    }
  }

  private static BrowserType getBrowserType(Playwright playwright, String browserName) {
    switch (browserName) {
      case "chromium":
        return playwright.chromium();
      case "webkit":
        return playwright.webkit();
      case "firefox":
        return playwright.firefox();
      default:
        throw new IllegalArgumentException();
    }
  }
}

重定向到指定頁面

跳轉到指定頁面，範例程式碼如下：

/**
 * @decription 跳轉到指定頁面
 * @author longrong.lang
 * @date 2023/02/18 9:15
 * @return: void
 */
@Test
public void testNavigations() {
    // 跳轉到百度頁面
    page.navigate("https://www.baidu.com/");
    //等待網路空閒是跳轉
    page.navigate("https://www.baidu.com/", new Page.NavigateOptions()
            .setWaitUntil(WaitUntilState.NETWORKIDLE));
}

元素等待

它有顯示等待和頁面互動操作自動等待，相比Selenium來比的話，對非同步操作有自己的處理機制，範例程式碼如下：

/**
 * @decription 元素等待
 * @author longrong.lang
 * @date 2023/2/17 14:09
 * @return: void
 */
@Test
public void testWaitElement(){
    //在延遲載入的頁面中，使用 Locator.waitFor（）等待元素可見可能很有用。
    page.navigate("https://www.baidu.com/");
    page.locator("#kw").waitFor();
    //Page.click（）這樣的頁面互動會自動等待元素。
    page.navigate("https://www.baidu.com/");
    page.locator("#kw").type("test");
    //自定義等待
    page.locator(".toindex").click(); //點選跳轉
    page.waitForLoadState(LoadState.NETWORKIDLE); // 這在「網路空閒」之後處理
    //顯示等待（非同步呼叫建議使用）
    page.navigate("asynchronousProcessing.html");
    page.waitForNavigation(()->{
        page.locator("#submit").click(); //123主頁
    });
    //單擊一個元素可能會觸發多個非同步
    page.waitForNavigation(new Page.WaitForNavigationOptions().setUrl("**/login"), () -> {
        page.locator("#submit").click();
    });

}

彈出視窗處理

這個案例很有意思，在寫對應的html案例時，發現這東西只在ie瀏覽器上生效（ createPopup()方法只適用在IE !），這裡還請讀者朋友注意，所以你跑指令碼報錯，並不是你程式碼的問題哦，範例程式碼如下：

/**
 * @decription 彈出視窗處理
 * @author longrong.lang
 * @date 2023/02/18 11:08
 * @return: void
 */
@Test
public void testPopup(){
    // createPopup()方法只適用在IE !
    page.navigate("http://localhost:8080/proup_demo.html");
    Page popup = page.waitForPopup(() -> {
        page.locator("[onclick]").click();
    });
    popup.waitForLoadState(LoadState.LOAD);
}

截圖操作

分為快速截圖、整頁截圖、存到快取區、按照元素區域截圖，範例程式碼如下：

/**
 * @decription 截圖操作
 * @author longrong.lang
 * @date 2023/02/18 11:08
 * @return: void
 */
@Test
public void testScreenshot(){
    page.navigate("https://www.baidu.com/");
    //快速截圖
    page.screenshot(new Page.ScreenshotOptions()
            .setPath(Paths.get("screenshot1.png")));
    //整頁截圖
    page.screenshot(new Page.ScreenshotOptions()
            .setPath(Paths.get("screenshot2.png"))
            .setFullPage(true));
    //存到緩衝區
    byte[] buffer = page.screenshot();
    System.out.println(Base64.getEncoder().encode(buffer));
    //按照元素區域截圖
    page.locator("#kw").screenshot(new Locator.ScreenshotOptions().setPath(Paths.get("screenshot3.png")));
}

處理新頁面

就是新控制程式碼處理，只不過是連個視窗罷了，超連結帶target="_blank"標識，範例程式碼如下：

/**
 * @decription 新視窗處理
 * @author longrong.lang
 * @date 2023/02/18 11:53
 * @return: void
 */
@Test
public void testHandlingNewPage() {
    page.navigate("https://www.baidu.com/");
    Page newPage = context.waitForPage(() -> {
        page.locator("#s-top-left .c-color-t:nth-of-type(4)").click();
    });
    newPage.waitForLoadState();
    System.out.println(newPage.title());
}

錄製生成指令碼

啟動命令如下：

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen www.baidu.com"

效果：

模擬指定視窗大小錄製

執行命令如下：

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --viewport-size=800,600 www.baidu.com"

效果：

模擬裝置錄製

執行命令如下：

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args='codegen --device="iPhone 11" playwright.dev'

我這執行完報錯，不到為啥，也不到官方是怎麼成功的，很好奇！

用python的開啟命令居然能，很詭異是抗拒Java嗎？

playwright open --device="iPhone 13 Pro" www.baidu.com

效果：

錄製視訊

使用Playwright，指令碼錄製結束後會自動生成視訊，範例程式碼如下：

context = browser.newContext(new Browser.NewContextOptions().setRecordVideoDir(Paths.get("videos/")));  
//確保context關閉，以便儲存視訊。  
context.close();

頁面物件模式

這個可以用Selenium的pageObject模式一樣，目的是為了程式碼維護方便，這裡我以登入功能為例進行演示，登入頁面需要存放元素定位和控制元件操作行為，範例程式碼如下：

package org.example;


import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
/**
 * @description 存放頁面控制元件及操作
 * @author longrong.lang
 * @version 1.0
 * @date 2023/02/18 15:07
 */
public class LoginPage {
  private final Page page;
  private final Locator username;
  private final Locator password;
  private final Locator login_btn;
  private final Locator error_msg;


  public LoginPage(Page page) {
    this.page = page;
    this.username = page.locator("input[type='text']");
    this.password = page.locator("[type='password']");
    this.login_btn = page.locator("button");
    this.error_msg = page.locator("#alert");
  }

  public void open() {
    page.navigate("http://localhost:8080/login");
  }

  /**
   * @decription 登入操作
   * @author longrong.lang
   * @date 2023/02/18 15:03
   * @param user
   * @param pwd
   * @return: java.lang.String
   */
  public String login(String user,String pwd) {
    open();
    username.fill(user);
    password.fill(pwd);
    login_btn.click();
    String content = error_msg.textContent();
    return content;
  }
}

測試類部分，範例程式碼如下：

package org.example;

import com.microsoft.playwright.*;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

/**
 * @description 測試登入功能
 * @author longrong.lang
 * @version 1.0
 * @date 2023/02/18 15:07
 */
public class TestLogin {
    static Playwright playwright;
    static Browser browser;
    static BrowserContext context;
    static Page page;
    @BeforeClass
    static void launchBrowser() {
        playwright = Playwright.create();
        browser = playwright.chromium().launch(new BrowserType.LaunchOptions()
                .setHeadless(false));
        context = browser.newContext();
        page = context.newPage();
    }

    @Test
    public void testLogin() {
        LoginPage loginPage = new LoginPage(page);
        String errorMsg = loginPage.login("1", "1");
        Assert.assertEquals(errorMsg,"使用者名稱或密碼錯誤！");
    }

    @AfterClass
    public void afterClass() {
        browser.close();
        context.close();
        playwright.close();
    }
}

寫在最後

總的來說，還是很開心的，而且很有成就感，終於把Playwright+Java系列教學寫完了。

可能有些同學會好奇說，網上不是有都是嗎，你可以找找Java系列，我敢說，即便是有大部分抄襲我的比較多，抄襲我能理解加個出處行嗎？如下圖：

真的突然讓我想到了洲哥那句話，總會有那麼幾個讓你噁心的狗逼，但已經被噁心了就噁心了，隨它去吧！

開心的是，證明我寫的還是不錯的，要不他也不能抄襲不是嗎？