README

此包扩展了Dusk，使其能够使用Percy视觉测试平台进行视觉差异测试。

为什么编写视觉测试？

如果您对视觉测试这个概念比较陌生，我们建议您阅读一下Percy博客上的视觉测试和视觉差异。

视觉测试有时也称为视觉回归测试或UI测试，它是一种自动发现和审查软件中感知变化的流程。

视觉测试关注的是用户实际看到和与之交互的内容。

这种测试形式在您想保护UI不受意外更改的情况下非常有用。视觉测试并不是要取代您的Laravel单元/功能/浏览器测试，而是为您提供测试工具箱中的另一个工具。

入门

此包与Laravel Dusk集成。如果您还没有安装，请首先完成Dusk的安装步骤，并确保您可以使用php artisan dusk运行示例测试。

下一步

在percy.io注册一个免费账户并创建您的第一个项目。将您的PERCY_TOKEN添加到您的Laravel .env文件中（如果您使用特定的dusk环境文件，请参阅环境处理）。
```
PERCY_TOKEN=aaabbbcccdddeeefff
```
安装@percy/agent NPM包。
```
npm install --save-dev @percy/agent
```

安装此Composer包。

composer require stechstudio/laravel-visual-testing --dev

如何使用

在您的任何Dusk测试中对浏览器实例调用snapshot()来获取快照。

$browser->visit('/auth/login')
        ->snapshot();

然后像平常一样运行您的测试套件。

php artisan dusk

命名您的快照

默认情况下，您的快照名称将是页面的相对URL（例如，/auth/login）。您也可以在获取快照时传递自己的名称。

$browser->visit('/auth/login')
        ->snapshot('Login page');

快照选项

在获取快照时，您可以传递一个选项数组

widths：一个表示您想获取快照的浏览器宽度的整数数组。
minHeight：一个整数，指定结果的快照的最小高度，以像素为单位。默认为1024px。

$browser->visit('/auth/login')
        ->snapshot('Login page', [ 'widths' => [768, 992, 1200] ]);

禁用快照

如果您想在不获取快照的情况下运行测试，请使用--without-percy命令行选项。

选择基础分支

Percy使用各种策略来确定最佳基础构建以进行比较。有关详细信息，请参阅基础构建选择。

如果您想覆盖并指定自己的基础，您有两个选项

--percy-target-branch：通过分支名称指定基础
--percy-target-commit：通过目标提交SHA（仅当有针对该提交的完成的Percy构建时有效）

基本示例

打开示例测试文件tests/Browser/ExampleTest.php。在visit之后添加对snapshot()的调用，并传递快照的名称。

public function testBasicExample()
{
    $this->browse(function (Browser $browser) {
        $browser->visit('/')
            ->snapshot('basic-example') // <-- add this
            ->assertSee('Laravel');
                
    });
}

现在运行测试

php artisan dusk

如果一切顺利，您应该看到类似的输出

$ php artisan dusk
[percy] created build #1
[percy] percy has started.

[percy] snapshot taken: 'basic-example'
.                                                                   1 / 1 (100%)

Time: 2.37 seconds, Memory: 22.00MB

OK (1 test, 1 assertion)
[percy] stopping percy...
[percy] waiting for 1 snapshots to complete...
[percy] done.
[percy] finalized build #1

现在去检查您的Percy仪表板，您应该看到新的构建。

在这个阶段，它没有东西可以与快照进行比较。但如果你修改 welcome.blade.php 文件并再次运行，你将看到你更改的漂亮的视觉差异。

stechstudio / laravel-visual-testing

维护者

详细信息