在前端开发中，我们经常需要对网站的不同版本进行比对，以便在发布新版本之前验证新旧版本之间的变化。通常，我们会使用截图比对工具来完成这个任务。而 wraith 就是一个非常优秀的截图比对工具。
简介
Wraith 是一个开源的截图比对工具，它可以帮助我们快速准确地比对网站的多个版本。Wraith 可以自动捕捉指定网址的全屏截图，并将截图进行比对，生成比对报告。Wraith 还可以自动检测网站上的交互元素（如按钮、下拉框等），以确保比对结果准确无误。
安装和使用
Wraith 是基于 Ruby 开发的，所以我们首先需要安装 Ruby 环境。如果你的系统上已经安装了 Ruby，可以直接使用 Gem 安装 Wraith：
gem install wraith
安装成功后，我们就可以使用 Wraith 了。下面是一些常用指令：
wraith capture config_file—— 捕捉网站的截图wraith history config_file—— 生成基于历史比对的报告wraith latest config_file—— 生成基于最近一次比对的报告
其中，config_file 是 Wraith 的配置文件，你可以根据需要自行创建。Wraith 的配置文件采用 YAML 格式，内容包括要比对的网址、使用的浏览器等信息。
下面是一个简单的配置文件示例：
-- -------------------- ---- ------- - ---------- --- ------ ----- ------------------------ ------ ---------------------------------- -------- ----- - ------ ----------- -------------- - --- - ---- - ---- ------------- --
在这个配置文件中，我们定义了两个路由（home 和 about），以及路由对应的网址和别名。我们还指定了三种屏幕宽度以及使用的浏览器（CasperJS）。
生成比对报告的指令如下：
wraith capture config.yml && wraith latest config.yml
这个指令会自动捕捉指定网址的截图，并进行比对，生成最近一次比对的报告。如果我们需要生成历史比对的报告，可以使用 wraith history 命令。
小结
Wraith 是一个功能强大的截图比对工具，可帮助我们快速准确地比对多个版本的网站。在平时的开发过程中，我们可以将 Wraith 集成到自动化测试流程中，以便实时监测网站的变化。希望本文对大家了解和使用 Wraith 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671178dd3466f61ffe6b1