如何用Jest和TypeScript调用Puppeteer库

前端技术小哥

图片描述
客户端测试通常使用Selenium,它可自动执测试行任务。
但是,您可能不需要Seleniumna那种重量级的或者那么多功能的框架。如果您正在寻找一种更轻巧,易于使用的工具来自动执行任务或运行端到端测试,Puppeteer是一个不错的选择。
本文中我们将使用:

  • Puppeteer 用于控制和自动化基于Chromium 的浏览器的库,可用于GitLab和Jenkins等持续集成的工具。我之前写过一篇关于Puppeteer进行端到端测试的文章。
  • Jest 一个很好的测试运行工具,用于编写执行用JavaScript或Typescript编写的测试。它与Node.js和流行的前端框架(vue和react)配合的很好。
  • TypeScript JavaScript的超集,它增加了静态类型以及其他不错的功能。InterlliJ和vscode等流行的IDE 对TypeScript提供了很好的支持,从而改善了开发人员的体验。

所有这些库都是流行的开源项目,由著名的软件公司(谷歌,Facebook和微软)维护,这意味着这些工具不会很快消亡。 在这篇文章的最后,我们应该有一个可以可靠地运行测试或自动化任务的项目,用Chromium浏览器中的TypeScript编写。

如何配置Jest,Puppeteer和TypeScript

  • 安装TypeScript。
  • 创建一个tsconfig.json文件(TypeScript可以为您完成此操作)。
  • 安装Jest及其打字@types/jest。
  • 安装Puppeteer及其输入@types/puppeteer。这将下载Chromium的一个版本。如果您已经安装了Chrome而且无需下载,则可以使用puppeteer-core。
  • 安装jest-puppeteer预设。这使你的工作更轻松,因为它大大减少了配置。
  • 创建一个jest.config.js。它应该使用jest-puppeteer预设。
  • 创建一个jest-puppeteer.config.js。您可以使用此文件设置自定义Chrome选项(例如,以非无头模式运行)。
  • 创建测试。应将API或端到端测试放入专用测试目录中,并在文件名中包含单词spec或文字test。如果不能找到你的测试,您可以自定义testMatch在jest.config.js。
  • 运行测试:jest --runInBand。runInBand将禁用并行测试执行,这对于运行API或端到端测试非常实用。
  • 可选:如果您需要在所有测试开始之前或之后执行任务,则可以使用Jest globalSetup/ globalTeardown。如果这样做,您需要自己调用globalSetup/ globalTeardown,完成调用jest-puppeteer(例如,在测试完成后关闭浏览器)。
module.exports = {
    preset: 'jest-puppeteer',
    testMatch: ["**/?(*.)+(spec|test).[t]s"],
    testPathIgnorePatterns: ['/node_modules/', 'dist'], // 
    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
    transform: {
        "^.+\\.ts?$": "ts-jest"
    },
    globalSetup: './jest.global-setup.ts', // will be called once before all tests are executed
    globalTeardown: './jest.global-teardown.ts' // will be called once after all tests are executed
};
import "expect-puppeteer";
module.exports = {
    launch: {
        dumpio: true,
        headless: false,
        args: ['--disable-infobars'],
    },
    browserContext: 'default'
};
const { setup: setupPuppeteer } = require('jest-environment-puppeteer');
/**
 * Sets up the environment for running tests with Jest
 */
module.exports = async function globalSetup(globalConfig) {
    // do stuff which needs to be done before all tests are executed
    await setupPuppeteer(globalConfig);
};

结论

感谢你做将这篇文章读完。正如您所见,连接Jest,Puppeteer和TypeScript需要短短几个步骤。一旦完成这些设置,您可以实现很多您想实现的事情。
希望本文能帮助到您!

看之后

点赞,让更多的人也能看到这篇内容(收藏不点赞,都是耍流氓-_-)
关注公众号「新前端社区」,享受文章首发体验!
每周重点攻克一个前端技术难点。

阅读 2.2k

有开始有结局

689 声望
155 粉丝
0 条评论

有开始有结局

689 声望
155 粉丝
文章目录
宣传栏