yaroslawww / laravel-dusk-reporter
Laravel Dusk 的报告生成器。
3.1.1
2021-11-28 16:16 UTC
Requires
- php: >=8.0
Requires (Dev)
- friendsofphp/php-cs-fixer: ^3.2
- laravel/dusk: ^6.0
- orchestra/testbench: ^6.23
- phpunit/phpunit: ^9.5
- vimeo/psalm: ^4.12
Suggests
- ext-imagick: Needed to support combined report screen.
README
报告将保存为 .md 文件。
安装
您可以通过 composer 安装此包。
composer require --dev yaroslawww/laravel-dusk-reporter
用法
清除旧数据
在测试时,该包会添加内容文件,因此您需要清除目录才能再次开始测试。
php artisan dusk-reporter:purge # or php artisan dusk-reporter:purge -y # or php artisan dusk-reporter:purge --path="/my/project/report"
1. 在您的 dusk 测试用例中使用 trait TestWithDuskReport。这是可选的,但它将使重命名文件变得容易。
//...
use LaravelDuskReporter\TestWithDuskReport;
abstract class DuskTestCase extends BaseTestCase
{
use TestWithDuskReport;
//...
}
2. 您可以覆盖默认配置
更改存储报告的文件夹,默认情况下包使用 "base_path('storage/laravel-dusk-reporter')"
Reporter::$storeBuildAt = app_path('reports/dusk-report');
或
DUSK_REPORT_PATH=reports/browser-tests php artisan dusk --stop-on-failure
更改存储屏幕截图的文件夹,默认情况下包使用 "$storeBuildAt" 字段
Reporter::$storeScreenshotAt = app_path('reports/dusk-screenshots');
默认情况下,包将链接保存为 .md 文件的相对路径,您可以更改它
Reporter::$screenshotRelativePath = false;
更改元素以适应内容(默认情况下包使用 "body" 标签)
Reporter::$getBodyElementCallback = function ($browser) {
return $browser->driver->findElement(WebDriverBy::id('someId'));
};
3. 创建报告
namespace Tests\Browser\CPD\Marketing;
//...
class HomePageTest extends DuskTestCase {
/** @test */
public function open_by_not_logged_user() {
$REPORT = $this->newDuskReportFile()
->h1( 'Home marketing page' )
->h2( 'Initial data' )
->p( "Open page by not logged user" );
$this->browse( function ( Browser $browser ) use ( $REPORT ) {
$browser->visit( new HomePage() )
// ...
->assertPresent( '@header' )
->assertPresent( '@footer' );
$REPORT->screenshot( $browser, ReportScreenshot::RESIZE_COMBINE )
// or
->screenshotWithVisibleScreen( $browser )
// or
->screenshotWithFitScreen( $browser )
// or
->screenshotWithCombineScreen( $browser )
// or
->screenshotWithCombineScreen( $browser, $suffix = 'additional_screen', $newLine = false);
} );
$REPORT->h3('Conclusion')->p('Test passed.');
}
}
4. 为单个测试文件创建报告
默认情况下,该包旨在为每个测试创建一个报告(因为 phpunit 会为每个测试重新创建结构)。但您可以使用 duskReportFile 方法创建多个测试的一个文件。
abstract class Page extends BasePage
{
use HasDuskReporter;
}
namespace Tests\Browser;
use Database\Seeders\DatabaseDuskCPDSeeder;
use Facebook\WebDriver\Exception\WebDriverException;
use Facebook\WebDriver\WebDriverBy;
use Illuminate\Foundation\Testing\DatabaseMigrations;
use LaravelDuskReporter\Reporter;
use Tests\Browser\Pages\Page;
use Tests\DuskTestCase;
class ReportableDuskTestCase extends DuskTestCase
{
use DatabaseMigrations;
protected function setUp(): void
{
parent::setUp();
Page::withDuskReporter( $this->setUpReportFileForClass() );
}
}
namespace Tests\Browser\Marketing;
class HomePageTest extends ReportableDuskTestCase {
$duskReportClassFilePath = 'Marketing';
/** @test */
public function open_by_not_logged_user() {
$this->browse( function ( Browser $browser ) {
$browser->visit( new HomePage() )
->assertPresent( '@header' )
->assertPresent( '@footer' )
->reportUserSeePage()
->reportAppend( function ( $reporter ) {
$reporter->p( 'My additional note.' );
} );
} );
}
public function testPageHasVideo() {
$this->browse( function ( Browser $browser ) {
$browser->visit( new HomePage() )
->assertPresent( '@marketing-video' );
// $browser->reportUserSeePage();
$this->duskReportFile()->h2( "Open page with video" )
->screenshotWithFitScreen( $browser )
->p('Some note');
} );
}
}
5. 禁用报告
有时您需要取消报告的创建(例如,您想快速测试而不生成报告)。然后只需添加全局变量 DUSK_REPORT_DISABLED=1 或将其添加到 .env.dusk.local 文件中。此外,包还支持仅禁用屏幕截图 DUSK_SCREENSHOTS_DISABLED=1
DUSK_REPORT_DISABLED=1 php artisan dusk tests/Browser/CPD/Marketing/HomePageTest.php --stop-on-failure DUSK_SCREENSHOTS_DISABLED=1 php artisan dusk tests/Browser/CPD/Marketing/HomePageTest.php --stop-on-failure
前端生成
在某些情况下,您需要以 HTML 格式显示报告。通常使用 md->html 编译器很方便。例如,您可以使用 vuepress
# Add vuepress if not exists
yarn add -D vuepress
然后向您的 package.json 添加命令
# package.json
{
...
"scripts": {
...
"testsPreview:build": "cp -r vendor/yaroslawww/laravel-dusk-reporter/assets/.vuepress storage/laravel-dusk-reporter/ && VUEPRESS_BASE='/laravel-dusk-reporter-html/' VUEPRESS_DEST='public/laravel-dusk-reporter-html' vuepress build storage/laravel-dusk-reporter",
...
},
"devDependencies": {
...
"vuepress": "^1.5.4",
...
},
...
}
然后只需运行
yarn testsPreview:build