# 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:

```php
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:

```typescript
// 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.

```yaml
# 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.