$30 off During Our Annual Pro Sale. View Details »

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

    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