crewli/resources/research/De beste E2E-teststack voor Vue 3 + Laravel in 2026.md

De beste E2E-teststack voor Vue 3 + Laravel in 2026

Playwright met Pest 4 vormt de optimale, gratis testcombinatie voor een Vue 3 + Laravel SaaS-applicatie. Playwright domineert inmiddels de markt met 37 miljoen wekelijkse npm-downloads (5× meer dan Cypress), terwijl Laravel zelf Pest 4 — dat Playwright onder de motorkap gebruikt — officieel aanbeveelt boven Laravel Dusk. Voor een startup die snel en goedkoop wil testen, levert deze combinatie cross-browser testing, gratis parallelle uitvoering en diepe Laravel-integratie op zonder een cent aan toollicenties. AI-gestuurde tools zoals Playwright MCP voegen daar gratis testgeneratie aan toe, terwijl commerciële opties pas bij groei relevant worden.

Playwright wint de vergelijking op alle fronten

De strijd tussen Playwright en Cypress is in 2025-2026 beslecht. Playwright passeerde Cypress in juni 2024 qua npm-downloads en het verschil groeit exponentieel. In de State of JS 2024-enquête scoorde Playwright hoger op zowel tevredenheid als gebruiksgroei, en circa 50% van QA-professionals gebruikt nu Playwright tegenover 14% voor Cypress.

De architecturale voordelen zijn structureel. Playwright draait buiten de browser via het DevTools Protocol, waardoor het multi-tab, multi-origin en cross-browser testing (inclusief Safari/WebKit) native ondersteunt. Cypress draait in de browser zelf, wat een uitstekende debugging-ervaring oplevert maar fundamentele beperkingen met zich meebrengt. Qua snelheid toonde een BigBinary-casestudy dat een authenticatieflow van ~2 minuten in Cypress in minder dan 20 seconden draaide in Playwright — een verbetering van 88%.

Criterium	Playwright	Cypress
Wekelijkse downloads	~37M	~7.3M
Cross-browser	Chromium, Firefox, WebKit	Chromium, Firefox, beperkt WebKit
Parallelle uitvoering	Gratis (sharding)	Vereist Cypress Cloud ($67+/maand)
Multi-tab/origin	Volledig ondersteund	Beperkt door same-origin beleid
API-mocking	page.route() — zeer fijnmazig	cy.intercept() — beperkter
Talen	JS, TS, Python, Java, C#	Alleen JS/TS
Kosten	$0	$0 basis, $67-267/maand voor Cloud

Cypress behoudt één niche-voordeel: de time-travel debugger in de browser is ongeëvenaard voor interactieve debugging. Voor teams die developer experience boven alles prioriteren en geen Safari-testing nodig hebben, blijft Cypress verdedigbaar. De officiële Vue.js-documentatie beveelt beide tools aan voor E2E-testing, maar noemt Playwright eerst.

Pest 4 vervangt Laravel Dusk als de standaard

De belangrijkste ontwikkeling voor Laravel-ontwikkelaars is de release van Pest 4 in augustus 2025. Laravel's eigen documentatie bevat nu een expliciete aanbeveling bovenaan de Dusk-pagina: "Pest 4 now includes automated browser testing which offers significant performance and usability improvements compared to Laravel Dusk. For new projects, we recommend using Pest for browser testing."

Pest 4 gebruikt Playwright onder de motorkap maar biedt een PHP-native API. Dit elimineert het grootste pijnpunt van een gescheiden frontend/backend teststack: context-switching tussen PHP en JavaScript. Een Pest 4 browser-test ziet er zo uit:

it('kan een project aanmaken via het dashboard', function () {
    $user = User::factory()->create();

    visit(route('login'))
        ->fill('email', $user->email)
        ->fill('password', 'password')
        ->click('Login')
        ->assertSee('Dashboard')
        ->click('Nieuw Project')
        ->fill('name', 'Mijn SaaS')
        ->click('Aanmaken')
        ->assertSee('Mijn SaaS');

    $this->assertDatabaseHas('projects', ['name' => 'Mijn SaaS']);
    $this->assertAuthenticated();
});

De cruciale voordelen ten opzichte van Dusk zijn: RefreshDatabase werkt gewoon in browser-tests (bij Dusk onmogelijk vanwege het aparte HTTP-proces), multi-browser support via --browser, ingebouwde visuele regressie-testing, test-sharding voor CI, en een unified test suite waar unit-, feature- en browser-tests samenleven. De installatie is simpel: composer require pestphp/pest-plugin-browser --dev gevolgd door npx playwright install.

Laravel Dusk (v8.3.6) blijft onderhouden en werkt met Laravel 11-13, maar is voor nieuwe projecten niet langer de aangeraden keuze. Bestaande Dusk-tests kunnen geleidelijk gemigreerd worden — Pest is gebouwd op PHPUnit, dus alles blijft compatibel.

Vuetify-componenten vereisen specifieke teststrategieën

Het testen van Vuetify-componenten met E2E-tools kent bekende uitdagingen die je vooraf moet kennen. Het meest gedocumenteerde probleem betreft v-select: Vuetify's interne <div class="v-field__input"> onderschept click-events, waardoor Playwright's standaard .click() faalt. Een Vuetify-maintainer bevestigde dit als een architecturaal kenmerk, niet een bug.

De betrouwbaarste workaround is het klikken op het dropdown-icoon in plaats van het select-element zelf:

// Stabiele helper voor Vuetify v-select
async function vuetifySelect(page: Page, testId: string, optionText: string) {
    await page.locator(`[data-testid="${testId}"] i`).click();
    await page.getByRole('option', { name: optionText }).click();
}

Vergelijkbare patronen gelden voor v-dialog (rendered in een overlay buiten de component-tree), v-autocomplete (vereist eerst typen, dan selecteren uit dynamische dropdown) en v-data-table checkboxes (nested child-elements). Vuetify propageert geen data-testid naar interne sub-elementen — een feature request hiervoor staat al jaren open.

Voor een Vuexy-template specifiek geldt: er wordt geen testinfrastructuur meegeleverd. Bouw een Page Object Model voor de standaard Vuexy-layouts (sidebar, app bar, data tables) en voeg systematisch data-testid-attributen toe aan je aangepaste templates. Gebruik data-testid als primaire selectorstrategie, getByRole als secundair, en vermijd class-based selectors volledig — die breken bij Vuetify-updates.

AI-testtools: gratis mogelijkheden versus dure platforms

Het AI-testlandschap in 2026 is sterk gesegmenteerd tussen gratis open-source opties en dure enterprise-platforms. Voor een startup is de Playwright MCP-server (Model Context Protocol) de meest relevante innovatie: een gratis, open-source brug tussen AI-modellen (Claude, GitHub Copilot, Cursor) en Playwright's browser-automatisering. MCP gebruikt de accessibility tree van een pagina om betrouwbaar met UI te interacteren en kan tests genereren vanuit natuurlijke taal.

Tool	Type	Kosten	Geschiktheid startup
Playwright MCP	Open-source AI-brug	Gratis (+ LLM API-kosten)	★★★★★ Uitstekend
BugBug	Low-code recorder	Gratis tier (onbeperkt), Pro €189/maand	★★★★★ Uitstekend
Katalon Studio	All-in-one platform	Gratis tier, Premium €67/seat/maand	★★★★ Goed
Testim (Tricentis)	AI smart locators	Gratis community tier, enterprise op aanvraag	★★★ Matig
Autify	No-code AI	Starter €99/maand	★★★ Matig
mabl	AI-native platform	Vanaf ~€499/maand	★★ Duur
Applitools	Visuele AI	Vanaf ~€969/maand	★★ Duur
QA Wolf	Managed dienst	~€7.500/maand	★ Onbetaalbaar

BugBug verdient speciale aandacht voor startups: de gratis tier biedt onbeperkte tests, onbeperkte lokale runs en onbeperkte gebruikers. De Pro-versie (€189/maand) voegt cloud runs en CI/CD-integratie toe. Het is geoptimaliseerd voor Chromium en mist geavanceerde AI self-healing, maar de eenvoud is een pluspunt.

Voor visuele regressie-testing: begin met Playwright's ingebouwde toHaveScreenshot() (gratis). Wordt dit onvoldoende door false positives, stap dan over naar Percy (5.000 gratis screenshots/maand). Applitools is pas relevant bij complexe UI's op schaal.

GitHub Actions: een betaalbare CI/CD-pipeline

Playwright integreert naadloos met GitHub Actions en biedt gratis parallelle uitvoering via sharding — het grootste kostenvoordeel ten opzichte van Cypress, dat hiervoor een Cloud-abonnement vereist. Een complete pipeline voor Vue 3 + Laravel ziet er als volgt uit:

Fase 1 (parallel): Backend-tests met Pest/PHPUnit + Frontend unit-tests met Vitest. Fase 2 (na succes): E2E browser-tests met Playwright, geshard over 4 runners. Dit fail-fast patroon voorkomt dat dure browser-tests draaien wanneer basis-tests falen.

De kosten zijn minimaal. GitHub biedt 2.000 gratis minuten per maand op het Free-plan (3.000 op Pro). Een typische E2E-suite met 4 shards kost ~€0,16 per run op Linux. Bij 20 runs per werkdag komt dit neer op €28-70 per maand — en voor publieke repositories zijn alle standaard-runners gratis. Gebruik Playwright's Docker-image (mcr.microsoft.com/playwright:v1.58.2-noble) om ~30 seconden browserinstallatie per run te besparen, en cache node_modules tussen runs.

# Playwright sharding in GitHub Actions
strategy:
  matrix:
    shardIndex: [1, 2, 3, 4]
    shardTotal: [4]
steps:
  - run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}

De aanbevolen teststack voor een startup

De optimale, kostenefficiënte testpiramide voor een Vue 3 + Laravel SaaS-applicatie in 2026 bestaat uit drie lagen. 60-70% backend: Pest/PHPUnit feature-tests voor API-endpoints, models, services en policies — met RefreshDatabase en factories. 15-20% frontend: Vitest + Vue Test Utils voor component-tests van Vue 3-componenten, Pinia stores en composables. 10-15% E2E: Pest 4 browser-testing (Playwright) voor kritieke gebruikersflows zoals login, registratie, betaling en onboarding.

Het concrete advies hangt af van je team:

• PHP-first team → Pest 4 met browser-plugin. Eén taal, één test suite, maximale Laravel-integratie. Officieel aanbevolen door Laravel.
• JavaScript-first team → Standalone Playwright met @hyvor/laravel-playwright voor Laravel-integratie (artisan commands, factories, database-operaties vanuit tests).
• Bestaand Dusk-project → Houd werkende Dusk-tests, schrijf nieuwe tests in Pest 4, migreer flakey tests eerst.

Voeg Playwright MCP toe aan je IDE (Cursor, VS Code met Copilot) voor AI-gestuurde testgeneratie vanuit natuurlijke taal — dit is gratis en versnelt het schrijven van tests aanzienlijk. Gebruik data-testid-attributen overal in je Vuetify/Vuexy-templates en bouw herbruikbare helper-functies voor lastige Vuetify-componenten zoals v-select en v-autocomplete.

Totale maandelijkse kosten: €0-189. Playwright, Pest 4, Vitest en GitHub Actions (binnen gratis limiet) kosten niets. Alleen BugBug Pro (optioneel, voor niet-technische teamleden) of extra GitHub Actions-minuten bij intensief gebruik genereren kosten. Geen enkele commerciële AI-tool is noodzakelijk voor een startup — de open-source stack is in 2026 compleet genoeg om professioneel te testen.