简介
@domain7/gemini-gui 是一款前端自动化测试工具，它能帮助前端开发人员快速地进行视觉回归测试，检查页面布局和功能是否正常，从而加强产品质量。本文将介绍如何使用这个工具。
安装工具
安装 npm
如果你还没有安装 npm，你需要先安装它。npm 是 Node.js 包管理工具，它可以下载安装各种依赖包。
你可以从 https://www.npmjs.com/get-npm 网站下载 npm 安装包并安装。
安装 @domain7/gemini-gui
使用 npm 工具安装 @domain7/gemini-gui 包：
npm i @domain7/gemini-gui --save-dev
该命令会自动在项目中添加 @domain7/gemini-gui 依赖，并保存依赖信息到 package.json 文件的 devDependencies 字段中。
配置文件
创建配置文件
打开项目根目录，新建文件 gemini.js，并输入如下内容：
-- -------------------- ---- -------
-------------- - -
------- -
------ ------
-------- -
--
--------- -
------- -
-------------------- -
------------ --------
-
--
-------- -
-------------------- -
------------ ---------
-
-
--
----- -
-------- -
------ ----------------------
--------- ---------- ----------
-
--
-------- -----------------------
--代码解释：
system对象中，debug字段指定是否在终端中输出调试信息；workers字段指定 gemini 在每个浏览器上并行运行的 worker 数量；browsers对象是指定要运行的浏览器列表，这里我们仅指定 Chrome 和 Firefox；sets对象中，desktop字段是用来指定要在哪些浏览器上运行测试，并且指定了测试文件的位置；rootUrl是项目的测试 URL，这里我们指定它为http://localhost:3000。
创建测试文件
在项目中创建 tests/gemini/demo.js 文件，包含如下代码：
gemini.suite('demo', (suite) => {
suite
.setUrl('/')
.setCaptureElements('body')
.capture('plain');
});这段代码定义了一个名为 demo 的测试 suite，指定 URL 为主页（/），并捕获整个 body 元素，保存一个名为 plain 的截屏。
运行测试
在本地机器上执行测试
我们可以在终端中执行 gemini test 命令运行测试：
./node_modules/.bin/gemini test
这个命令会在 Chrome 和 Firefox 中运行全部测试，测试结果会输出到终端以及生成截屏。
CI 持续集成
对于持续集成环境（CI，如 Travis CI），我们应该在 CI 环境中运行测试。
添加 .travis.yml 文件到项目中，添加如下内容：
-- -------------------- ---- ------- --------- ------- -------- - ---- --------- - ---- --------------- - ------ ------------- - -- -- ---------------- ----- ------- - --- --- ----- - --- --- -------
它完成以下操作：
- 使用 Node.js 12 运行测试；
- 安装 Xvfb 运行环境；
- 在 Xvfb 上设置一个虚拟屏幕；
- 运行测试。
在 CI 环境下，我们使用 gemini-ci 命令运行测试：
./node_modules/.bin/gemini-ci build
这个命令会在默认浏览器中打开运行结果，你可以通过调整代码来改变这些设置。
总结
本文介绍了如何使用 @domain7/gemini-gui 工具来进行基于图像比较的自动化测试。当你的前端项目变得越来越庞大的时候，这种测试能够返回有价值的信息，帮助你更快速地检测问题。请尝试使用它，并在您的项目中实施自动化测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4581e8991b448e5c84