Playwright常用使用案例代码(Node.js)

一、页面导航

1. 基本导航

<span><span leaf="">const</span></span><span leaf="">&nbsp;{ chromium } =&nbsp;</span><span><span leaf="">require</span></span><span leaf="">(</span><span><span leaf="">'playwright'</span></span><span leaf="">);</span><br><br><span leaf="">(</span><span><span leaf="">async</span></span><span leaf="">&nbsp;() =&gt; {</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">const</span></span><span leaf="">&nbsp;browser =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;chromium.</span><span><span leaf="">launch</span></span><span leaf="">();</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">const</span></span><span leaf="">&nbsp;page =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;browser.</span><span><span leaf="">newPage</span></span><span leaf="">();</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">goto</span></span><span leaf="">(</span><span><span leaf="">'https://example.com'</span></span><span leaf="">);</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">// 等待页面加载完成</span></span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">waitForLoadState</span></span><span leaf="">(</span><span><span leaf="">'networkidle'</span></span><span leaf="">);</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">console</span></span><span leaf="">.</span><span><span leaf="">log</span></span><span leaf="">(</span><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">title</span></span><span leaf="">());</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;browser.</span><span><span leaf="">close</span></span><span leaf="">();</span><br><span leaf="">})();</span>

2. 页面跳转与返回

<span><span leaf="">// 导航到新页面</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">goto</span></span><span leaf="">(</span><span><span leaf="">'https://example.com'</span></span><span leaf="">);</span><br><span><span leaf="">// 前进</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">goForward</span></span><span leaf="">();</span><br><span><span leaf="">// 后退</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">goBack</span></span><span leaf="">();</span><br><span><span leaf="">// 刷新页面</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">reload</span></span><span leaf="">();</span>

二、元素交互

1. 点击操作

<span><span leaf="">// 基本点击</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">click</span></span><span leaf="">(</span><span><span leaf="">'button#submit'</span></span><span leaf="">);</span><br><br><span><span leaf="">// 双击</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">dblclick</span></span><span leaf="">(</span><span><span leaf="">'.item'</span></span><span leaf="">);</span><br><br><span><span leaf="">// 右键点击</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">click</span></span><span leaf="">(</span><span><span leaf="">'div.context-menu'</span></span><span leaf="">, {&nbsp;</span><span><span leaf="">button</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'right'</span></span><span leaf="">&nbsp;});</span><br><br><span><span leaf="">// 悬停</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">hover</span></span><span leaf="">(</span><span><span leaf="">'#menu'</span></span><span leaf="">);</span>

2. 输入操作

<span><span leaf="">// 快速填充</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">fill</span></span><span leaf="">(</span><span><span leaf="">'input[name="username"]'</span></span><span leaf="">,&nbsp;</span><span><span leaf="">'testuser'</span></span><span leaf="">);</span><br><br><span><span leaf="">// 模拟键盘输入</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">type</span></span><span leaf="">(</span><span><span leaf="">'#search'</span></span><span leaf="">,&nbsp;</span><span><span leaf="">'Playwright'</span></span><span leaf="">, {&nbsp;</span><span><span leaf="">delay</span></span><span leaf="">:&nbsp;</span><span><span leaf="">100</span></span><span leaf="">&nbsp;});</span><br><br><span><span leaf="">// 清空输入框</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">locator</span></span><span leaf="">(</span><span><span leaf="">'input#email'</span></span><span leaf="">).</span><span><span leaf="">clear</span></span><span leaf="">();</span>

3. 拖拽操作

<span><span leaf="">// 元素拖拽</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">dragAndDrop</span></span><span leaf="">(</span><span><span leaf="">'#item'</span></span><span leaf="">,&nbsp;</span><span><span leaf="">'#dropzone'</span></span><span leaf="">);</span><br><br><span><span leaf="">// 坐标拖拽</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">locator</span></span><span leaf="">(</span><span><span leaf="">'#slider'</span></span><span leaf="">).</span><span><span leaf="">dragTo</span></span><span leaf="">({&nbsp;</span><span><span leaf="">x</span></span><span leaf="">:&nbsp;</span><span><span leaf="">200</span></span><span leaf="">,&nbsp;</span><span><span leaf="">y</span></span><span leaf="">:&nbsp;</span><span><span leaf="">0</span></span><span leaf="">&nbsp;});</span>

三、表单填写

1. 文本输入

<span><span leaf="">// 文本输入</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByRole</span></span><span leaf="">(</span><span><span leaf="">'textbox'</span></span><span leaf="">).</span><span><span leaf="">fill</span></span><span leaf="">(</span><span><span leaf="">'Peter'</span></span><span leaf="">);</span><br><br><span><span leaf="">// 日期输入</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByLabel</span></span><span leaf="">(</span><span><span leaf="">'Birth date'</span></span><span leaf="">).</span><span><span leaf="">fill</span></span><span leaf="">(</span><span><span leaf="">'2020-02-02'</span></span><span leaf="">);</span><br><br><span><span leaf="">// 时间输入</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByLabel</span></span><span leaf="">(</span><span><span leaf="">'Appointment time'</span></span><span leaf="">).</span><span><span leaf="">fill</span></span><span leaf="">(</span><span><span leaf="">'13:15'</span></span><span leaf="">);</span>

2. 复选框与单选按钮

<span><span leaf="">// 勾选复选框</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByLabel</span></span><span leaf="">(</span><span><span leaf="">'I agree to the terms'</span></span><span leaf="">).</span><span><span leaf="">check</span></span><span leaf="">();</span><br><br><span><span leaf="">// 取消勾选</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByLabel</span></span><span leaf="">(</span><span><span leaf="">'Subscribe to newsletter'</span></span><span leaf="">).</span><span><span leaf="">uncheck</span></span><span leaf="">();</span><br><br><span><span leaf="">// 选择单选按钮</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByLabel</span></span><span leaf="">(</span><span><span leaf="">'XL'</span></span><span leaf="">).</span><span><span leaf="">check</span></span><span leaf="">();</span>

3. 下拉选择

<span><span leaf="">// 通过值选择</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByLabel</span></span><span leaf="">(</span><span><span leaf="">'Choose a color'</span></span><span leaf="">).</span><span><span leaf="">selectOption</span></span><span leaf="">(</span><span><span leaf="">'blue'</span></span><span leaf="">);</span><br><br><span><span leaf="">// 通过标签选择</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByLabel</span></span><span leaf="">(</span><span><span leaf="">'Choose a color'</span></span><span leaf="">).</span><span><span leaf="">selectOption</span></span><span leaf="">({&nbsp;</span><span><span leaf="">label</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'Blue'</span></span><span leaf="">&nbsp;});</span><br><br><span><span leaf="">// 多选</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">getByLabel</span></span><span leaf="">(</span><span><span leaf="">'Choose multiple colors'</span></span><span leaf="">).</span><span><span leaf="">selectOption</span></span><span leaf="">([</span><span><span leaf="">'red'</span></span><span leaf="">,&nbsp;</span><span><span leaf="">'green'</span></span><span leaf="">,&nbsp;</span><span><span leaf="">'blue'</span></span><span leaf="">]);</span>

四、截图功能

1. 页面截图

<span><span leaf="">// 截取当前视口</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">screenshot</span></span><span leaf="">({&nbsp;</span><span><span leaf="">path</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'screenshot.png'</span></span><span leaf="">&nbsp;});</span><br><br><span><span leaf="">// 截取全屏</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">screenshot</span></span><span leaf="">({&nbsp;</span><span><span leaf="">path</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'fullpage.png'</span></span><span leaf="">,&nbsp;</span><span><span leaf="">fullPage</span></span><span leaf="">:&nbsp;</span><span><span leaf="">true</span></span><span leaf="">&nbsp;});</span><br><br><span><span leaf="">// 截取指定区域</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">screenshot</span></span><span leaf="">({&nbsp;</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">path</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'partial.png'</span></span><span leaf="">,&nbsp;</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">clip</span></span><span leaf="">: {&nbsp;</span><span><span leaf="">x</span></span><span leaf="">:&nbsp;</span><span><span leaf="">50</span></span><span leaf="">,&nbsp;</span><span><span leaf="">y</span></span><span leaf="">:&nbsp;</span><span><span leaf="">50</span></span><span leaf="">,&nbsp;</span><span><span leaf="">width</span></span><span leaf="">:&nbsp;</span><span><span leaf="">400</span></span><span leaf="">,&nbsp;</span><span><span leaf="">height</span></span><span leaf="">:&nbsp;</span><span><span leaf="">300</span></span><span leaf="">&nbsp;}&nbsp;</span><br><span leaf="">});</span><br>

2. 元素截图

<span><span leaf="">const</span></span><span leaf="">&nbsp;element = page.</span><span><span leaf="">locator</span></span><span leaf="">(</span><span><span leaf="">'.card'</span></span><span leaf="">);</span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;element.</span><span><span leaf="">screenshot</span></span><span leaf="">({&nbsp;</span><span><span leaf="">path</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'element.png'</span></span><span leaf="">&nbsp;});</span><br>

五、网络请求处理

1. 请求拦截与模拟

<span><span leaf="">// 拦截API请求并返回模拟数据</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">route</span></span><span leaf="">(</span><span><span leaf="">'**/api/users'</span></span><span leaf="">,&nbsp;</span><span><span><span leaf="">route</span></span><span leaf="">&nbsp;=&gt;</span></span><span leaf="">&nbsp;{</span><br><span leaf="">&nbsp; route.</span><span><span leaf="">fulfill</span></span><span leaf="">({</span><br><span leaf="">&nbsp; &nbsp;&nbsp;</span><span><span leaf="">status</span></span><span leaf="">:&nbsp;</span><span><span leaf="">200</span></span><span leaf="">,</span><br><span leaf="">&nbsp; &nbsp;&nbsp;</span><span><span leaf="">contentType</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'application/json'</span></span><span leaf="">,</span><br><span leaf="">&nbsp; &nbsp;&nbsp;</span><span><span leaf="">body</span></span><span leaf="">:&nbsp;</span><span><span leaf="">JSON</span></span><span leaf="">.</span><span><span leaf="">stringify</span></span><span leaf="">([{&nbsp;</span><span><span leaf="">id</span></span><span leaf="">:&nbsp;</span><span><span leaf="">1</span></span><span leaf="">,&nbsp;</span><span><span leaf="">name</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'John Doe'</span></span><span leaf="">&nbsp;}])</span><br><span leaf="">&nbsp; });</span><br><span leaf="">});</span><br><br><span><span leaf="">// 拦截并修改请求</span></span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">route</span></span><span leaf="">(</span><span><span leaf="">'**/*.png'</span></span><span leaf="">,&nbsp;</span><span><span><span leaf="">route</span></span><span leaf="">&nbsp;=&gt;</span></span><span leaf="">&nbsp;{</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">// 中止图片请求</span></span><br><span leaf="">&nbsp; route.</span><span><span leaf="">abort</span></span><span leaf="">();</span><br><span leaf="">});</span><br>

2. 监听请求和响应

<span><span leaf="">// 监听所有请求</span></span><br><span leaf="">page.</span><span><span leaf="">on</span></span><span leaf="">(</span><span><span leaf="">'request'</span></span><span leaf="">,&nbsp;</span><span><span><span leaf="">request</span></span><span leaf="">&nbsp;=&gt;</span></span><span leaf="">&nbsp;{</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">console</span></span><span leaf="">.</span><span><span leaf="">log</span></span><span leaf="">(</span><span><span leaf="">`Request:&nbsp;</span><span><span leaf="">${request.method()}</span></span><span leaf="">&nbsp;</span><span><span leaf="">${request.url()}</span></span><span leaf="">`</span></span><span leaf="">);</span><br><span leaf="">});</span><br><br><span><span leaf="">// 监听所有响应</span></span><br><span leaf="">page.</span><span><span leaf="">on</span></span><span leaf="">(</span><span><span leaf="">'response'</span></span><span leaf="">,&nbsp;</span><span><span><span leaf="">response</span></span><span leaf="">&nbsp;=&gt;</span></span><span leaf="">&nbsp;{</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">console</span></span><span leaf="">.</span><span><span leaf="">log</span></span><span leaf="">(</span><span><span leaf="">`Response:&nbsp;</span><span><span leaf="">${response.status()}</span></span><span leaf="">&nbsp;</span><span><span leaf="">${response.url()}</span></span><span leaf="">`</span></span><span leaf="">);</span><br><span leaf="">});</span><br><br><span><span leaf="">// 等待特定响应</span></span><br><span><span leaf="">const</span></span><span leaf="">&nbsp;[response] =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;</span><span><span leaf="">Promise</span></span><span leaf="">.</span><span><span leaf="">all</span></span><span leaf="">([</span><br><span leaf="">&nbsp; page.</span><span><span leaf="">waitForResponse</span></span><span leaf="">(</span><span><span leaf="">'**/api/data'</span></span><span leaf="">),</span><br><span leaf="">&nbsp; page.</span><span><span leaf="">click</span></span><span leaf="">(</span><span><span leaf="">'button#load-data'</span></span><span leaf="">)</span><br><span leaf="">]);</span><br><span><span leaf="">const</span></span><span leaf="">&nbsp;data =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;response.</span><span><span leaf="">json</span></span><span leaf="">();</span><br>

3. 修改请求头

<span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">route</span></span><span leaf="">(</span><span><span leaf="">'**/*'</span></span><span leaf="">,&nbsp;</span><span><span leaf="">async</span></span><span leaf="">&nbsp;route =&gt; {</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">const</span></span><span leaf="">&nbsp;headers = {</span><br><span leaf="">&nbsp; &nbsp; ...route.</span><span><span leaf="">request</span></span><span leaf="">().</span><span><span leaf="">headers</span></span><span leaf="">(),</span><br><span leaf="">&nbsp; &nbsp;&nbsp;</span><span><span leaf="">'X-Custom-Header'</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'value'</span></span><br><span leaf="">&nbsp; };</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;route.</span><span><span leaf="">continue</span></span><span leaf="">({ headers });</span><br><span leaf="">});</span><br>

六、高级操作

1. 处理弹出窗口

<span><span leaf="">// 等待弹出窗口</span></span><br><span><span leaf="">const</span></span><span leaf="">&nbsp;[popup] =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;</span><span><span leaf="">Promise</span></span><span leaf="">.</span><span><span leaf="">all</span></span><span leaf="">([</span><br><span leaf="">&nbsp; page.</span><span><span leaf="">waitForEvent</span></span><span leaf="">(</span><span><span leaf="">'popup'</span></span><span leaf="">),</span><br><span leaf="">&nbsp; page.</span><span><span leaf="">click</span></span><span leaf="">(</span><span><span leaf="">'a[target="_blank"]'</span></span><span leaf="">)</span><br><span leaf="">]);</span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;popup.</span><span><span leaf="">waitForLoadState</span></span><span leaf="">();</span><br><span><span leaf="">console</span></span><span leaf="">.</span><span><span leaf="">log</span></span><span leaf="">(</span><span><span leaf="">await</span></span><span leaf="">&nbsp;popup.</span><span><span leaf="">title</span></span><span leaf="">());</span><br>

2. 模拟设备

<span><span leaf="">const</span></span><span leaf="">&nbsp;{ devices } =&nbsp;</span><span><span leaf="">require</span></span><span leaf="">(</span><span><span leaf="">'playwright'</span></span><span leaf="">);</span><br><span><span leaf="">const</span></span><span leaf="">&nbsp;iPhone = devices[</span><span><span leaf="">'iPhone 13'</span></span><span leaf="">];</span><br><br><span><span leaf="">const</span></span><span leaf="">&nbsp;context =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;browser.</span><span><span leaf="">newContext</span></span><span leaf="">({</span><br><span leaf="">&nbsp; ...iPhone,</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">locale</span></span><span leaf="">:&nbsp;</span><span><span leaf="">'en-US'</span></span><br><span leaf="">});</span><br><span><span leaf="">const</span></span><span leaf="">&nbsp;page =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;context.</span><span><span leaf="">newPage</span></span><span leaf="">();</span><br><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">goto</span></span><span leaf="">(</span><span><span leaf="">'https://example.com'</span></span><span leaf="">);</span><br>

3. 执行JavaScript

<span><span leaf="">// 执行简单表达式</span></span><br><span><span leaf="">const</span></span><span leaf="">&nbsp;title =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">evaluate</span></span><span leaf="">(</span><span><span leaf="">() =&gt;</span></span><span leaf="">&nbsp;</span><span><span leaf="">document</span></span><span leaf="">.</span><span><span leaf="">title</span></span><span leaf="">);</span><br><br><span><span leaf="">// 传递参数</span></span><br><span><span leaf="">const</span></span><span leaf="">&nbsp;result =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">evaluate</span></span><span leaf="">(</span><span><span leaf="">(</span><span><span leaf="">a, b</span></span><span leaf="">) =&gt;</span></span><span leaf="">&nbsp;{</span><br><span leaf="">&nbsp;&nbsp;</span><span><span leaf="">return</span></span><span leaf="">&nbsp;a + b;</span><br><span leaf="">},&nbsp;</span><span><span leaf="">1</span></span><span leaf="">,&nbsp;</span><span><span leaf="">2</span></span><span leaf="">);</span><br><br><span><span leaf="">// 获取元素属性</span></span><br><span><span leaf="">const</span></span><span leaf="">&nbsp;value =&nbsp;</span><span><span leaf="">await</span></span><span leaf="">&nbsp;page.</span><span><span leaf="">evaluate</span></span><span leaf="">(</span><span><span><span leaf="">el</span></span><span leaf="">&nbsp;=&gt;</span></span><span leaf="">&nbsp;el.</span><span><span leaf="">value</span></span><span leaf="">, page.</span><span><span leaf="">locator</span></span><span leaf="">(</span><span><span leaf="">'input#username'</span></span><span leaf="">));</span><br>

参考资源

  • • Playwright官方文档

  • • Playwright GitHub仓库

  • • Playwright JavaScript示例