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

Visual Regression Testing with Cypress

Visual Regression Testing with Cypress

Eebedc2ee7ff95ffb9d9102c6d4a065c?s=128

LINE DevDay 2020

November 26, 2020
Tweet

Transcript

  1. None
  2. About Us

  3. Project Manager: India Frontend: Taiwan / Kyoto Backend: Tokyo QA:

    Fukuoka LINE Developers Console
  4. Frontend Techstacks Framework Vue Language JavaScript TypeScript Styling koromo-vue LAICON

    Stylus
  5. The Problem

  6. Sometimes we refactor old codes Long Template JSON Common Component

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

    Refined Rules X
  8. We don’t want unexpected impact 跑版

  9. So we check ALL the pages

  10. Time Consuming! How much do I want to do layout

    checking I’d love to NO
  11. Automated Visual Regression Testing

  12. E2E Testing

  13. E2E Testing

  14. Screenshots Comparisons Before After Compare

  15. Setting up Cypress

  16. Cypress

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

  18. Setup Snapshot Plugin

  19. Write testing script

  20. Run Cypress (GUI or CLI)

  21. The Result

  22. Screenshots When running Cypress for the first time. It creates

    the image snapshot files. These file should be added to the source control. (git)
  23. Screenshots After code change, we run Cypress again. If it

    finds difference between the images, a “diff” image file will be generated.
  24. Diff Output Before After Image Diff

  25. Diff Output Before After Image Diff

  26. Diff Output Before After Image Diff

  27. Diff Output Before After Image Diff

  28. Diff Output Before After Image Diff

  29. Update Screenshots Diff found: › Fix the code or ›

    Update the Screenshot
  30. New Issues

  31. Threshold Sometimes it’s triggered by a very slight difference. ›

    Add threshold
  32. Platform While running in different platforms (Mac / Windows). The

    rendering font is different › Run Cypress on a CI server instead of a local device.
  33. Visual Regression Testing with Cypress With very easy setups we

    bring much confidence with each commit.
  34. Thank you