寫在前面
關于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"
效果:
image.png
模拟指定視窗大小錄制
運作指令如下:
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --viewport-size=800,600 www.baidu.com"
效果:
image.png
模拟裝置錄制
運作指令如下:
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
效果:
image.png
錄制視訊
使用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系列教程寫完了。