README

为Codeception提供视觉回归测试。

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

警告 此模块可能会降低验收测试的执行速度。仅用于视觉回归测试套件，而不是常规端到端测试。

示例

工作原理

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

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

要求

VisualCeption需要以下组件才能运行

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

安装

请确保已安装php-imagick扩展。运行php -m以检查imagick扩展是否启用。

然后将VisualCeption添加到composer.json中

composer require "codeception/visualception:*" --dev

配置

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

示例配置

modules:
    enabled: 
        - WebDriver:
            url: https://.com
            browser: firefox
        - VisualCeption:
            maximumDeviation: 5                                   # deviation in percent
            saveCurrentImageIfFailure: true                       # if true, VisualCeption saves the current
            fullScreenShot: true                                  # fullpage screenshot

• referenceImageDir（默认：'VisualCeption/'）VisualCeption使用“旧”图像来计算偏差。这些图像必须存储在数据目录（tests/_data）或相对于它。
• currentImageDir（默认：'debug/visual/'）当前处理的图像的临时目录。相对于输出目录tests/_output。
• maximumDeviation（默认：0）在比较两个图像时，将计算偏差。如果此偏差大于最大偏差，则测试将失败。
• saveCurrentImageIfFailure（默认：true）当测试失败时，当前图像也将被保存，这样就可以更容易地更改参考图像。图像将带有前缀“current”出现在比较图像旁边。
• report（默认：false）当启用时，将为失败的测试生成包含差异的HTML报告。报告存储在tests/_output/vcresult.html中。
• module（默认：'WebDriver'）负责浏览器交互的模块，默认：WebDriver。
• fullScreenShot（默认：false）Chrome和Firefox的全页截图

用法

VisualCeption非常容易使用。只有两个方法将被添加到$I seeVisualChanges和dontSeeVisualChanges。

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

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

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

• 唯一标识符 对于比较图像，有一个稳定的名称很重要。这是相应的名称。
• elementId 可以仅比较一个特殊的div容器。可以传递元素id。你可以使用CSS选择器。
• excludeElements 可选参数，以字符串或字符串数组的形式排除屏幕截图中的元素。如果你的测试容器中可能有一个动画图像，你可以忽略它。你可以使用CSS选择器。
• $deviation 可选参数，作为浮点数，如果需要建立除配置外的偏差系数。

示例用法

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

如需了解更多有关测试运行的信息，请使用命令行调试选项（-d或--debug）。

HTML报告

在配置中启用报告，并使用精美的HTML输出查看所有失败的视觉测试及其图像差异。

modules:
    enabled: 
        - WebDriver:
            url: https://.com
            browser: firefox
        - VisualCeption:
            report: true
            templateFile: "/report/template2.php" # Absolute path or relative from module dir to report template. Default "/report/template.php"

限制

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

使用Docker运行测试

docker-compose up --abort-on-container-exit