README

此包可以在您的Laravel应用程序中创建两个截图的视觉差异。它适用于常规HTTP测试以及使用Laravel Dusk的测试。幕后，它使用Pixelmatch来比较两个图像。

以下是两个基本示例，说明包的使用方法

使用Laravel Dusk

class ExampleTest extends DuskTestCase
{
    /**
     * A basic browser test example.
     *
     * @return void
     */
    public function testBasicExample()
    {
        $this->browse(function (Browser $browser) {
            $browser->visit('/')
                    ->visualDiff();
        });
    }
}

使用Laravel HTTP测试

class ExampleTest extends TestCase
{
    /**
     * A basic test example.
     *
     * @return void
     */
    public function testBasicExample()
    {
        $this->get('/')
             ->visualDiff();
    }
}

要求

此包需要node 7.6.0或更高版本以及Pixelmatch Node库。

您可以通过NPM在MacOS上安装Pixelmatch

npm install pixelmatch

或者您可以选择全局安装

npm install pixelmatch --global

自定义node和npm二进制文件

根据您的设置，node或npm可能无法直接提供给VisualDiff。如果您需要手动设置这些二进制路径，您可以通过在visualdiff.php配置文件中设置npm_binary和node_binary配置设置来完成此操作。

安装

此包可以通过Composer安装。

composer require beyondcode/laravel-visual-diff

使用

此包将自动将VisualDiffServiceProvider注册到您的Laravel应用程序中。

此包向TestResponse或Browser类添加了一个名为visualDiff的新方法。根据您想如何创建视觉差异，遵循Laravel Dusk集成或HTTP测试集成的使用指南。

visualDiff方法接受一个名称，该名称将用于截图生成。如果您不提供名称，则包将尝试猜测测试名称。如果这对您不起作用，请手动提供名称。

Dusk集成

只需在用于测试的Laravel Dusk Browser实例上调用visualDiff()方法

$this->browse(function (Browser $browser) {
    $browser->visit('/')
            ->visualDiff();
});

这将自动在所有提供的分辨率中创建截图，并在有先前截图的情况下创建差异。

HTTP测试集成

只需在用于测试的TestResponse实例上调用visualDiff()方法

$this->get('/')
     ->visualDiff();

这将自动在所有提供的分辨率中创建截图，并在有先前截图的情况下创建差异。

处理差异

当VisualDiff检测到新截图与先前成功创建的截图之间的差异时，PHPUnit测试将失败。它将告诉您哪个测试导致了视觉差异，以及提供截图差异的文件名。

现在您需要处理这个视觉差异，就像处理代码差异一样。审查更改，然后批准视觉差异，或将 UI 状态还原到成功状态。

您可以通过在 phpunit 命令中添加 -d --update-screenshots 标志来批准新的截图。

> ./vendor/bin/phpunit -d --update-screenshots

OK (1 test, 1 assertion)

指定多个分辨率

为多个分辨率创建差异非常有用——特别是如果您想测试响应式网站和应用。

您可以在 visualdiff.php 配置文件中定义所有可能的分辨率

/**
 * Define all different resolutions that you want to use when performing
 * the regression tests.
 */
'resolutions' => [
    [
        'width' => 1920,
        'height'=> 1080
    ]
]

或者，您可能只想在多个分辨率中创建一个特定的差异。您可以使用 visualDiffForResolutions 方法并提供一个包含要测试的分辨率的数组来完成此操作。

$this->get('/')
     ->visualDiffForResolutions([
        [
            'width' => 1920,
            'height' => 1080
        ],
        [
            'width' => 640,
            'height' => 480
        ],
     ]);

在终端窗口中查看差异结果

如果您使用 iTerm2 作为您的终端，当您运行测试时，您将看到差异的图像表示。

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全

如果您发现任何与安全相关的问题，请通过电子邮件发送到 marcel@beyondco.de，而不是使用问题跟踪器。

鸣谢

许可

MIT 许可证 (MIT)。有关更多信息，请参阅许可文件。

beyondcode / laravel-visual-diff

维护者

详细信息