yaroslawww/laravel-dusk-reporter

Laravel Dusk 的报告生成器。

3.1.1 2021-11-28 16:16 UTC

This package is auto-updated.

Last update: 2024-09-26 16:13:45 UTC


README

Packagist License Packagist Version Total Downloads Build Status Code Coverage Scrutinizer Code Quality

报告将保存为 .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

致谢

  • Think Studio