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

这篇具有很好参考价值的文章主要介绍了Puppeteer结合测试工具jest使用(四)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

puppeteer与jest结合,Puppeteer学习及实践,测试工具,自动化,网络爬虫,开发语言,javascript

一、简介
  • 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('头条');
});


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

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

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

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

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

npm run test

puppeteer与jest结合,Puppeteer学习及实践,测试工具,自动化,网络爬虫,开发语言,javascript

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

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

三、支持其他的几种

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

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

通过结合Puppeteer和Jest进行自动化端到端测试,我们可以有效地测试和验证Web应用程序的各种功能,从而提高测试效率和测试质量。有兴趣的小伙伴也可以去试试其他支持的测试框架集成。文章来源地址https://www.toymoban.com/news/detail-789909.html


到了这里,关于Puppeteer结合测试工具jest使用(四)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Puppeteer中使用Stealth.min.js库

    这里需要安装npm install puppeteer-extra puppeteer-extra-plugin-stealth,然后,在启动浏览器时,Puppeteer 会自动应用 Stealth.min.js 插件的功能。

    2024年02月10日
    浏览(37)
  • 使用Puppeteer构建博客内容的自动标签生成器

    标签是一种用于描述和分类博客内容的元数据,它可以帮助读者快速找到感兴趣的主题,也可以提高博客的搜索引擎优化(SEO)。然而,手动为每篇博客文章添加合适的标签是一件费时费力的工作,有时候也容易遗漏或重复。本文将介绍如何使用Puppeteer这个强大的Node.js库来构

    2024年02月10日
    浏览(47)
  • 使用 puppeteer 加载 html 文件来运行 js 文件

    遇到一个需求, 在浏览器环境下来运行 js sdk 文件, 这个 js 文件是不能运行在 nodejs 环境下的; 所以通过 puppeteer 无头浏览器来运行代码获取对应的结果。 首先是安装插件 puppeteer,然后创建一个项目, 我这里是express; 这里是主要的代码。 代码解释: await page.goto(`file://${htmlPat

    2024年02月07日
    浏览(40)
  • Puppeteer 使用教程-实战篇(爬取图片、视频、音频,页面数据)

    目录 前言 一、 获取实体店铺信息 二、 获取全国各省市县地图json数据 三、 cookies 四、 获取网络图片、视频资源 五、 自动化测试 总结         续上篇,我们简单讲述一下puppeteer常见的应用场景,包括静态页面数据获取,网络请求获取截取、图片、视频资源下载、自动化

    2024年02月06日
    浏览(39)
  • 使用Puppeteer爬取地图上的用户评价和评论

    在互联网时代,获取用户的反馈和意见是非常重要的,它可以帮助我们了解用户的需求和喜好,提高我们的产品和服务质量。有时候,我们需要从地图上爬取用户对某些地点或商家的评价和评论,这样我们就可以分析用户对不同地区或行业的态度和偏好。但是,如何从地图上

    2024年02月09日
    浏览(40)
  • Vue3+Vite使用Puppeteer进行SEO优化(SSR+Meta)

    【笑小枫】https://www.xiaoxiaofeng.com上线啦 资源持续整合中,程序员必备网站,快点前往围观吧~ 我的个人博客【笑小枫】又一次版本大升级,虽然知道没有多少访问量,但我还是整天没事瞎折腾。因为一些功能在Halo上不太好实现,所以又切回了Vue3项目,本文就是对于Vue单页面

    2024年01月25日
    浏览(55)
  • 安装puppeteer运行报错Cannot find module ‘puppeteer‘

    安装puppeteer后运行网上的例子 结果报错 Cannot find module ‘puppeteer’ 我是全局安装的 npm install -g puppetteer 后面经过百度参考了puppeteer 安装 js ts的这篇博客,有详细的解决过程,他说要将模块安装到项目目录下,我尝试后确实可以正常使用

    2024年02月07日
    浏览(53)
  • 使用puppeteer完成监听浏览器下载文件并保存到自己本地或服务器上完成上传功能

    获取网站点击的下载pdf,并把pdf重命名再上传到COS云上面 “puppeteer”: “^19.7.2”, “egg”: “^3.15.0”, // 服务期用egg搭的 文件服务使用COS腾讯云 获取浏览器下载事件,并把文件保存到本地 在保存到本地前监听此文件夹,如果有文件则获取并上传 加timer做防抖是为了防止在文

    2024年04月15日
    浏览(38)
  • Puppeteer基础知识(一)

    一、简介 Puppeteer 是一个强大而灵活的工具,可以用于网页爬虫、自动化测试、性能分析等场景。能够模拟用户行为、拦截网络请求、处理弹窗、模拟设备等,可以让我们更灵活地控制浏览器和页面。不仅能够启动web进行测试,也能够启动web H5 模拟器进行测试。 Puppeteer 是一

    2024年02月07日
    浏览(26)
  • puppeteer学习笔记

    puppeteer是一个可以控制chrome的库,可以模拟一些交互行为,以及进行前端自动化测试。 启动浏览器,然后打开一个页面,之后跳转到一个网址打开页面 与普通爬虫相比它更简单,因为它用的是真实的chrome环境,不需要我们配置各种header的参数 它能等待js动态生成的内容之后

    2024年02月07日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包