把 puppeteer 融入调试流程，调试体验爽翻了！

站长

2023年07月24日 02:34 · 阅读数 15

最近一直在做业务需求，表单类的，每次调试都要填一堆东西，而且项目需要登录，经常需要来一遍登录流程，再填写表单来调试。这个流程还是比较繁琐的。

于是我在想，自动化测试工具 puppeteer 是可以通过脚本来自动执行浏览器操作的，能不能调试的时候让 puppeteer 帮我自动做了页面操作的一些流程呢？

我试了一下还真可以，用 puppeteer 来自动执行脚本，并且过程中还可以打断点调试，调试体验简直不要太爽。

这篇文章就来分享下。

首先，react 项目我是通过 vscode debugger 来调试的：

把 puppeteer 融入调试流程，调试体验爽翻了！

在 .vscode > launch.json 的调试配置文件里新增一个 chrome 类型的调试配置，输入调试的 url。

然后点击 debug 启动：

把 puppeteer 融入调试流程，调试体验爽翻了！

执行到代码中的断点就会在 vscode 里断住：

把 puppeteer 融入调试流程，调试体验爽翻了！

这样就可以在 vscode 里断点调试 react 项目了。

但登录还是比较麻烦的，用户名密码我经常忘，而且登录之后还要填一些表单，也很麻烦。

这时候我想到了 puppeteer。

它是可以自动执行脚本的。

比如这样一段脚本：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });

  const page = await browser.newPage();
  await page.goto('http://localhost:8000/login');

  await page.waitForSelector('#username');

  const $username = await page.$('#username');
  await $username.type('1111111', {
    delay: 100
  });
  
  const $password = await page.$('#password');
  await $password.type('testtest', {
    delay: 100
  });
  
  const $button = await page.$('button[type="submit"]');
  await $button.click();
})();

用 puppeteer 启动一个浏览器，headless 设为 false 就是需要界面。

打开新页面，加载 login 的 url，等出现 #username 的元素之后之后，输入用户名和密码，然后点击提交。

这个脚本还是很容易理解的。

跑下试试：

把 puppeteer 融入调试流程，调试体验爽翻了！

流程倒是对了，只是显示的不对，加个 viewport 的设置就好了：

把 puppeteer 融入调试流程，调试体验爽翻了！

width、height 为 0 会自适应。

把 puppeteer 融入调试流程，调试体验爽翻了！

自动跑登录脚本成功了。

那问题来了，断点调试和自动化测试能不能一起跑呢？

看起来这俩都是跑了一个浏览器，应该能融合才对。

这个就要从 puppeteer 和调试的实现原理来看了。

调试是基于调试协议的，比如网页调试是 Chrome DevTools Protocol。

Chrome DevTools 对接了 CDP 可以调试网页，我们用 VSCode Debugger 能调试网页同样也是对接了 CDP。

把 puppeteer 融入调试流程，调试体验爽翻了！

puppeteer 能控制浏览器执行一些脚本，也是基于 CDP。

这俩都需要浏览器在调试模式启动，也就是指定 remote-debugging-port。

我们前面跑 react 项目的调试是用的 launch 的方式，它会自动跑一个调试浏览器，然后连接上 ws 调试服务。

其实它还有 attach 的方式：

把 puppeteer 融入调试流程，调试体验爽翻了！

attach 的方式不单独跑调试浏览器，而是连接上已有的浏览器来调试。所以需要指定调试服务的端口。

既然 puppeteer 和调试都要以调试模式跑浏览器，那我们就等 puppeteer 跑起 chrome 之后，vscode debugger 再 attach 上它来调试。

这样不就既能自动化测试，又能断点调试了么？

我们来试一下：

把 puppeteer 融入调试流程，调试体验爽翻了！

puppeteer 启动 chrome 的时候，我指定了调试端口为 9999。

然后跑下 puppeteer 脚本，把 chrome 跑起来：

把 puppeteer 融入调试流程，调试体验爽翻了！

之后，去 react 项目里启动调试，只不过这次是 attach：

把 puppeteer 融入调试流程，调试体验爽翻了！

依然是能正常断点调试的：

把 puppeteer 融入调试流程，调试体验爽翻了！

而且现在还可以跑自动化脚本了！

我们改造下 puppeteer 脚本，改成每次输入内容的时候才跑对应的脚本。

const puppeteer = require('puppeteer');
const readline = require('readline');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: {
      width: 0,
      height: 0
    },
    debuggingPort: 9999
  });

  const page = await browser.newPage();

  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });

  rl.on('line', async (str) => {
    if (str === 'login') {
      await login(page);
    } else if (str === 'baidu') {
      await baidu(page);
    }
  });
})();

async function baidu(page) {
  await page.goto('http://www.baidu.com');
}
async function login(page) {
  await page.goto('http://localhost:8000/login');

  await page.waitForSelector('#username');

  const $username = await page.$('#username');
  await $username.type('1111111', {
    delay: 100
  });

  const $password = await page.$('#password');
  await $password.type('testtest', {
    delay: 100
  });

  const $button = await page.$('button[type="submit"]');
  await $button.click();
}