Puppeteer结合测试工具jest使用（四）

news2024/12/26 9:31:31

Puppeteer结合测试工具jest使用（四）

在这里插入图片描述

- Puppeteer结合测试工具jest使用（四）
- - - 一、简介
    - 二、与jest结合使用，集成到常规测试
    - 三、支持其他的几种
    - 四、总结

一、简介

Puppeteer是一个提供自动化控制Chrome或Chromium浏览器的Node.js库, Puppeteer支持与node测试工具进行配合集成，集成到一起进行自动化测试。
Jest 是由 Facebook 提供的一款 JavaScript 测试框架，它可以帮助我们编写可靠的测试用例，并能够实现断言、mock 函数等功能。Jest 能够帮助我们做单元测试、集成测试以及 UI 测试等，与 Puppeteer 结合使用可以实现更全面的 UI 测试。

二、与jest结合使用，集成到常规测试

不熟悉jest使用的小伙伴可以先去看看jest的大概使用方法，jest测试框架官方网址：https://jestjs.io/docs/getting-started

下面我们在我们的项目中进行集成jest框架，集成过程也是比较简单的。

安装jest三方库

npm install --save-dev jest

package.json中，在scripts对象下配置脚本

项目路径下，package.json中的scripts对象下配置脚本测试脚本，方便我们直接使用 npm 进行执行。

"test": "jest",

创建测试文件 csdnJest.test.js

项目目录下创建文件，命名为 csdnJest.test.js ，同时将下面的内容添加到文件中。

const puppeteer = require('puppeteer');

let browser;
let page;

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: false,
    slowMo: 80,
    defaultViewport: null, // 不使用默认的固定大小，直接填满浏览器
  });
  page = await browser.newPage();

  page.on('dialog', async dialog => {
    console.log(dialog.message());
    await dialog.dismiss();
    await dialog.dismiss();
    await dialog.dismiss();
  });
});

afterAll(() => {
  browser.close();
});

test('open csdn page', async () => {
  await page.goto('https://www.csdn.net/');
  await page.waitForSelector('a.title');
});

test('expect h3 is 头条', async () => {
  await page.waitForSelector('h3');
  const text = await page.$eval('h3', el => el.textContent);
  expect(text).toBe('头条');
});

在上述代码中，我们创建了一个测试套件，并在 beforeAll 和 afterAll 钩子函数中创建和关闭浏览器。

总共有两个小的测试用例：

测试用例 ‘open csdn page’
我们使用page.goto方法打开了一个网页 https://www.csdn.net/ ，并等待页面中选择器 ‘a.title’ 的出现。
测试用例 ‘expect h3 is 头条’
我们等待h3标签的出现，并且获取到h3标签的内容，然后我们使用 expect 断言判断页面h3的内容是头条

运行脚本,查看实际表现：