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:
            url: https://.com
            browser: firefox
        - 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

• referenceImageDir VisualCeption使用一个“旧”图像来计算偏差。这些图像必须存储在系统中。这是相应的目录。
• maximumDeviation 当比较两个图像时，将计算偏差。如果这个偏差大于最大偏差，测试将失败。
• saveCurrentImageIfFailure 当测试失败时，当前图像也将被保存，这样就可以更容易地使用这个图像更改参考图像。图像将以“current”前缀出现在比较图像旁边。

使用方法

VisualCeption非常容易使用。只有两个方法将被添加到$I中，即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 不允许全页截图。