Zurück in den Browser – Das Comeback der Frontend-Tests

Testing-Tools für moderne Frontend-Frameworks rüsten auf – und verlagern ihre Tests wieder in den Browser.

Lange galt: Ohne Browser ist es schneller. Gilt das heute nicht mehr – oder gibt es andere Gründe?

In diesem Talk geht es genau um diese Frage – und um zwei aktuelle Vertreter, die unterschiedliche Wege zeigen: den Vitest Browser Mode und Testronaut.

Transcript

1. Zurück in den Browser Das Comeback der Frontend Tests RainerHahnekamp
2. About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com • Rainer Hahnekamp • ANGULARarchitects.io • NgRx Core Team • Developer / Trainer / Speaker @RainerHahnekamp Open Source Projects NgRx Toolkit Testronaut NgRx Sheriff
3. RainerHahnekamp Spotify - Honeycomb Kent Dodds' Trophy Where we left off last year
4. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests Where we left off last year…
5. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests Angular 21
6. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests Angular 21
7. RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests Angular 21
8. RainerHahnekamp Why Vitest???
9. RainerHahnekamp A little bit of History Browser Browser Emulated Browser (jsdom)
11. RainerHahnekamp Why Browser? ✅ Real Browser Behavior • Rendering • User Events • Timings (Signals) • New Technologies (Shadow DOM, Hydration) ✅ Switch to "UI is the API" ✅ Performant Headless Browsers ✅ Visualization (DX)
12. Coding Time
13. RainerHahnekamp The Case for E2E Component Testing
14. RainerHahnekamp Helmets on!
15. RainerHahnekamp testronaut.dev
16. RainerHahnekamp Playwright Features Recorder Element Highlight Trace Viewer UI Mode Debugging Agents & MCP
17. RainerHahnekamp test('🚀', async ({ page }) => { await page.goto('/') await page.getByRole(...).click(); await expect(...).toBeVisible() });
18. RainerHahnekamp test('🚀', async ({page,runInBrowser})=>{ await runInBrowser(() => { TestBed.createComponent(...); }); await page.getByRole(...).click(); await expect(...).toBeVisible() }); Angular Dev Server
19. RainerHahnekamp test('🚀', async ({page,runInBrowser})=>{ await runInBrowser(() => { TestBed.createComponent(...); }); await page.getByRole(...).click(); await expect(...).toBeVisible() }); TestBed.createComponent(...); Angular Dev Server
20. RainerHahnekamp test('🚀', async ({ page }) => { await page.goto('/landing'); await page.getByRole(...).click(); });
21. RainerHahnekamp import { Spaceship } from './spaceship'; test('🚀', async ({ mount, page }) => { await mount(Spaceship); await page.getByRole(...).click(); });
22. RainerHahnekamp import { Spaceship } from './spaceship'; test('🚀', async ({ runInBrowser, page }) => { await runInBrowser(() => { TestBed.createComponent(Spaceship); }); await page.getByRole(...).click(); });
23. RainerHahnekamp import { Spaceship } from './spaceship'; test('🚀', async ({ runInBrowser, page }) => { await runInBrowser(() => { TestBed.createComponent(Spaceship); }); await page.getByRole(...).click(); });
24. RainerHahnekamp test('🚀', async ({ page }) => { await page.evaluate(() => mountSpaceship()); await page.getByRole(...).click(); }); import { Spaceship } from './spaceship'; globalThis.mountSpaceship = () => { TestBed.createComponent(Spaceship); };
25. RainerHahnekamp
26. RainerHahnekamp Vielen Dank!