npm包 vrt-cli 使用教程

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

本文将为读者介绍如何使用 vrt-cli 这款npm包工具进行Visual Regression Testing(视觉回归测试)。通过本篇文章的阅读,读者可以掌握如何使用vrt-cli建立自己的视觉回归测试流程,提高自己的前端开发能力。

简介

VRT是Visual Regression Testing的缩写,即视觉回归测试。它是前端自动化测试技术的一种。其主要思想是通过比对前后两次该页面的UI展示,来发现可能出现的现实问题。VRT能够自动化地比对两个页面是否发生了变化,并在变化发生时及时发出警报。

vrt-cli是一款基于node.js开发的VRt工具,它可以通过一行简单的命令行指令来启动VRt测试。

安装

我们使用npm包管理器来一键安装vrt-cli。打开终端输入以下指令即可:

--- ------- -- -------

使用方法

接下来我们将会介绍vrt-cli的核心调用方法。相信通过对这些核心指令的学习,您可以掌握vrt-cli的基本用法以及一些高级的功能。

初始化VRT环境

在开始使用VRT之前,您需要先为项目初始化VRT环境。在项目根目录中输入以下命令行指令即可完成VRT环境的初始化:

--- ----

接下来您会被要求输入VRT实例的名称和VRT主机的地址。

启动VRT测试

完成VRT环境初始化之后,您可以通过以下命令行指令启动VRT测试:

--- ----

该指令会自动在VRT中检查页面UI变化,如果检测到页面变化则会自动发送警报。

对VRT截图进行比对

VRT需要比对两个截图并返回测试结果。若要对两个VRT截图进行比对,则需要使用 vrt compare 命令。

--- ------- ---------- ----------- ------------- -----------

其中:

  • refImage: 参考图片
  • testImage: 需要测试的图片
  • outputImage: 比对结果输出文件
  • threshold: 对比容忍度默认为0.1

指定VRT服务器地址

在启动VRT测试过程中,您可以使用-v选项来指定VRT服务器地址。

--- ---- -- ----------

使用VRT配置文件

您也可以把VRT测试相关信息以及手动比对两张图片的详细信息都放到VRT配置文件中。VRT配置文件需要在VRT环境初始化之后手动创建。

--- ---- --

VRT配置文件格式应该是JSON或者YAML或者Toml。

-
  ------- --------
  ------ ------------------------
  --------- -------------
  ---------------- -
    --------------- -
      -------- -----
      --------- ---
    --
    -------------- ----
  --
  ------------- -
    ------------ -----
    ----------- -----
  -
-
----- -----
---- ---------------------
------- ----------
--------------
  -------------
    ------ ----
    ------- ---
  ------------ ----
-----------
  ---------- ----
  --------- -----
---- - -------
--- - -----------------------
------ - ------------
--------- - ----
-------- - -----

---------------
------------------ - ----
------------------- - ---
----------- - ----

示例代码

一个简单的VRT代码示例:

----- -- - --------------------
----- --- - -------------------

----- -------- ------ -
  ----- ------------- - -------------
  ----- ------------------ - --------------------------------
  ----- --------- - ------------------------------
  -- ------- ----------
  ----- -------------
    ---- ---------------------
    ---------
  ---
  -- ----- ---------- ------- -------- ---
  ----- ------------- - ----------------------------
  ----- ------ - ----- -------------
    ------------- -------------------
    -------------- ----------
    -------------- ------------- 
  ---
  -- ---- ------ -- ----
  --------------------------------------- ------- - ------- - ---
-

----------------------------

上述代码使用vrt-cli来生成基准数据,并与当前时刻的快照进行比对,返回比对结果。这里我们使用了Promise和async/await机制。使用vrt-cli进行VRT测试的过程非常简单,即使用capture选项来生成基准数据,再与当前图片进行比对。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562ea81e8991b448e099c


猜你喜欢

  • npm 包 kit-tool 使用教程

    在前端开发中,为了提高开发效率和代码质量,我们经常会将常用的工具和方法封装成 npm 包。而 kit-tool 就是一个非常实用的 npm 包,它包含了多个常用的前端工具和方法,比如颜色值转换、获取设...

    3 年前
  • npm 包 angular2-countrypicker 使用教程

    简介 angular2-countrypicker 是一个可以在 Angular 2 应用程序中使用的国旗选择器组件。它可以为您的用户提供一种简单而方便的方式来选择他们所在的国家和地区。

    3 年前
  • npm 包 docdash-actionhero 使用教程

    简介 docdash-actionhero 是一个用于生成漂亮文档的 npm 包。该 npm 包的灵感来自于 docdash,主要适用于 ActionHero 上下文的生成标记文档,使得开发者在使用 ...

    3 年前
  • npm 包 gsuite-report-manager 使用教程

    简介 gsuite-report-manager 是一个 Node.js 的 npm 包,用于管理 G Suite 的各种报表。它可以帮助开发者快速地获取 G Suite 中的用户、设备、安全等相关数...

    3 年前
  • npm 包 ionic2-google-places-autocomplete 使用教程

    介绍 ionic2-google-places-autocomplete 是一个基于 Google 地图 Places API 的自动补全搜索框组件,可以用于 Ionic 2 的开发中。

    3 年前
  • npm 包 statdists 使用教程

    简介 statdists 是一个基于 JavaScript 的统计分布函数库,包含了大量的统计分布函数,可以帮助开发者在前端应用中进行各种统计计算。使用 statdists 包可以快速地进行常用的统计...

    3 年前
  • npm 包 react-oa 使用教程

    前言 React 是一个 Facebook 开源的一个 JavaScript 库,它能够让我们用更少的代码来构建 Web 应用,而且具有更好的可维护性和可复用性。在现代 Web 应用的开发中,使用 R...

    3 年前
  • npm 包 bitfinexws1 使用教程

    介绍 bitfinexws1 是一个基于 Node.js 的 npm 包,可用于与 Bitfinex Websocket API 进行通信。通过使用该 npm 包,您可以轻松获取关于 Bitfinex...

    3 年前
  • npm 包 openchrome 使用教程

    在前端开发中,打开新的浏览器选项卡是一个非常常见的需求。而使用 npm 包 openchrome 则可以轻松地实现这一需求。本文将介绍如何在你的项目中使用 openchrome,以及其详细的使用方法和...

    3 年前
  • npm 包 bkbridge 使用教程

    介绍 在前端开发中,我们经常需要进行不同页面间的数据传输,而 bkbridge 是一款帮助我们实现跨页面数据传输的 npm 包。它能够简洁地实现数据的发送、接收、消息监听、两端数据同步等功能,让我们在...

    3 年前
  • npm 包 dynamodb-landscaper 使用教程

    在现代 Web 开发中,使用数据库来存储和管理数据是非常普遍的。AWS 的 DynamoDB 是一种 NoSQL 数据库,它可以在各种 Web 应用程序中被广泛地使用。

    3 年前
  • npm 包 monte.js 使用教程

    前言 作为前端开发人员,我们经常需要使用一些开源的 JavaScript 库或是 npm 包,monte.js 就是其中之一。monte.js 是一款基于 JavaScript 和 Canvas 的图...

    3 年前
  • npm 包 react-native-action-picker 使用教程

    前言 在移动端开发中,经常会用到下拉菜单与弹出框。React Native 提供了许多 UI 库,但并不一定适合我们的项目需求。此时可以使用 npm 包 react-native-action-pic...

    3 年前
  • npm 包 im-datetime-picker 使用教程

    简介 im-datetime-picker 是一款基于 Vue.js 并使用了 Element UI 的时间日期选择器组件。它可以用于前端开发中需要选择时间日期的场景,如时间选择器、日期选择器等。

    3 年前
  • npm 包 form-data-validate 使用教程

    在开发前端应用时,表单数据的验证是一个非常重要的环节。为此,我们可以使用 npm 包 form-data-validate 来简化数据验证的流程。本教程将介绍 form-data-validate 的...

    3 年前
  • npm 包 adawat 使用教程

    前言 adawat 是一款针对 WebRTC 技术的 npm 包,提供了便捷的用户界面和一系列 API,旨在让开发者更快速地搭建实时音视频通讯功能。本篇文章将介绍 adawat 的使用方法,并提供相关...

    3 年前
  • npm包ng-bootstrap-brillio使用教程

    在前端开发中,使用现有的库或框架可以大大提高开发效率,因此,许多前端开发人员使用npm包来扩充他们的项目。ng-bootstrap-brillio是一个很好的npm包,它使得使用Angular和Boo...

    3 年前
  • npm包angular-directives-in-views使用教程

    当你想在Angular应用程序中引入自定义指令时,npm包angular-directives-in-views可以是一个很好的选择。这个包提供了一种简便的方法来编写自定义指令,并在应用程序中使用它们...

    3 年前
  • npm 包 is-api 使用教程

    在当今互联网时代中,前端开发的重要性越来越受到关注。在前端开发中,与后端接口交互是一个必要的过程,因此更好地调试和管理接口是非常有必要的。is-api 就是一个 npm 包,它可以帮助前端开发者更好地...

    3 年前
  • npm 包 reactive-require 使用教程

    什么是 reactive-require reactive-require 是一款基于 webpack 的插件,用于动态加载模块,并实现模块的响应式更新。它可以让前端开发者更加方便地实现模块的按需加载...

    3 年前

相关推荐

    暂无文章