本文为使用puppeteer进行自动化测试的实践总结,持续更新。
puppeteer用途
- 网页截图或者生成 PDF
- 爬取 SPA 或 SSR 网站
- UI 自动化测试,模拟表单提交,键盘输入,点击等行为
- 捕获网站的时间线,帮助诊断性能问题
- 创建一个最新的自动化测试环境,使用最新的 js 和最新的 Chrome 浏览器运行测试用例
- 测试 Chrome 扩展程序
常见用法
-
非无头模式、全屏
puppeteer.launch({ headless:false, //非无头模式 defaultViewport:null, //页面窗口随浏览器大小展示 或者 defaultViewport:{width:0,height:0} args: [ '--start-fullscreen' //浏览器全屏 ] })
如果是使用
puppeteer-core
指定本地chrome浏览器,可能会使用到puppeteer.connect(options)
去连接本地的Chromium。这个时候不仅需要在launch里面配置defaultViewpot
还需要在connect
的options
中配置一下defaultViewport
。否则任然会以默认的width:800,height:600
打开 -
等待指定的选择器匹配的元素出现在页面中
page.waitForSelector(selector[, options])
-
点击某个元素
page.click(selector)
-
点击某个表单元素并输入
//将options设为{delay:20},输入时会延迟20ms,更有feel哦 page.type(selector, text[, options])
注意:type是在表单元素后面追加内容。不会覆盖原有的表单值。
需要清空,重新输入。可以使用page.$eval(selector,el=>{el.value='';el.click()})
-
获取页面元素
page.$(selector) //类似document.querySelector page.$$(selector) //类似document.querySelectorAll
-
打开某个页面
page.goto(url[, options])
-
当点击某个会引起跳转跳转的元素时
await Promise.all([ page.waitForNavigation(), page.click(selector) ])
-
监听浏览器打开新的页面
browser.on('targetcreated',async target =>{ const page = await target.page() })
-
关闭浏览器
browser.close()
-
执行某段js代码
page.evaluate(()=>{ //js代码 })
-
请求拦截
-
page.on(‘request’,request=>{}) 请求触发
-
page.on(‘requestfailed’,request=>{}) 请求失败触发
-
page.on(‘requestfinished’,request=>{}) 请求完成触发
-
page.on(‘response’,response=>{}) 请求返回response时触发
-
- requset.respond() 完成请求后会返回一个响应
- request.continue() 继续请求
- response.abort() 中断请求
以上都需要开启
page.setRequestInterception(true)
来开启拦截
-