puppeteer

本文为使用puppeteer进行自动化测试的实践总结，持续更新。

puppeteer用途

• 网页截图或者生成 PDF
• 爬取 SPA 或 SSR 网站
• UI 自动化测试，模拟表单提交，键盘输入，点击等行为
• 捕获网站的时间线，帮助诊断性能问题
• 创建一个最新的自动化测试环境，使用最新的 js 和最新的 Chrome 浏览器运行测试用例
• 测试 Chrome 扩展程序

常见用法

1. 非无头模式、全屏

   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打开

2. 等待指定的选择器匹配的元素出现在页面中

   page.waitForSelector(selector[, options])
   

3. 点击某个元素

   page.click(selector)
   

4. 点击某个表单元素并输入

   //将options设为{delay:20}，输入时会延迟20ms,更有feel哦
   page.type(selector, text[, options])
   

   注意：type是在表单元素后面追加内容。不会覆盖原有的表单值。
   需要清空，重新输入。可以使用page.$eval(selector,el=>{el.value='';el.click()})

5. 获取页面元素

   page.$(selector) //类似document.querySelector
   page.$$(selector) //类似document.querySelectorAll
   

6. 打开某个页面

   page.goto(url[, options])
   

7. 当点击某个会引起跳转跳转的元素时

   await Promise.all([
           page.waitForNavigation(),
           page.click(selector)
       ])
   

8. 监听浏览器打开新的页面

   browser.on('targetcreated',async target =>{
           const page = await target.page()
       })
   

9. 关闭浏览器

   browser.close()
   

10. 执行某段js代码

    page.evaluate(()=>{
        //js代码
    })
    

11. 请求拦截

    • page.on(‘request’,request=>{}) 请求触发

    • page.on(‘requestfailed’,request=>{}) 请求失败触发

    • page.on(‘requestfinished’,request=>{}) 请求完成触发

    • page.on(‘response’,response=>{}) 请求返回response时触发

    • requset对象

      • requset.respond() 完成请求后会返回一个响应
      • request.continue() 继续请求
      • response.abort() 中断请求

      以上都需要开启page.setRequestInterception(true)来开启拦截

    • response对象

参考

1. git example
2. 结合项目来谈谈 Puppeteer
3. puppeteer中文文档
4. puppeteer英文文档
5. 在线测试
6. puppeteer官网