Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Visuelle Regression

Visuelle Regression

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

Rainer Hahnekamp

September 30, 2021
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

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
  3. None
  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

  9. None
  10. Finde den Unterschied

  11. Finde den Unterschied

  12. None
  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' } } }
  20. None
  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