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', //浏览器全屏
    ],
    })

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

    page.waitForSelector(selector[, options])

  3. 点击某个元素

    page.click(selector)

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

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

  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 官网

Edit this page