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
   

   View Slide

2. Über mich
   ● Rainer Hahnekamp
   ANGULARarchitects.io
   ● Trainings and Consultancy
   ● > 20 Years Experience
   @RainerHahnekamp
   https://angulararchitects.io/workshops
   

   View Slide

3. View Slide

4. Demoanwendung
   

   View Slide

5. Headless Browser Tests
   1
   3 4
   Frontend Applikation 2
   

   View Slide

6. Puppetteer
   ● Inkludiert Headless Browser
   ● Spezielle Jest Konfiguration notwendig
   ● Debug Modus möglich
   

   View Slide

7. Puppeteer Demo
   

   View Slide

8. Herausforderungen
   1. Pixelabgleich
   2. Komponentenisolation
   

   View Slide

9. View Slide

10. Finde den Unterschied
    

    View Slide

11. Finde den Unterschied
    

    View Slide

12. View Slide

13. Komponenten Isolation
    

    View Slide

14. Storybook
    

    View Slide

15. Frontend Applikation 2 Headless Browser Tests
    1
    3 4
    

    View Slide

16. 2 Headless Browser Tests
    1
    3 4
    Storybook
    Code
    (Komponenten)
    

    View Slide

17. Storybook
    ● Rendert Komponenten in Isolation
    ● Frameworkunabhängig
    ● Konfiguration von Komponenten in verschiedenen Ausprägungen
    ● Kann auch als "Komponentengallerie" verwendet werden
    

    View Slide

18. Storybook Setup - "Modul" Konfiguration - 1/2
    export default {
    title: 'Eternal/HolidayCard',
    component: HolidayCardComponent,
    decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule] })]
    } as Meta;
    

    View Slide

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'
    }
    }
    }
    

    View Slide

20. View Slide

21. Storybook Demo
    

    View Slide

22. 2 Headless Browser Tests
    1
    3 4
    Storybook
    Code
    (Komponenten)
    

    View Slide

23. Pixelabgleich mit
    Storybook?
    

    View Slide

24. 2 Headless Browser Test Specs
    1
    3 4
    Storybook
    Application Code
    (Components)
    

    View Slide

25. Cloudanbieter
    

    View Slide

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
    

    View Slide