介绍
webdrivercss-custom-v4-compatible是一个npm包，它可以帮助您对网站进行视觉回归测试。它使用WebdriverIO进行控制，通过截取参考屏幕截图和当前屏幕截图，比较它们的像素和颜色来检测网站功能或视觉上的变化。此外，您还可以使用该包配置自定义视觉测试。本文将会向您展示如何使用本包进行视觉回归测试。
安装
要使用webdrivercss-custom-v4-compatible，您首先需要在您的项目中安装它。您可以通过npm进行安装:
npm install webdrivercss-custom-v4-compatible --save-dev
配置
要使用webdrivercss-custom-v4-compatible，您需要先设置配置文件，通常为wdio.conf.js。
-- -------------------- ---- -------
----- ------------ - ---------------------------------------------
----- ----------------------- - -----------------------------------------------------
----- ---- - --- -------
----- --------- - ---------------
-------------- - -
-- --- ----
----------------- -
-------- --- -------------------------
-- -----------------------------------------
------------------ -----
-- ----------------
------------ -------
-- ----------------
------------- -------
-- -----------------
------------------- -----------------
-- -----------------------------------
--------------- ------------------------------------------------------
---
-- -------------------------------
------------------ ---
-- -------------------------------
----- --
--
---------- ------- ------- --------
-- --- -----
-请确认您已经在webdriver.io配置文件里面添加了screenshotPath选项，以便在webdrivercss之后让webdriver.io上传屏幕截图。
// webdriverio 配置
exports.config = {
// ... 其他配置项
screenshotPath: './screenshots/',
// ... 其他配置项
}使用
在您的测试代码中，您可以使用以下命令来进行新的截图比较：
-- -------------------- ---- -------
-- --------------------------
----- ------------ - ----------------------------
-- -- -
------------ - ---------- -- --- ----- ------- -------------- -
-------------------------
-------------- ----------------
-- ------
----------------------------------------- -------------- -
-
-- --------------------
----- --- ------ -----
-- -----------------------
------------ -------
------------- ------
-
-- ------
---
-- -- -
------------ - ---------- -- --- ------ ------ -------------- -
-------------------------
-- ------
-------------------------------------- -
-
----- --- ------ -----
------------ -------
------------- ------
-
-- ------
---在以上示例代码中，调用webdrivercss.checkElement()方法，屏幕截图所在元素的选择器是'.input-field'，保存的截图名称为 'input-field'，标签自定义为自己所需要的值。类似的，您也可以使用webdrivercss.checkViewport()方法获取整个屏幕截图。
结论
webdrivercss-custom-v4-compatible是一个非常有用的npm包。它可以帮助您检测产品修改是否影响了界面的外观与功能，从而保证产品的质量。通过配置和使用，您可以快速易懂地了解到如何使用该包进行视觉回归测试。如果您频繁进行视觉回归测试，npm包 webdrivercss-custom-v4-compatible将是您必备的利器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd2f