简介
@toptal/testshot 是一个基于 Puppeteer 的自动化测试工具，用于进行 Web 应用的端到端测试。它通过将测试代码编写为 JS 函数的形式，使测试代码清晰易读。
安装
你需要先安装 npm，然后在你的项目文件夹下执行以下命令：
npm install -D @toptal/testshot
使用
编写一个测试用例
首先，你需要在你的项目文件夹下的某个文件中定义一个测试用例。测试用例是一个带有参数的函数，参数是 Testshot 类型的对象，该对象提供了许多可用于测试的方法。以下是一个简单的例子：
const { Testshot } = require('@toptal/testshot');
async function exampleTest(testshot) {
const url = 'http://www.example.com';
await testshot.goto(url);
await testshot.waitForSelector('h1');
await testshot.screenshot('example.png');
}运行测试用例
要运行测试用例，你需要编写一个脚本来调用测试用例，这个脚本可以使用 Node.js 在命令行中执行。
const { TestshotRunner } = require('@toptal/testshot');
const { exampleTest } = require('./path/to/exampleTest.js');
(async () => {
const runner = new TestshotRunner();
await runner.run(exampleTest);
})();然后运行下面的命令：
node script.js
当运行完毕时，屏幕上将显示测试结果。
配置
你可以在运行 TestshotRunner 的时候传递一个可选的配置对象，这个对象将会影响测试的行为。
-- -------------------- ---- -------
----- - -------------- - - ----------------------------
----- - ----------- - - ------------------------------------
------ -- -- -
----- ------ - --- ----------------
--------- ------
------- ----
---
----- ------------------------
-----headless
headless 配置项用于启用或停用 headless 模式，默认值为 true。将它设置为 false 将会显示一个浏览器窗口，方便你手动观察测试过程。
{
headless: false,
}slowMo
slowMo 配置项用于延迟事件的执行，可以用来调试测试代码。默认值为 0，即没有延迟。
{
slowMo: 250,
}实战
在本例中，我们将使用 @toptal/testshot 来测试 Google 首页的搜索功能。首先，我们编写一个测试用例：
const { Testshot } = require('@toptal/testshot');
async function googleSearch(testshot, searchQuery) {
await testshot.goto('https://www.google.com');
await testshot.type('[name="q"]', searchQuery);
await testshot.press('Enter');
await testshot.waitForSelector(`a[href*="${searchQuery}"]`);
}该测试用例将打开 Google 首页，向搜索框中输入一个搜索词汇，然后检查是否正确返回了搜索结果。
接下来，我们编写一个脚本来调用测试用例：
-- -------------------- ---- -------
----- - -------------- - - ----------------------------
----- - ------------ - - --------------------------
------ -- -- -
----- ------ - --- ----------------
--------- ------
---
----- ------------- -- -------------------- --------
----- ------------- -- -------------------- -----------
-----当运行完毕时，测试结果会在屏幕上显示出来，你将会看到类似于下面的输出：
#0: SUCCESS [googleSearch] toptal jobs #1: SUCCESS [googleSearch] toptal reviews
至此，我们已经成功使用 @toptal/testshot 来测试 Google 首页的搜索功能。
总结
在这篇文章中，我们介绍了如何使用 @toptal/testshot 来进行端到端测试。我们已经学习了如何编写测试用例、运行测试用例、以及如何使用配置文件来配置测试的行为。通过本文的学习，我们已经获得了实用的测试技能，可以在开发过程中更好地保证代码的质量和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057ae581e8991b448eb6a2