Як тестувати фронтенд Laravel-застосунку в браузері: Pest browser tests чи Playwright напряму?

У Laravel-проєкті фронтенд (Blade з Alpine, Livewire, Inertia з Vue чи React) тісно пов'язаний з бекендом. Браузерний тест має перевіряти обидві частини разом - і питання в тому, з якого боку його писати.

Pest browser tests (плагін pestphp/pest-plugin-browser, працює на Playwright):

it('користувач підписується на розсилку', function () {
    $page = visit('/');

    $page->fill('email', 'olena@example.com')
        ->click('Підписатися')
        ->assertSee('Дякуємо за підписку')
        ->assertNoJavaScriptErrors();

    expect(Subscriber::where('email', 'olena@example.com')->exists())->toBeTrue();
});

it('сторінки відкриваються без помилок', function () {
    visit(['/', '/blog', '/jobs'])->assertNoSmoke();
});

• той самий процес і база, що в PHP-тестах: фабрики, RefreshDatabase, actingAs(), Mail::fake() працюють як у звичайних feature-тестах;
• перевірка бази поруч з перевіркою інтерфейсу - без API для підготовки даних;
• smoke-тести (assertNoSmoke, assertNoJavaScriptErrors) дешево ловлять зламані сторінки й помилки в консолі;
• inDarkMode(), мобільні пристрої, знімки екрана для візуальних порівнянь.

Playwright напряму (тести на JavaScript/TypeScript):

• окремий застосунок запущений як справжній сервер (webServer у конфігурації), тести бачать його лише через HTTP;
• підготовка даних - через сидери, спеціальні тестові ендпойнти чи API, що ускладнює ізоляцію;
• повний API Playwright: перехоплення мережі, кілька вкладок і контекстів, трасування, компонентні тести;
• природно для команди, що пише фронтенд на TypeScript, і для SPA, де бекенд - окремий сервіс.

Як обрати:

У CI:

• браузери треба встановити (npx playwright install --with-deps chromium) і закешувати;
• ассети зібрати (npm run build), інакше сторінки без JavaScript і CSS;
• паралельний запуск і шардування для довгих наборів;
• знімки екрана й траси як артефакти збирання - щоб розбиратися з падіннями без локального відтворення.

Розподіл рівнів: браузерні тести - для критичних сценаріїв і smoke-перевірок сторінок, Livewire- і feature-тести - для логіки компонентів і контролерів, Vitest - для складної клієнтської логіки окремо від браузера.

Докладніше в документації: Pest: браузерне тестування