npm 包 percy-client 使用教程

介绍

Percy 是一个可视化测试工具,可以按照用户定义的规则捕获网站截图和 HTML,然后进行对比和差异检测。percy-client 是一个用于编写自动化测试并与该平台进行交互的命令行工具。

本文将介绍 percy-client 的基本用法,以及如何使用它来自动化网站截图和更好地管理视觉测试。

安装

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

使用

首先,在 percy.com 上注册一个账户,然后创建一个新的项目。

然后设置以下环境变量:

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

这个 API Token 可以在 percy.com 仪表板的“设置”中的“API Token”部分找到。

与 Jest 集成

如果你使用 Jest 作为测试框架,则可以使用 Jest 的testEnvironment选项来集成 percy

Jest 配置文件:

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

你还需要安装 jest-environment-percy 并在环境变量中设置 PERCY_TOKEN

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

这时候就可以使用 percySnapshot 函数来收集屏幕截图了。

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

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

手动接入

如果您不使用 Jest,则可以在您的测试代码中手动处理截图并将其上传到 Perc 帐户。

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

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

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

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

结论

percy-client 是一个非常方便的测试工具,可以使屏幕截图和 UI 差异检测变得容易和自动化。本文介绍了如何安装和使用 percy-client,并简要介绍了与 Jest 的集成。希望您可以将这个工具纳入您的开发工作流程中,从而提高您的测试覆盖率和代码质量。

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


猜你喜欢

  • npm 包 fur-examples 使用教程

    前端开发中,我们常常需要使用一些库或工具来实现某些功能,而 npm 就是最为常用的包管理器之一。在众多的 npm 包中,fur-examples 这个 npm 包提供了一些有趣的示例代码,可以帮助前端...

    4 年前
  • npm 包 fur 使用教程

    什么是 npm 包? npm 是一个基于 Node.js 的包管理器,而 npm 包是指在 npm 上注册并发布的模块。在前端开发中,我们通常使用 npm 包来管理和分享代码,以便于快速搭建可靠的应用...

    4 年前
  • npm 包 ape-covering 使用教程

    前端开发中,测试是非常重要的一个环节。测试可以确保我们的代码在各种情况下都可以正常运行,更好地保障了用户的体验。 而在测试中,覆盖率是一个非常关键的指标。覆盖率是指测试用例对代码中语句、分支、函数、行...

    4 年前
  • npm 包 @types/write-pkg 使用教程

    在前端开发中,npm 包经常被用来管理项目的依赖。@types/write-pkg 这个 npm 包是一个用于修改 package.json 文件的类型定义文件,可以帮助我们更加方便地使用 packa...

    4 年前
  • npm 包 @pnpm/assert-project 使用教程

    介绍 在前端项目中经常需要使用多个 npm 包,但是这些包之间的依赖关系可能会导致一些问题。为了解决这个问题,我们可以使用 Node.js 包管理器 pnpm,而 @pnpm/assert-proje...

    4 年前
  • npm 包 ape-testing 使用教程

    在前端开发过程中,测试是一个非常重要的环节。为了提升测试效率,我们可以使用一些工具来辅助进行自动化测试。其中,ape-testing 是一个非常不错的 npm 包,下面我们将为大家介绍如何使用它进行单...

    4 年前
  • npm包sugos-travis使用教程

    简介 sugos-travis是一个可以让你在travis-ci上执行sugo-hub测试的npm包。通过使用它,你可以方便地在开发、测试和部署时快速验证sugo-hub的正确性,从而保障项目的稳定和...

    4 年前
  • npm 包 bredux 使用教程

    简介 Bredux 是一款基于 React + Redux 的状态管理工具,旨在提供一种更简单,更快捷,更高效的前端状态管理方式。 安装 使用 bredux 需要先安装 React 和 Redux,然...

    4 年前
  • npm 包 @types/is-ci 使用教程

    前言 在前端开发中,我们经常需要判断当前项目是否处于 CI/CD 环境,以便根据这个条件进行一些特定的处理,比如说区分测试环境和生产环境。而这个判断的过程有些繁琐,我们需要考虑多种情况,比如环境变量、...

    4 年前
  • npm 包 the-server-util 使用教程

    在前端开发过程中,我们经常会使用一些工具来快速搭建服务器和进行日常开发。而 npm 包 the-server-util 就是一款非常实用的工具,它可以让你在几分钟内搭建一个服务器,并且支持多种功能扩展...

    4 年前
  • npm包clay-resource-ref使用教程

    前言 npm是前端开发必不可少的工具之一。clay-resource-ref作为一个常用的npm包,是一个用于在页面中处理URL和资源引用的解析器。 在本文中,我们将会详细介绍npm包clay-res...

    4 年前
  • npm 包 async-busboy 使用教程

    简介 async-busboy 是一个基于 Node.js 的 npm 包,用于处理 HTTP 请求中上传的文件。它支持异步操作,能够有效地提高文件上传的效率。 在本篇文章中,我们将介绍 async-...

    4 年前
  • npm 包 @types/normalize-path 使用教程

    简介 在前端开发中,我们常常需要对文件路径进行操作。normalize-path 是一个常用的 npm 包,它能够将任意路径字符串转换为标准的路径格式,并解决跨平台的路径兼容性问题。

    4 年前
  • npm 包 @types/tape-promise 使用教程

    简介 在前端开发中,我们通常需要进行单元测试和集成测试,而 tape 是一个轻量级的测试工具,它的优点是简单易用,可以做到快速编写和运行测试用例。而 @types/tape-promise 是一个 t...

    4 年前
  • npm包askconfig的使用教程

    在开发前端项目时,我们经常需要在不同的环境(例如开发,测试和生产)中使用不同的配置文件。使用npm包 askconfig,可以更加方便地管理和使用这些配置文件。 安装 askconfig 在使用 np...

    4 年前
  • npm 包 the-hash 使用教程

    在前端开发中,常常需要使用哈希函数来生成唯一的标识符。npm 包 the-hash 是一个快速且功能强大的哈希函数库,它支持多种哈希算法。本文将介绍 the-hash 的使用方法,并提供一些示例代码。

    4 年前
  • npm 包 dir-is-case-sensitive 使用教程

    简介 在编写前端项目时,我们常常需要处理文件路径及文件夹名称的大小写问题。在不同的操作系统上,文件夹名称的大小写是有区别的,这就导致了开发人员在使用路径时需要特别注意。

    4 年前
  • npm 包 path-name 使用教程

    path-name 是一个方便的 npm 包,它可以帮助我们处理文件路径的名称,比如获取文件名,获取文件扩展名、判断是否是一个目录等操作。在前端开发中,这些操作非常常见,因此使用 path-name ...

    4 年前
  • NPM 包 read-yaml-file 使用教程

    在前端开发过程中,我们通常需要读取 YAML 文件来获取配置信息等。NPM 上有一个名为 read-yaml-file 的包,可以方便地读取 YAML 文件。本文将介绍如何使用该包读取 YAML 文件...

    4 年前
  • npm 包 adigest 使用教程

    背景: 在前端开发中,我们经常需要对数据进行加密处理,以确保数据的安全性。而 adigest 是 npm 上一款常用的数据加密工具包,它能够为我们提供多种加密算法的实现方式。

    4 年前

相关推荐

    暂无文章