README

VisualCeption 将视觉回归测试集成到 Codeception 中。

此模块可以用来比较网站元素当前的表现与预期。它是基于 Codeception 编写的，并且可以非常容易地集成。

示例

工作原理

VisualCeption 使用 webdriver 的 "截图" 功能、imagick 和 jquery 来比较网站上的视觉元素。这种比较分为五个步骤

1. 使用 webdriver 截图 整个页面。
2. 使用 jquery 计算 被选元素的位置和大小。
3. 使用 imagick 裁剪 元素从整个截图。
4. 比较 元素与一个经过验证的旧截图。如果没有以前的图像，则将当前图像用于未来的比较。由于这种方法，测试必须 运行两次 才能正常工作。
5. 如果偏差太大，将抛出一个被 Codeception 捕获的 异常。

要求

VisualCeption 运行需要以下组件

• Codeception VisualCeption 是 Codeception 的一个模块。它需要一个运行版本的此工具。
• Imagick VisualCeption 使用 php 的 imagick 库来比较两个图像。更多信息请访问 php.net 或安装指南。
• WebDriver 模块 目前，此工具仅与 Codeception 的 webdriver 模块一起使用。

安装

引导

将模块添加到 _bootstrap.php。

include_once "/path/to/module/VisualCeption.php";

配置

要使用 VisualCeption 模块，您必须进行配置。

示例配置

modules:
    enabled: [WebDriver, VisualCeption]
    
VisualCeption:
    referenceImageDir: /home/codeception/referenceImages/ # Path to the reference folder (optional, standard is 
                                                          # <datadir>/VisualCeption/)
    maximumDeviation: 5                                   # deviation in percent
    saveCurrentImageIfFailure: true                       # if true, VisualCeption saves the current
                                                          # image in debug dir (default: false)

• referenceImageDir VisualCeption 使用一个 "旧" 图像来计算偏差。这些图像必须存储在系统中。这是相应的目录。
• maximumDeviation 比较两个图像时，将计算偏差。如果此偏差大于最大偏差，则测试将失败。
• saveCurrentImageIfFailure 当测试失败时，也会保存当前图像，这样更容易用这个图像更改参考图像。图像将与比较图像一起显示，带有前缀 "current"。

使用

VisualCeption 非常容易使用。只有两个方法将被添加到您的 WebGuy 中：`seeVisualChanges` 和 `dontSeeVisualChanges`。

$I->seeVisualChanges( "uniqueIdentifier1", "elementId1" );
$I->dontSeeVisualChanges( "uniqueIdentifier2", "elementId2" );

$I->dontSeeVisualChanges( "uniqueIdentifier3", "elementId3" [, array("excludeElement1", "excludeElement2")] );

• uniqueIdentifier 对于比较图像，有一个稳定的名称非常重要。这是相应的名称。
• elementId 可以仅比较特殊的 div 容器。可以传递元素 ID。 您可以使用 jQuery 中可以使用的所有定位器。
• excludeElements 可选参数，作为字符串或字符串数组，用于从截图排除元素。也许在您的测试容器中有一个动画图像，因此可以忽略它。 您可以使用 jQuery 中可以使用的所有定位器。

示例使用

$I->seeVisualChanges( "subNavigation", "#subNav" );
$I->dontSeeVisualChanges("content", "div.content", array("#intro"));

如果您需要有关测试运行的更多信息，请使用命令行调试选项 (-d)。

限制

VisualCeption 使用 WebDriver 模块来制作屏幕截图。因此，我们无法通过 Google Chrome 进行截图，因为 chromedriver 不允许全页截图。