Slides for a talk about Visual Regression at the EnterJS 2021.
Visuelle RegressionenterJs 2021 - 30.9.2021Rainer Hahnekamphttps://github.com/rainerhahnekamp/visual-regression-enterjs
View Slide
Über mich● Rainer HahnekampANGULARarchitects.io● Trainings and Consultancy● > 20 Years Experience@RainerHahnekamphttps://angulararchitects.io/workshops
Demoanwendung
Headless Browser Tests13 4Frontend Applikation 2
Puppetteer● Inkludiert Headless Browser● Spezielle Jest Konfiguration notwendig● Debug Modus möglich
Puppeteer Demo
Herausforderungen1. Pixelabgleich2. Komponentenisolation
Finde den Unterschied
Komponenten Isolation
Storybook
Frontend Applikation 2 Headless Browser Tests13 4
2 Headless Browser Tests13 4StorybookCode(Komponenten)
Storybook● Rendert Komponenten in Isolation● Frameworkunabhängig● Konfiguration von Komponenten in verschiedenen Ausprägungen● Kann auch als "Komponentengallerie" verwendet werden
Storybook Setup - "Modul" Konfiguration - 1/2export default {title: 'Eternal/HolidayCard',component: HolidayCardComponent,decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule] })]} as Meta;
Storybook Setup - Variation - 2/2export const Default = () => {props: {holiday: {id: 1,title: 'Holiday',description: 'A holiday',imageUrl: 'https://eternal-app.s3.eu-central-1.amazonaws.com/assets/AngkorWatSmall.jpg'}}}
Storybook Demo
Pixelabgleich mitStorybook?
2 Headless Browser Test Specs13 4StorybookApplication Code(Components)
Cloudanbieter
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