Puppeteer结合测试工具jest使用(四)

Puppeteer结合测试工具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三方库
bash 复制代码
npm install --save-dev jest
  • package.json中,在scripts对象下配置脚本

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

js 复制代码
"test": "jest",
  • 创建测试文件 csdnJest.test.js

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

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('头条');
});

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

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

  • 测试用例 'open csdn page'

    我们使用page.goto方法打开了一个网页 https://www.csdn.net/ ,并等待页面中选择器 'a.title' 的出现。

  • 测试用例 'expect h3 is 头条'

    我们等待h3标签的出现,并且获取到h3标签的内容,然后我们使用 expect 断言判断页面h3的内容是 头条

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

bash 复制代码
npm run test

在运行过程中,Puppeteer将自动控制Chrome浏览器,打开指定的网页,并执行我们的测试用例。运行结束后,我们将在命令行中看到测试用例的执行结果。

我们能够看到结果中,所有的测试用例都是通过的。

三、支持其他的几种

当然,Puppeteer不仅仅支持jest集成,其实应该能够集成其他几种node类型的测试框架,有兴趣的同学可以自行去尝试下集成到自己的项目中进行使用。

比如以下一些常见的框架:

  • Jasmine
  • Jest
  • Mocha
  • Node Test Runner
四、总结

通过结合Puppeteer和Jest进行自动化端到端测试,我们可以有效地测试和验证Web应用程序的各种功能,从而提高测试效率和测试质量。有兴趣的小伙伴也可以去试试其他支持的测试框架集成。


相关推荐
Azxcc03 分钟前
C++异步编程入门
开发语言·c++
Biaobiaone8 分钟前
Java中的生产消费模型解析
java·开发语言
我命由我1234523 分钟前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
Jokerator25 分钟前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
海天胜景29 分钟前
vue3 当前页面方法暴露
前端·javascript·vue.js
特立独行的猫a33 分钟前
11款常用C++在线编译与运行平台推荐与对比
java·开发语言·c++
GISer_Jing36 分钟前
前端面试常考题目详解
前端·javascript
VBA63371 小时前
VBA之Word应用第三章第十一节:Document对象的事件
开发语言
wjs20242 小时前
SOAP Header 元素
开发语言
中微子2 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript