在前端开发中，经常需要进行视觉界面的测试，以确保最终产品的质量。为了高效地完成这项工作，我们需要一些工具来辅助完成。其中，storybook-screenshot-schematics 就是一款非常优秀的 npm 包，它能够帮助我们自动生成截图和屏幕录像，以便进行视觉测试。
如何安装 storybook-screenshot-schematics？
安装步骤很简单，只需要使用 npm 或 yarn 安装即可：
npm install -D @storybook/addon-storyshots @storybook/addon-storyshots-puppeteer storybook-screenshot-schematics
这里，我们还需要安装 @storybook/addon-storyshots 和 @storybook/addon-storyshots-puppeteer，它们是 storybook-screenshot-schematics 所依赖的两个包。
如何使用 storybook-screenshot-schematics 生成截图？
安装完成后，我们需要配置 storybook-screenshot-schematics 的标准模板，并使用 schematic 命令生成测试文件，如下所示：
ng config schematics.@schematics/angular:component '{ "styleext": "scss", "spec": false }'
ng generate @storybook/angular:stories --name buttons
ng generate storybook-screenshot-schematics:screenshot --name buttons这里，我们使用了 @schematics/angular:component 命令和 @storybook/angular:stories 命令来生成测试用的组件，然后使用 storybook-screenshot-schematics 的 screenshot 命令来执行测试并生成截图。在执行这个命令之后，storybook-screenshot-schematics 会在项目目录下的 .storybook 文件夹中生成一个截图文件夹，里面就包含了生成的截图。
如何使用 storybook-screenshot-schematics 生成屏幕录像？
与生成截图类似，我们也需要先安装所需要的依赖包，然后生成测试用的组件，并使用命令执行屏幕录像。具体步骤如下：
npm i --dev storybook-addon-viewport@5.1.0 ng g s storybook-screenshot-schematics-viewport ng g c test-viewport ng g storybook-screenshot-schematics:image --name test-viewport --watch
在这个过程中，我们需要首先安装 storybook-addon-viewport 包，然后生成测试组件和 angular service 文件，最后再使用 storybook-screenshot-schematics:image 来执行屏幕录像。
结语
使用 storybook-screenshot-schematics 可以极大地提高我们的视觉测试效率，只需要几行命令就可以完成测试并生成结果。本文介绍了如何安装和使用该工具，希望对您有所帮助。如果您还没有尝试过 storybook-screenshot-schematics，那么赶快试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006726a3660cf7123b3679f