README

在Codeception中集成视觉回归测试。

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

示例

工作原理

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

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

要求

VisualCeption运行需要以下组件

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

安装

引导

将模块添加到_bootstrap.php。

include_once "/path/to/module/VisualCeption.php"; include_once "/path/to/module/ImageDeviationException.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不允许全页截图。