Playwright使用教程

前段时刻想写一些“水文”放到大众号上，内容能够从github找，便是排版比较费事，浪费了很长时刻，经搭档提起自动化工具，于是了解到了Playwright，它能够模拟人的操作行为，给我最直接的感触便是“解放双手，不需求再机械地在网页上点点点了”。

介绍

Playwright 是专门为了满足端到端测验的需求而创立的。Playwright 支撑包含 Chromium、WebKit 和 Firefox 在内的一切现代烘托引擎。能够在 Windows、Linux 和 macOS 上本地或 CI 上进行测验，在 headless 或 headed 模式下进行，还能够进行原生移动仿真测验。

简略运用

1. 创立Maven项目

创立maven项目，方便在pom.xml中引入Playwright相关的依靠。

2. 项目命名

我这儿简略命名为PlaywrightDemo，点击finish

3. 增加依靠

在pom.xml中增加Playwright所需求的依靠，增加依靠是这样的

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>org.example</groupId>
    <artifactId>PlaywrightDemo</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!--  下方是新加部分  -->
    <dependencies>
        <dependency>
            <groupId>com.microsoft.playwright</groupId>
            <artifactId>playwright</artifactId>
            <version>1.32.0</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.10.1</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <!--  新加部分结束  -->
</project>

依靠设置完，点击右上角小图标Sync一下，拉取依靠

4. 写个例子

创立一个类文件，然后写个测验样例，初步了解一下

import com.microsoft.playwright.*;
public class MainTest {
    /**
     * 百度搜索"稀土"
     */
    public static void main(String[] args) {
        // 创立一个chrome浏览器实例
        try (Playwright playwright = Playwright.create()) {
            // setHeadless：是否以可见的方法打开浏览器，默许是true，true是后台运转，一般需求调为false
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
            // 在浏览器上创立一个空白标签页
            Page page = browser.newPage();
            // 在空白标签页基础上输入百度网址并执行跳转
            page.navigate("http://www.baidu.com");
            // 在输入框输入稀土
            // 百度页面的输入框id为kw
            page.locator("#kw").fill("稀土");
            // 点击"百度一下"
            page.getByText("百度一下").click();
            // 暂停10s看效果，要不然浏览器在执行完毕时会自动封闭
            page.waitForTimeout(10000);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

运转一下，初度运转会下载内置浏览器。

然后搜索成果页面就被打开了

需求留意的是，每次运转Playwright会打开一个新的内置浏览器，该浏览器不会包含上次运转的任何信息，这能够确保运转成果的一致性。

自动生成代码

Playwright最主要的功能便是支撑“录制回放”，能够把录制的进程生成代码，极大程度节约开发成本。

有两种运用方法，都需求凭借命令行

• 方法1 需求装备node.js环境

npx playwright codegen --target java

• 方法2 需求装备python环境，mac体系自带

python3 -m playwright codegen --target java

命令输入后会呈现两个面板，一个是浏览器，一个是代码生成器，在浏览器里做的操作会实时生成代码，假如想更改生成代码的语言能够点击Target区域自由挑选。

API调用

Playwright供给了丰厚的Api供给调用，我这儿挑重点说一下，包含元素的定位、元素的一般操作、保存登录信息等。更多API见playwright.dev/java/docs/i…

1. 定位:Locator

定位器：能够定位到页面中详细某一个元素。只要知道了详细的元素是什么，才能对其进行做点击、长按等操作。

留意locator有必要具有仅有性，否则会报错。

1.1 一般定位

<input id="test" name="input-name"></input>

// id定位
Locator locator1 = page.locator("#test");
// name特点定位
Locator locator2 = page.locator("input-name");
// 标签名定位
Locator locator3 = page.locator("input");

1.2 XPath定位

在浏览器查看中能够拿到元素的XPath，也具有仅有性，直接复制即可

Locator locator = page.locator("//*[@id="title-content"]/span[2]");

1.3 人物定位

Playwright把元素分为了多种人物，一般情况下是以标签名区分的，比如BUTTON、FORM、ARTICLE等

假如经过人物挑选出来的元素可能存在多个，还能够运用GetByRoleOptions特点过滤来确保成果仅有。

<h3>Sign up</h3>
<label>
  <input type="checkbox" /> Subscribe
</label>
<br/>
<button>Submit</button>

Locator locator1 = page.getByRole(AriaRole.HEADING,new Page.GetByRoleOptions().setName("Sign up"));
Locator locator2 = page.getByRole(AriaRole.CHECKBOX,new Page.GetByRoleOptions().setName("Subscribe"));
Locator locator3 = page.getByRole(AriaRole.BUTTON,new Page.GetByRoleOptions().setName("Submit"));

1.4 标签定位

表单元素的控件常与label相关，Playwright支撑经过label找到表单控件。

<label>暗码 <input type="password" /></label>

能够经过标签定位

// 找到元素并直接输入
page.getByLabel("暗码").fill("secret");

1.5 占位符定位

专归于input和textarea的定位方法，能够根据设置的playholder找到输入框控件

<input type="email" placeholder="请输入邮箱" />

// 找到填邮箱的输入框并输入“111234@163.com”
page.getByPlaceholder("请输入邮箱").fill("111234@163.com");

1.6 文字匹配定位

能够根据网页中显示的文字定位出详细的元素，包含但不限于普通文字、button上的文字、超链接上的文字。

<span>Hello World</span>

Locator locator = page.getByText("Hello World");

1.7 iframe内元素定位

在page中无法直接定位frame内的元素，需求先找到frame，再从frame中找其间元素。

<iframe name="iframe_name" src="http://127.0.0.1:8080/"
  width="100%" height="500" frameborder="0"
  allowfullscreen sandbox>
</iframe>

// 经过标签称号定位到frame，在定位到其间元素并点击
page.frameLocator("iframe").locator("xxxxx").click();
// 经过标签的name特点找到frame目标，再定位到其间元素并点击
Frame frame = page.frame("iframe_name");
frame.locator("xxxx").click();

当经过上方几种方法挑选出多个元素时，可附加一个option参数过滤，也可增加filter方法

Locator locator1 = page.locator("input", new Page.LocatorOptions().setHasText("名字"))
Locator locator2 = page.locator("input").filter(new Locator.FilterOptions().setHasText("名字"));

2. 操作：Action

2.1 点击

用于模仿点击DOM中的元素。

<button>Item</button>

// 点击一下鼠标左键
page.getByRole(AriaRole.BUTTON).click();
// 点击两下鼠标左键
page.getByText("Item").dblclick();
// 右键点击一下，左键同理
page.getByText("Item").click(new Locator.ClickOptions().setButton(MouseButton.RIGHT));
// 按住shift键的一起点击左键
page.getByText("Item").click(new Locator.ClickOptions().setModifiers(Arrays.asList(KeyboardModifier.SHIFT)));
// 光标逗留
page.getByText("Item").hover();
// 点击元素左上角
page.getByText("Item").click(new Locator.ClickOptions().setPosition(0, 0));

2.2 按键

用于为DOM中的元素模仿按键操作。

<input id="press_key" placeholder="请输入内容"></input>

// 按压单个字符
page.locator("#press_key").press("b");
// 多个字符一起一起按压运用"+"
page.locator("#press_key").press("Meta+v");

现在支撑的按键有：

Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape,

ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight,

ArrowUp, F1 – F12, 0 – 9, A – Z，Shift, Control, Alt(mac上的option键), Meta(mac的command键)

2.3 文字输入

用于为input标签和textarea标签填充数据。

<label>
      请输入：
      <textarea></textarea>
</label>
<label>
      时刻
      <input id="input" type="time"></input>
</label>  

// 文本输入框
page.getByLabel("请输入：").fill("你好啊");
// 时刻输入框
page.locator("#input").fill("06:09");

2.4 选中

用于为radio标签和checkbox标签挑选选中状况。

// 获取挑选状况
page.getByLabel("Subscribe to newsletter").isChecked();
// 挑选
page.getByLabel("XL").check();

留意，定位radio标签时需求留意，如下：page.getByText(“狮子”).check()会报错，由于拿到的只是文字，而不是单选框

 <input type="radio" name="animal" />狮子

而关于关于label而言，拿到label就相当于拿到其间元素，如下。

<label>
      苹果
      <input type="radio" name="111" value="苹果" />
</label>

2.5 设置选项

用于为select标签设置选中值。

<select id="select_options">
  <option>汽车</option>
  <option>自行车</option>
  <option>马车</option>
</select>

page.locator("#select_options").selectOption("马车");

2.6 上传文件

<label>
  上传
  <input type="file" name="file" />
</label>

// 文件地址写相对路径时是相关于项目的相对路径
page.getByLabel("上传").setInputFiles(Paths.get("/Users/zeng/Desktop/作业/Demo/PlaywrightDemo/src/main/java/MainTest.java"));

2.7 下载文件

// 点击下载之后捕捉Download目标
Download download = page.waitForDownload(() -> {
    page.getByText("Download file").click();
});
// 另存为at.txt
download.saveAs(Paths.get("/path/to/save/download/at.txt"));

3. 保存登录信息

由于Playwright每次都会新开一个没有任何缓存的浏览器，假如涉及到登录的话，每次运转都要登录一次，比较费事，因此Playwright供给了一种保存浏览器本地存储信息的方法。

// 让page复用存储的信息
BrowserContext context = browser.newContext(new Browser.NewContextOptions().setStorageStatePath(Paths.get("state.json")));
Page page = context.newPage();
// ...
// 操作完结之后再把最新的本地存储信息保存下来，保存到state.json中
context.storageState(new BrowserContext.StorageStateOptions().setPath(Paths.get("state.json")));

---

参考资料：

1. playwright.dev/java/docs/i…