Visuelle Regression

Slides for a talk about Visual Regression at the EnterJS 2021.

Transcript

1. Visuelle Regression enterJs 2021 - 30.9.2021 Rainer Hahnekamp https://github.com/rainerhahnekamp/visual-regression-enterjs
2. Über mich • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consultancy • > 20 Years Experience @RainerHahnekamp https://angulararchitects.io/workshops
4. Demoanwendung
5. Headless Browser Tests 1 3 4 Frontend Applikation 2
6. Puppetteer • Inkludiert Headless Browser • Spezielle Jest Konfiguration notwendig • Debug Modus möglich
7. Puppeteer Demo
8. Herausforderungen 1. Pixelabgleich 2. Komponentenisolation
10. Finde den Unterschied
11. Finde den Unterschied
13. Komponenten Isolation
14. Storybook
15. Frontend Applikation 2 Headless Browser Tests 1 3 4
16. 2 Headless Browser Tests 1 3 4 Storybook Code (Komponenten)
17. Storybook • Rendert Komponenten in Isolation • Frameworkunabhängig • Konfiguration von Komponenten in verschiedenen Ausprägungen • Kann auch als "Komponentengallerie" verwendet werden
18. Storybook Setup - "Modul" Konfiguration - 1/2 export default { title: 'Eternal/HolidayCard', component: HolidayCardComponent, decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule] })] } as Meta;
19. Storybook Setup - Variation - 2/2 export const Default = () => { props: { holiday: { id: 1, title: 'Holiday', description: 'A holiday', imageUrl: 'https://eternal-app.s3.eu-central-1.amazonaws.com/assets/AngkorWatSmall.jpg' } } }
21. Storybook Demo
22. 2 Headless Browser Tests 1 3 4 Storybook Code (Komponenten)
23. Pixelabgleich mit Storybook?
24. 2 Headless Browser Test Specs 1 3 4 Storybook Application Code (Components)
25. Cloudanbieter
26. Zusammenfassung • Visuelle Regression als wichtige Testmethode • Spezielle Anforderungen an Infrastruktur ◦ Docker ◦ Cloudanbieter • Storybook für Komponenten Isolation bzw. Widget Gallerie • Testingtools: ◦ Jest & Puppeteer ◦ Playwright ◦ Cypress • Architektur auf Testen ausrichten