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

使用Docker运行测试

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