前言
在前端的开发过程中，随着项目的不断发展和迭代，我们总会遇到需要不断调整和排查 UI 的需求。而在进行 UI 方面的排查和调试时，我们的最佳助手便是图像截屏。而基于这个需求，@review-packs/storybook-chrome-screenshot 这个 npm 包应运而生。
本篇文章将会详细介绍这个 npm 包的使用方法和流程，以及相关的学习和指导意义。
@review-packs/storybook-chrome-screenshot 的基础介绍
简介
@review-packs/storybook-chrome-screenshot 包是一个基于 Chrome 浏览器的 Storybook 组件截图工具，支持基于 Chrome 的单个页面和多页面截图，并可以使用 Storybook 和 Jest 测试框架。
安装
使用 npm 或 yarn 可以很简单地安装该 npm 包：
npm install @review-packs/storybook-chrome-screenshot yarn add @review-packs/storybook-chrome-screenshot
使用方法
在开始使用该组件，我们需要先配置好一个 Storybook 工程，并确保其中运行得起来。
-- -------------------- ---- -------
------ ---- ---- -------
------ --------- ---- ------------
------ - ------------------------- - ---- -------------------------------------------
----- ---------------------- - - --------- ----- ----- ---------------- --------------------------- --
----------------- ------ -- -- -
--- --------
--- --------------------
--------------- -- -- -
------- - ----- -----------------------------------------
------------------- - --- --------------------------- -------- ---- -------------------- ---
---
-------------- -- -- -
----- ----------------
---
---------- ---- ------- ------ ----- -- -- -
----- ---------- - ----- ------------------------------------
------------------------------------------
--
--在这里，我们通过引入 @review-packs/storybook-chrome-screenshot 包，导入其中的 StorybookChromeScreenshot 类，然后在 beforeAll 和 afterAll 生命周期中启动和关闭浏览器，以及初始化 StorybookChromeScreenshot。
之后我们可以使用 getScreenshot 方法来进行截图操作，并且通过 toMatchImageSnapshot() 方法将运行结果和之前的结果进行对比。
进阶操作
多页面截图
有时，我们需要对多个页面进行截图。此时，我们可以通过在 StorybookChromeScreenshot 中传入指定的路由策略来实现该功能。
const storybookScreenshot = new StorybookChromeScreenshot({
browser,
url: 'http://example.com',
routes: ['/home', '/login', '/profile']
});在上面的代码中，我们传入了一个字符串数组来配置多个路由，以便于后续进行多个页面的截图操作。
Jest 测试框架的支持
@review-packs/storybook-chrome-screenshot 同时也支持 Jest 测试框架，通过在 Jest 中注册 jest-image-snapshot 插件后，就可以轻松地将不同时间点的截图进行对比了。
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------
--------------- --------------------- ------------- ---
----------------- ------ -- -- -
--- --------
--- --------------------
--------------- -- -- -
------- - ----- -----------------------------------------
------------------- - --- --------------------------- -------- ---- -------------------- ---
---
-------------- -- -- -
----- ----------------
---
---------- ---- ------- ------ ----- -- -- -
----- ---------- - ----- ------------------------------------
------------------------------------------
--
--在上面的代码中，我们通过导入 jest-image-snapshot 并注册该插件，使得我们可以通过 toMatchImageSnapshot() 方法进行视图截图的对比操作。
总结
通过本篇文章的阐述，我们可以清晰地了解到 @review-packs/storybook-chrome-screenshot 这个 npm 包的使用方法，而通过这个 npm 包，我们能够很方便地进行 Storybook 组件的截图和对比操作，大大地提高了我们进行 UI 排查和调试的效率。同时，本篇文章也提供了进阶操作的相关说明，可以使我们在更为复杂的项目中也可以使用该 npm 包，再次展现了该 npm 包的强大功能和适用范围。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66c6b