npm 包 @storybook/addon-storyshots-puppeteer 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常需要测试自己的代码是否能够正常运行，以及是否符合设计要求。而随着项目的不断扩大，测试工作变得越来越繁琐。其中，视觉测试是十分重要而且难以避免的环节，因为人们往往更加相信自己的眼睛。为了规避这些问题，现在有很多自动化测试工具可以快速地完成这些工作。其中一个也是我们今天的主角：@storybook/addon-storyshots-puppeteer。

什么是 @storybook/addon-storyshots-puppeteer？

简单来说，@storybook/addon-storyshots-puppeteer 是一款基于 Puppeteer 和 Storybook 的测试工具，可用于进行前端视觉测试。

Puppeteer 是一款由 Google 开发的基于 Node.js 的无头浏览器工具，它可以模拟人类用户的行为，比如点击、输入、滚动等等。帮助我们在前端测试中获得更好的测试结果。

Storybook 是一款开源的前端 UI 组件开发工具，提供了一种可视化开发模式，让组件的开发更加快捷、高效。

如何使用 @storybook/addon-storyshots-puppeteer？

以下是如何使用 @storybook/addon-storyshots-puppeteer 进行前端视觉测试的详细步骤：

安装

安装 @storybook/addon-storyshots-puppeteer
```
$ npm install --save-dev @storybook/addon-storyshots-puppeteer
```
请确保已经安装了 Storybook 和 Puppeteer。
配置 Puppeteer

在 jest-puppeteer.config.js 中进行如下配置：
```
module.exports = {
  launch: {
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  },
  browserContext: 'default',
};
```
由于 Puppeteer 的运行需要依赖系统图形界面，因此需要配置 headless 为 false。

配置测试文件

在你的测试文件中添加如下代码：

import initStoryshots from '@storybook/addon-storyshots-puppeteer';

initStoryshots({
  suite: 'Visual tests',
});

运行测试

运行 jest 命令：

$ npx jest --config ./test/jest.config.js --detectOpenHandles

等待测试完成。

查看测试结果

在测试完成后，@storybook/addon-storyshots-puppeteer 会自动在根目录下生成 __image_snapshots__ 文件夹，其中包含了所有的测试结果。你可以查看这些文件夹，以判断你的组件是否满足设计要求。

总结

通过本文的介绍，相信你已经了解了如何使用 @storybook/addon-storyshots-puppeteer 进行前端视觉测试，以及它的使用方法和注意事项。

值得注意的是，@storybook/addon-storyshots-puppeteer 并不能完全取代人工测试。它只是为了帮助我们减少测试工作的重复性，提高测试效率。在使用过程中，如果出现问题，需要仔细检查测试结果，以便更快地发现问题并解决它们。

最后，希望这篇文章对你有帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/storybook-addon-storyshots-puppeteer