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状态恢复到成功状态。

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

> ./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作为您首选的终端，当您运行测试时，您将看到差异的图像表示。

变更日志

请参阅变更日志以获取有关最近更改的更多信息。

贡献

请参阅贡献指南以获取详细信息。

安全

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

致谢

许可证

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

qortex / laravel-7-visual-diff

维护者

详细信息