docs: design-document v1.8, dev-docs restructure, VitePress user docs scaffold, backlog update
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,119 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user