npm 包 gemini 使用教程

在前端开发中,我们经常需要进行 UI 自动化测试。gemini 是一个基于 Node.js 的 UI 测试框架,可以用于进行前端组件的视觉回归测试和功能测试,它支持多种浏览器和 Node.js 版本,并且可以与不同的测试运行器和断言库进行集成。本文将介绍 gemini 的基本使用方法与相关技巧。

安装

首先,我们需要通过 npm 安装 gemini 和相关依赖:

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

其中:

  • gemini 是核心包;
  • gemini-resemble 是用于生成图片差异的 reporter;
  • compare-images 是用于比较两张图片的库。

同时,安装一个浏览器驱动程序,比如 chrome,以此作为 gemini 的测试浏览器。

配置

在项目根目录下新建一个 .gemini.yml 配置文件,内容如下:

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

其中:

  • rootUrl 是项目的根路径,用于定义测试网站的 base url;
  • sets 则定义了测试集合,包括测试文件地址和测试浏览器;
  • system 则是一些其他配置,比如开启调试模式和添加插件等。

示例

下面是一个 gemini 测试案例,测试一个按钮样式的正确性:

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

其中:

  • module.exports 导出一个函数,该函数接收一个 gemini 实例;
  • gemini.suite 表示一套测试单元,可以通过传入 path, setNamebisers 参数来配置;
  • suite.setUrl 表示测试的页面地址;
  • suite.setCaptureElements 表示需要捕获的元素选择器,可以使用多个命名捕获区域,这里分别是正常状态和鼠标悬停状态;
  • suite.capture 则是具体的测试动作,包括捕获元素和生成对比图片等。

运行

首先需要启动被测试项目的本地服务器,并在控制台中输入命令:

------ ----

该命令会自动加载配置文件,并执行测试用例,如果有失败的用例会在控制台中输出详细的信息和截图。

小结

本文介绍了 gemini 的基本使用方法与相关技巧,包括安装和配置,测试示例和运行等,希望对前端开发者在进行 UI 自动化测试时能有所帮助。更多使用方式和实战经验可以到 gemini 官网和社区进行查阅。

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


猜你喜欢

  • npm 包 rehype-minify-javascript-url 使用教程

    在前端项目中,经常会使用到各种 npm 包来实现各种功能。其中,rehype-minify-javascript-url 是一个用于压缩 HTML 中 JavaScript URL 的 npm 包。

    5 年前
  • npm 包 hast-util-is-javascript 使用教程

    前言 hast-util-is-javascript 是一个 npm 包,主要用于判断一个 hast 对象是否代表一个 JavaScript 脚本。本文将介绍如何使用该 npm 包,包括安装过程、使用...

    5 年前
  • npm 包 hast-util-from-string 使用教程

    前言 hast-util-from-string 是一个轻量级的 npm 包,它可以将字符串转换为 HAST(HTML 抽象语法树)格式。HAST 是一种可以用来表示 HTML、Markdown 和其...

    5 年前
  • npm包rehype-minify-javascript-script使用教程

    在前端开发中,我们常常会使用一些npm包来增加代码的功能或者优化代码的性能。而npm包rehype-minify-javascript-script就是一款可以帮助我们在HTML页面中压缩JavaSc...

    5 年前
  • npm 包 docengine 使用教程

    前言 前端开发中难免需要编写文档,文档质量直接关系到我们团队的沟通效率和代码质量。而 docengine 是一款可以帮助我们更快速地生成文档的 npm 包,今天我们就来看看如何使用它。

    5 年前
  • npm 包 asterx 使用教程

    在前端开发中,我们经常需要对文本进行加密或解密操作。而 npm 包 asterx 则是一个能够有效地解决文本加密和解密问题的工具。在本篇文章中,我们将会详细地介绍如何使用 asterx,以及如何在项目...

    5 年前
  • npm 包 fepack 使用教程

    JavaScript 是一门非常重要的编程语言,无论是前端开发还是后端开发,都需要使用到它。同时,随着前端技术的不断发展,越来越多的开发者使用 npm 包来快速搭建前端项目。

    5 年前
  • npm包swiger使用教程

    在前端开发中,我们经常会使用一些第三方库或者插件,这些库或插件都需要通过npm进行安装和管理。其中比较常用的一个插件就是swagger,它可以方便地为我们生成接口文档,增加了开发效率。

    5 年前
  • npm 包 puglatizer 使用教程

    在前端领域中,构建工具和库扮演着至关重要的角色。npm 是一个非常流行的包管理器,它使得在项目中使用各种 JavaScript 类库和工具非常方便。其中,puglatizer 是一个强大的 npm 包...

    5 年前
  • npm 包 case-node-red 使用教程

    在前端开发中,使用 npm 包是非常常见的事情,这些包可以为我们带来很大的便利,而 case-node-red 就是一款非常受欢迎的 npm 包,它是一个基于 Node.js 平台的可视化编程工具,非...

    5 年前
  • NPM包v-render使用教程

    简介 v-render是一个基于Web组件的JavaScript前端框架,它可以帮助我们在项目中更高效地使用Web组件。 v-render以自定义元素为核心,通过自定义元素与JavaScript对象的...

    5 年前
  • npm 包 peer 使用教程

    前言 在前端开发中,NPM 是一个必不可少的工具,它为我们提供了强大的包管理功能和丰富的开源资源。但是,在使用 NPM 包时,我们会遇到一个问题:如何管理依赖包之间的版本兼容性? 在此,我们要介绍一个...

    5 年前
  • npm 包 grunt-md2html 使用教程

    介绍 grunt-md2html 是一个基于 Grunt 的 npm 包,它可以将 Markdown 格式的文件转换成 HTML 格式并生成静态网页。它的使用非常简单,只需要在终端输入几条命令就可以轻...

    5 年前
  • npm 包 jsdoc-oblivion 使用教程

    在前端开发中,文档是不可或缺的一部分。而对于开源项目或者团队合作中的代码文档管理,往往需要使用 jsdoc 来生成文档。但是,使用 jsdoc 需要一定的学习成本和配置过程,而且文档生成效果也不太令人...

    5 年前
  • npm 包 idb-wrapper 使用教程

    在前端开发中,我们经常需要使用本地浏览器存储来缓存数据和提高网页性能。IndexedDB 是 HTML5 提供的本地浏览器存储技术之一,可以帮助我们在浏览器中存储大量结构化数据,而 idb-wrapp...

    5 年前
  • npm包 minimongo 使用教程

    在前端开发中,我们通常需要和数据库打交道。而 minimongo 这个 npm 包提供了一种在浏览器中使用 MongoDB 风格的接口的解决方案。在这篇文章中,我将为大家介绍 minimongo 的使...

    5 年前
  • npm 包 wakajs 使用教程

    简介 wakajs 是一款轻量级、高性能的移动端 Web 应用框架,它提供了一些简单但功能强大的 API,可以方便地实现平滑的页面过渡、动画效果、滑动手势等移动端特性,让你的 Web 应用更加流畅和自...

    5 年前
  • npm 包 nicolas1.1 使用教程

    什么是 npm 包 nicolas1.1? npm 包 nicolas1.1 是一个基于 React 的 UI 组件库,它包含了许多常见的前端组件,如按钮、输入框、表单等。

    5 年前
  • npm 包 versync 使用教程

    什么是 versync versync 是一个能够帮助前端开发者更加方便进行版本号管理的 npm 包。它提供了一种简单易用的方式,帮助开发者在版本更新时能够自动地完成版本号的增加和修改。

    5 年前
  • npm 包 papi 使用教程

    在前端开发中,我们经常需要使用接口来获取数据,然而每次手动请求接口是一件很繁琐的事情。为了简化这个过程,已经有很多工具实现了自动请求接口并返回结果的功能,其中 npm 包 papi 是一个值得推荐的工...

    5 年前

相关推荐

    暂无文章