Visual Regression Testing with Cypress

Wei Yang Yao
LINE UIT Team1 Frontend Engineer
https://linedevday.linecorp.com/2020/ja/sessions/1271
https://linedevday.linecorp.com/2020/en/sessions/1271

Transcript

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