入门指南：使用Puppeteer进行前端自动化测试

Puppeteer是一个基于Node.js的自动化测试工具，由Google开发。它可以模拟人类用户在Chrome或Chromium浏览器中的操作，并捕捉浏览器的屏幕截图、生成PDF和执行表单提交等操作。它还可以在Headless模式下运行，即在没有UI界面的情况下运行浏览器。Mocha是一个JavaScript测试框架，可以用于编写前端和后端测试。它支持多种测试样式，例如BDD（行为驱动开发）和T

寒烟说

3479人浏览 · 2023-04-14 17:51:45

寒烟说 · 2023-04-14 17:51:45 发布

当今的Web应用程序越来越复杂，需要进行大量的测试来确保它们的质量和稳定性。手动测试是非常耗时和容易出错的，因此前端自动化测试变得越来越重要。在这篇博客中，我们将介绍Puppeteer，这是一个功能强大的前端自动化测试工具，可以帮助您提高测试效率和准确性。

我是将它用于自己项目的冒烟测试。并配合Mocha测试框架一起使用。

一、什么是Puppeteer？

Puppeteer是一个基于Node.js的自动化测试工具，由Google开发。它可以模拟人类用户在Chrome或Chromium浏览器中的操作，并捕捉浏览器的屏幕截图、生成PDF和执行表单提交等操作。它还可以在Headless模式下运行，即在没有UI界面的情况下运行浏览器。
中文文档：https://puppeteer.bootcss.com/

二、搭建Puppeteer测试环境

安装Node.js

Puppeteer是一个基于Node.js的工具，因此在使用之前需要先安装Node.js。可以从官方网站上下载并安装。

安装Puppeteer

安装Puppeteer需要使用npm命令，打开命令行终端并运行以下命令：

npm install puppeteer --save-dev

在这个过程中，npm将从npm registry下载Puppeteer包，并将其添加到您的项目中。

编写测试脚本

接下来，您需要编写一个测试脚本来测试您的应用程序。这个脚本需要使用Puppeteer API来模拟用户的操作。下面是一个简单的示例脚本，它打开Google首页并搜索“Puppeteer”：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.google.com');
  await page.type('input[name="q"]', 'Puppeteer');
  await page.click('input[type="submit"]');
  await browser.close();
})();

在这个脚本中，我们首先使用 puppeteer.launch() 方法启动一个新的Chrome实例。然后，我们使用 browser.newPage() 方法创建一个新的页面对象。接着，我们使用 page.goto() 方法导航到Google首页。然后，我们使用page.type() 方法输入搜索词“Puppeteer”，再使用 page.click() 方法点击搜索按钮。最后，我们使用 browser.close() 方法关闭浏览器实例。

运行测试脚本

在编写完测试脚本后，您可以使用以下命令在命令行中运行它：

node <your-test-script>.js

这个命令将在Chrome浏览器中运行测试脚本，并输出结果。如果一切正常，您应该可以看到浏览器在执行搜索操作并在结果页面中返回结果。

登录验证码如何处理？

遇到登录验证码问题时，我一开始尝试用了插件去解析，但是并不行，因为验证码识别出来全是错的。（也对，机器验证码就是防机器的）
于是我用了第二个方案：手动输入验证码：

  // 获取验证码图片内容
  await page.waitForSelector('.code-img');
  await (async function handleCaptchaInput(page) {
    // 等待验证码输入框出现
    await page.waitForSelector('.el-input__inner', { visible: true });

    // 暂停程序，等待用户手动输入验证码
    const captcha = await new Promise((resolve) => {
      const readline = require('readline').createInterface({
        input: process.stdin,
        output: process.stdout,
      });
      readline.question('请输入验证码：', (captcha) => {
        resolve(captcha);
        readline.close();
      });
    });
    // 输入用户名、密码、验证码
    const inputElements = await page.$$('.el-input__inner');
    const firstInputElement = inputElements[0]; // 选择第1个元素
    await firstInputElement.type('root');
    const secondInputElement = inputElements[1]; // 选择第2个元素
    await secondInputElement.type('111111');
    const thirdInputElement = inputElements[2]; // 选择第3个元素
    await thirdInputElement.type(captcha);
  })(page);

这里当你启动测试时，就会等待你手动输入验证码，如果你用的有头模式的话就是页面会打开，然后你就可以手动在终端输入：
在这里插入图片描述
这样登录之后，后面的流程就可以解决了。

测试用例只能一点一点手动敲吗？

其实有很多工具可以做到浏览器录制用户操作的功能。例如控制台就有一个Recorder可以做到；

在这里插入图片描述
这里直接就可以导出Puppeteer测试脚本，当然，有的时候还是需要你手动改的，例如判断流程是否正确。

三、配合Mocha测试框架和Puppeteer一起进行前端自动化测试流程

Mocha框架简介

Mocha是一个JavaScript测试框架，可以用于编写前端和后端测试。它支持多种测试样式，例如BDD（行为驱动开发）和TDD（测试驱动开发），并提供了丰富的API和插件，方便用户进行灵活的测试组织和执行。

Mocha和Puppeteer的结合使用

安装Mocha和Puppeteer

在开始使用Mocha和Puppeteer进行测试前，我们需要先安装它们。

首先，我们可以使用npm来安装Mocha：

npm install mocha --save-dev

接着，我们可以安装Puppeteer：

npm install puppeteer --save-dev

创建测试文件

在项目的根目录下创建一个test目录，并在该目录下创建一个测试文件。例如，我们可以创建一个名为test.js的文件。

编写测试用例

在test.js文件中，我们可以编写测试用例。下面是一个简单的示例：

const puppeteer = require('puppeteer');
const assert = require('assert');
const caseList = require('./case1.js');

describe('测试页面标题', function() {
  let browser;
  let page;

  before(async function() {
    browser = await puppeteer.launch();
    page = await browser.newPage();
    await page.goto('https://www.baidu.com');
  });

  it('标题应该包含百度', async function() {
    const title = await page.title();
    assert(title.includes('百度'));
  });
  it('测试注册用户功能', async function() {
    this.timeout(30000); // 设置超时时间为5秒
    await caseList.case1();
  });
  after(async function() {
    await browser.close();
  });
});