使用Wraith创建和比较网页屏幕截图

Last week I wrote about using PhantomJS to create screenshots of webpages.  I still find it amazing that we can so quickly and easily create screenshots of a web page using a bit of server side JavaScript.  A reader brought to my attention a tool that takes webpage screenshot gathering to a new level:  Wraith.  Wraith, a tool created by BBC News developers, not only captures screenshots of desired pages but will capture screenshots from two domains and compare the two, creating a diff image that overlays the two screenshots so you can ensure integrity between them.

上周，我写了有关使用PhantomJS创建网页截图的文章 。 我仍然感到惊奇的是，我们可以使用一些服务器端JavaScript来快速，轻松地创建网页的屏幕截图。 一位读者引起了我的注意，该工具可将网页屏幕截图收集到一个新的水平： Wraith 。 由BBC新闻开发人员创建的Wraith工具不仅捕获所需页面的屏幕截图，还将捕获来自两个域的屏幕截图并进行比较，从而创建一个覆盖两个屏幕截图的差异图像，从而确保它们之间的完整性。

Why is Wraith useful?  If you have a development server and you want to ensure new changes wont negatively effect the design of the production server, you can run wraith to compare the output of each page on each server!  Let's have a look at how to use Wraith!

幽灵为何有用？ 如果您有开发服务器，并且要确保新的更改不会对生产服务器的设计产生负面影响，则可以运行wraith来比较每台服务器上每个页面的输出！ 让我们看看如何使用幽灵！

YAML配置 (YAML Configuration)

Assuming you've installed Wraith and its dependencies, you'll need to create a YAML file with configuration information for screenshot creation and comparison.  The following is my configuration:

假设您已经安装了Wraith及其依赖项 ，则需要创建一个具有配置信息的YAML文件，以用于屏幕快照的创建和比较。 以下是我的配置：

#Headless browser option
browser: "phantomjs"

# Type the name of the directory that shots will be stored in
directory: "screenshots"

# Add only 2 domains, key will act as a label
domains:
  home: "https://davidwalsh.name"
  localhost: "http://localhost:8080"

#Type screen widths below, here are a couple of examples
screen_widths:
  - 320
  - 600
  - 768x1500 # you can also specify the height, as we've done here
  - 1024
  - 1280

#Type page URL paths below, here are a couple of examples
paths:
  home: /
  topics: /topics
  content_template: /content-template

#Amount of fuzz ImageMagick will use
fuzz: "20%"

#Choose how results are displayed, by default alphanumeric. Different screen widths are always grouped.
#alphanumeric - all paths (with, and without, a difference) are shown, sorted by path
#diffs_first - all paths (with, and without, a difference) are shown, sorted by difference size (largest first)
#diffs_only - only paths with a difference are shown, sorted by difference size (largest first)
mode: diffs_first

threshold: 15

Within my configuration above I've directed Wraith to:

在上述配置中，我已将Wraith定向到：

• Compare my production domain and my local development server.
  比较我的生产域和本地开发服务器。
• Take and compare screenshots at multiple screen sizes
  拍摄和比较多种屏幕尺寸的屏幕截图
• Take and compare screenshots of three critical paths
  拍摄并比较三个关键路径的屏幕截图

The screenshots are placed in a "screenshots" directory with a matching _diff.png file for each relevant page.  The following is a diff page for which I purposefully mismatched content:

屏幕截图放置在“ screenshots”目录中，每个相关页面都有一个匹配的_diff.png文件。 以下是我有意使内容不匹配的差异页面：

The errors in layout are obvious (on purpose), so you would be able to tell with an image like this that a change you made locally may break the desired layout of given pages on production.

布局中的错误很明显(故意)，因此您可以通过这样的图像来判断，您在本地进行的更改可能会破坏生产中给定页面的所需布局。

奔跑的幽灵 (Running Wraith)

Wraith is installed as a command line utility so you provide the desired action and path to the YAML file:

Wraith作为命令行实用程序安装，因此您可以提供所需的操作和YAML文件的路径：

wraith capture davidwalshblog.yaml

There are many commands other than capture but capture is the most powerful (creates screenshots, diffs, and a gallery).  Explore the commands to see if Wraith can meet your needs.

除capture还有许多命令，但捕获功能最强大(创建屏幕截图，差异和图库)。 探索命令以查看Wraith是否可以满足您的需求。

Wraith is an awesome tool for going beyond automating screenshot creation to compare screenshots and create diffs for analyzation.  Large organizations like BBC News need tools like this to ensure their incredibly popular sites maintain design integrity; now you have access to the same tools for your website!

Wraith是一个很棒的工具，它不仅可以自动创建屏幕快照，还可以比较屏幕快照并创建差异进行分析。 像BBC新闻这样的大型组织需要这样的工具来确保其受欢迎的网站保持设计的完整性； 现在，您可以访问网站的相同工具！

翻译自: https://davidwalsh.name/wraith