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: http://localhost.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]);

• uniqueIdentifier 比较图像时，拥有一个稳定的名称非常重要。这是相应的名称。
• 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: http://localhost.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模块进行截图。因此，我们无法通过Google Chrome进行截图，因为chromedriver不允许全页截图。

使用Docker运行测试

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