Node.js Playwright常用使用案例代码 - 知识铺
Playwright常用使用案例代码(Node.js)
一、页面导航
1. 基本导航
<span><span leaf="">const</span></span><span leaf=""> { chromium } = </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=""> () => {</span><br><span leaf=""> </span><span><span leaf="">const</span></span><span leaf=""> browser = </span><span><span leaf="">await</span></span><span leaf=""> chromium.</span><span><span leaf="">launch</span></span><span leaf="">();</span><br><span leaf=""> </span><span><span leaf="">const</span></span><span leaf=""> page = </span><span><span leaf="">await</span></span><span leaf=""> browser.</span><span><span leaf="">newPage</span></span><span leaf="">();</span><br><span leaf=""> </span><span><span leaf="">await</span></span><span leaf=""> 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=""> </span><span><span leaf="">// 等待页面加载完成</span></span><br><span leaf=""> </span><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">waitForLoadState</span></span><span leaf="">(</span><span><span leaf="">'networkidle'</span></span><span leaf="">);</span><br><span leaf=""> </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=""> page.</span><span><span leaf="">title</span></span><span leaf="">());</span><br><span leaf=""> </span><span><span leaf="">await</span></span><span leaf=""> 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=""> 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=""> 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=""> 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=""> 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=""> 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=""> 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=""> page.</span><span><span leaf="">click</span></span><span leaf="">(</span><span><span leaf="">'div.context-menu'</span></span><span leaf="">, { </span><span><span leaf="">button</span></span><span leaf="">: </span><span><span leaf="">'right'</span></span><span leaf=""> });</span><br><br><span><span leaf="">// 悬停</span></span><br><span><span leaf="">await</span></span><span leaf=""> 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=""> page.</span><span><span leaf="">fill</span></span><span leaf="">(</span><span><span leaf="">'input[name="username"]'</span></span><span leaf="">, </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=""> page.</span><span><span leaf="">type</span></span><span leaf="">(</span><span><span leaf="">'#search'</span></span><span leaf="">, </span><span><span leaf="">'Playwright'</span></span><span leaf="">, { </span><span><span leaf="">delay</span></span><span leaf="">: </span><span><span leaf="">100</span></span><span leaf=""> });</span><br><br><span><span leaf="">// 清空输入框</span></span><br><span><span leaf="">await</span></span><span leaf=""> 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=""> page.</span><span><span leaf="">dragAndDrop</span></span><span leaf="">(</span><span><span leaf="">'#item'</span></span><span leaf="">, </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=""> 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="">({ </span><span><span leaf="">x</span></span><span leaf="">: </span><span><span leaf="">200</span></span><span leaf="">, </span><span><span leaf="">y</span></span><span leaf="">: </span><span><span leaf="">0</span></span><span leaf=""> });</span>
三、表单填写
1. 文本输入
<span><span leaf="">// 文本输入</span></span><br><span><span leaf="">await</span></span><span leaf=""> 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=""> 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=""> 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=""> 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=""> 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=""> 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=""> 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=""> 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="">label</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=""> 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="">, </span><span><span leaf="">'green'</span></span><span leaf="">, </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=""> page.</span><span><span leaf="">screenshot</span></span><span leaf="">({ </span><span><span leaf="">path</span></span><span leaf="">: </span><span><span leaf="">'screenshot.png'</span></span><span leaf=""> });</span><br><br><span><span leaf="">// 截取全屏</span></span><br><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">screenshot</span></span><span leaf="">({ </span><span><span leaf="">path</span></span><span leaf="">: </span><span><span leaf="">'fullpage.png'</span></span><span leaf="">, </span><span><span leaf="">fullPage</span></span><span leaf="">: </span><span><span leaf="">true</span></span><span leaf=""> });</span><br><br><span><span leaf="">// 截取指定区域</span></span><br><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">screenshot</span></span><span leaf="">({ </span><br><span leaf=""> </span><span><span leaf="">path</span></span><span leaf="">: </span><span><span leaf="">'partial.png'</span></span><span leaf="">, </span><br><span leaf=""> </span><span><span leaf="">clip</span></span><span leaf="">: { </span><span><span leaf="">x</span></span><span leaf="">: </span><span><span leaf="">50</span></span><span leaf="">, </span><span><span leaf="">y</span></span><span leaf="">: </span><span><span leaf="">50</span></span><span leaf="">, </span><span><span leaf="">width</span></span><span leaf="">: </span><span><span leaf="">400</span></span><span leaf="">, </span><span><span leaf="">height</span></span><span leaf="">: </span><span><span leaf="">300</span></span><span leaf=""> } </span><br><span leaf="">});</span><br>
2. 元素截图
<span><span leaf="">const</span></span><span leaf=""> 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=""> element.</span><span><span leaf="">screenshot</span></span><span leaf="">({ </span><span><span leaf="">path</span></span><span leaf="">: </span><span><span leaf="">'element.png'</span></span><span leaf=""> });</span><br>
五、网络请求处理
1. 请求拦截与模拟
<span><span leaf="">// 拦截API请求并返回模拟数据</span></span><br><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">route</span></span><span leaf="">(</span><span><span leaf="">'**/api/users'</span></span><span leaf="">, </span><span><span><span leaf="">route</span></span><span leaf=""> =></span></span><span leaf=""> {</span><br><span leaf=""> route.</span><span><span leaf="">fulfill</span></span><span leaf="">({</span><br><span leaf=""> </span><span><span leaf="">status</span></span><span leaf="">: </span><span><span leaf="">200</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">contentType</span></span><span leaf="">: </span><span><span leaf="">'application/json'</span></span><span leaf="">,</span><br><span leaf=""> </span><span><span leaf="">body</span></span><span leaf="">: </span><span><span leaf="">JSON</span></span><span leaf="">.</span><span><span leaf="">stringify</span></span><span leaf="">([{ </span><span><span leaf="">id</span></span><span leaf="">: </span><span><span leaf="">1</span></span><span leaf="">, </span><span><span leaf="">name</span></span><span leaf="">: </span><span><span leaf="">'John Doe'</span></span><span leaf=""> }])</span><br><span leaf=""> });</span><br><span leaf="">});</span><br><br><span><span leaf="">// 拦截并修改请求</span></span><br><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">route</span></span><span leaf="">(</span><span><span leaf="">'**/*.png'</span></span><span leaf="">, </span><span><span><span leaf="">route</span></span><span leaf=""> =></span></span><span leaf=""> {</span><br><span leaf=""> </span><span><span leaf="">// 中止图片请求</span></span><br><span leaf=""> 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="">, </span><span><span><span leaf="">request</span></span><span leaf=""> =></span></span><span leaf=""> {</span><br><span leaf=""> </span><span><span leaf="">console</span></span><span leaf="">.</span><span><span leaf="">log</span></span><span leaf="">(</span><span><span leaf="">`Request: </span><span><span leaf="">${request.method()}</span></span><span leaf=""> </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="">, </span><span><span><span leaf="">response</span></span><span leaf=""> =></span></span><span leaf=""> {</span><br><span leaf=""> </span><span><span leaf="">console</span></span><span leaf="">.</span><span><span leaf="">log</span></span><span leaf="">(</span><span><span leaf="">`Response: </span><span><span leaf="">${response.status()}</span></span><span leaf=""> </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=""> [response] = </span><span><span leaf="">await</span></span><span leaf=""> </span><span><span leaf="">Promise</span></span><span leaf="">.</span><span><span leaf="">all</span></span><span leaf="">([</span><br><span leaf=""> page.</span><span><span leaf="">waitForResponse</span></span><span leaf="">(</span><span><span leaf="">'**/api/data'</span></span><span leaf="">),</span><br><span leaf=""> 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=""> data = </span><span><span leaf="">await</span></span><span leaf=""> response.</span><span><span leaf="">json</span></span><span leaf="">();</span><br>
3. 修改请求头
<span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">route</span></span><span leaf="">(</span><span><span leaf="">'**/*'</span></span><span leaf="">, </span><span><span leaf="">async</span></span><span leaf=""> route => {</span><br><span leaf=""> </span><span><span leaf="">const</span></span><span leaf=""> headers = {</span><br><span leaf=""> ...route.</span><span><span leaf="">request</span></span><span leaf="">().</span><span><span leaf="">headers</span></span><span leaf="">(),</span><br><span leaf=""> </span><span><span leaf="">'X-Custom-Header'</span></span><span leaf="">: </span><span><span leaf="">'value'</span></span><br><span leaf=""> };</span><br><span leaf=""> </span><span><span leaf="">await</span></span><span leaf=""> 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=""> [popup] = </span><span><span leaf="">await</span></span><span leaf=""> </span><span><span leaf="">Promise</span></span><span leaf="">.</span><span><span leaf="">all</span></span><span leaf="">([</span><br><span leaf=""> page.</span><span><span leaf="">waitForEvent</span></span><span leaf="">(</span><span><span leaf="">'popup'</span></span><span leaf="">),</span><br><span leaf=""> 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=""> 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=""> popup.</span><span><span leaf="">title</span></span><span leaf="">());</span><br>
2. 模拟设备
<span><span leaf="">const</span></span><span leaf=""> { devices } = </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=""> iPhone = devices[</span><span><span leaf="">'iPhone 13'</span></span><span leaf="">];</span><br><br><span><span leaf="">const</span></span><span leaf=""> context = </span><span><span leaf="">await</span></span><span leaf=""> browser.</span><span><span leaf="">newContext</span></span><span leaf="">({</span><br><span leaf=""> ...iPhone,</span><br><span leaf=""> </span><span><span leaf="">locale</span></span><span leaf="">: </span><span><span leaf="">'en-US'</span></span><br><span leaf="">});</span><br><span><span leaf="">const</span></span><span leaf=""> page = </span><span><span leaf="">await</span></span><span leaf=""> context.</span><span><span leaf="">newPage</span></span><span leaf="">();</span><br><span><span leaf="">await</span></span><span leaf=""> 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=""> title = </span><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">evaluate</span></span><span leaf="">(</span><span><span leaf="">() =></span></span><span leaf=""> </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=""> result = </span><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">evaluate</span></span><span leaf="">(</span><span><span leaf="">(</span><span><span leaf="">a, b</span></span><span leaf="">) =></span></span><span leaf=""> {</span><br><span leaf=""> </span><span><span leaf="">return</span></span><span leaf=""> a + b;</span><br><span leaf="">}, </span><span><span leaf="">1</span></span><span leaf="">, </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=""> value = </span><span><span leaf="">await</span></span><span leaf=""> page.</span><span><span leaf="">evaluate</span></span><span leaf="">(</span><span><span><span leaf="">el</span></span><span leaf=""> =></span></span><span leaf=""> 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示例
- 原文作者:知识铺
- 原文链接:https://index.zshipu.com/ai/post/202510/Node.js-Playwright%E5%B8%B8%E7%94%A8%E4%BD%BF%E7%94%A8%E6%A1%88%E4%BE%8B%E4%BB%A3%E7%A0%81/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。
- 免责声明:本页面内容均来源于站内编辑发布,部分信息来源互联网,并不意味着本站赞同其观点或者证实其内容的真实性,如涉及版权等问题,请立即联系客服进行更改或删除,保证您的合法权益。转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。也可以邮件至 sblig@126.com