README

为 Codeception 设计的视觉回归测试。

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

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

示例

工作原理

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

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

需求

VisualCeption 需要以下组件才能运行

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

安装

确保已安装 php-imagick 扩展。运行 php -m 查看是否启用了 imagick 扩展。

然后将 VisualCeption 添加到 composer.json 中

composer require "paulmskim/module-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]);

• 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: 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模块来制作截图。因此，我们无法通过Google Chrome来截图，因为chromedriver不允许全页截图。

使用Docker运行测试

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