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

Visual Regression Testing with Cypress

Visual Regression Testing with Cypress

LINE DevDay 2020

November 26, 2020
Tweet

More Decks by LINE DevDay 2020

Other Decks in Technology

Transcript

  1. Project Manager: India
    Frontend: Taiwan / Kyoto
    Backend: Tokyo
    QA: Fukuoka
    LINE
    Developers
    Console

    View full-size slide

  2. Frontend Techstacks
    Framework
    Vue
    Language
    JavaScript
    TypeScript
    Styling
    koromo-vue
    LAICON
    Stylus

    View full-size slide

  3. Sometimes we refactor old codes
    Long Template
    JSON Common Component
    X

    View full-size slide

  4. Sometimes we refactor old codes
    Long CSS Rules
    UI Components Refined Rules
    X

    View full-size slide

  5. We don’t want unexpected impact
    跑版

    View full-size slide

  6. So we check ALL the pages

    View full-size slide

  7. Time Consuming!
    How much do I want
    to do layout checking
    I’d love to
    NO

    View full-size slide

  8. Automated
    Visual Regression Testing

    View full-size slide

  9. Screenshots Comparisons
    Before After
    Compare

    View full-size slide

  10. Setting up Cypress

    View full-size slide

  11. Package Installation
    $ yarn add --dev cypress cypress-image-snapshot

    View full-size slide

  12. Setup Snapshot Plugin

    View full-size slide

  13. Write testing script

    View full-size slide

  14. Run Cypress (GUI or CLI)

    View full-size slide

  15. Screenshots
    When running Cypress
    for the first time. It creates
    the image snapshot files.
    These file should be added
    to the source control. (git)

    View full-size slide

  16. Screenshots
    After code change, we run Cypress again.
    If it finds difference between the images,
    a “diff” image file will be generated.

    View full-size slide

  17. Diff Output
    Before After
    Image Diff

    View full-size slide

  18. Diff Output
    Before After
    Image Diff

    View full-size slide

  19. Diff Output
    Before After
    Image Diff

    View full-size slide

  20. Diff Output
    Before After
    Image Diff

    View full-size slide

  21. Diff Output
    Before After
    Image Diff

    View full-size slide

  22. Update Screenshots
    Diff found:
    › Fix the code
    or
    › Update the Screenshot

    View full-size slide

  23. Threshold
    Sometimes it’s triggered by a very
    slight difference.
    › Add threshold

    View full-size slide

  24. Platform
    While running in different platforms
    (Mac / Windows). The rendering
    font is different
    › Run Cypress on a CI server
    instead of a local device.

    View full-size slide

  25. Visual Regression Testing with Cypress
    With very easy setups
    we bring much confidence with
    each commit.

    View full-size slide