Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
About Us
Slide 3
Slide 3 text
Project Manager: India Frontend: Taiwan / Kyoto Backend: Tokyo QA: Fukuoka LINE Developers Console
Slide 4
Slide 4 text
Frontend Techstacks Framework Vue Language JavaScript TypeScript Styling koromo-vue LAICON Stylus
Slide 5
Slide 5 text
The Problem
Slide 6
Slide 6 text
Sometimes we refactor old codes Long Template JSON Common Component X
Slide 7
Slide 7 text
Sometimes we refactor old codes Long CSS Rules UI Components Refined Rules X
Slide 8
Slide 8 text
We don’t want unexpected impact 跑版
Slide 9
Slide 9 text
So we check ALL the pages
Slide 10
Slide 10 text
Time Consuming! How much do I want to do layout checking I’d love to NO
Slide 11
Slide 11 text
Automated Visual Regression Testing
Slide 12
Slide 12 text
E2E Testing
Slide 13
Slide 13 text
E2E Testing
Slide 14
Slide 14 text
Screenshots Comparisons Before After Compare
Slide 15
Slide 15 text
Setting up Cypress
Slide 16
Slide 16 text
Cypress
Slide 17
Slide 17 text
Package Installation $ yarn add --dev cypress cypress-image-snapshot
Slide 18
Slide 18 text
Setup Snapshot Plugin
Slide 19
Slide 19 text
Write testing script
Slide 20
Slide 20 text
Run Cypress (GUI or CLI)
Slide 21
Slide 21 text
The Result
Slide 22
Slide 22 text
Screenshots When running Cypress for the first time. It creates the image snapshot files. These file should be added to the source control. (git)
Slide 23
Slide 23 text
Screenshots After code change, we run Cypress again. If it finds difference between the images, a “diff” image file will be generated.
Slide 24
Slide 24 text
Diff Output Before After Image Diff
Slide 25
Slide 25 text
Diff Output Before After Image Diff
Slide 26
Slide 26 text
Diff Output Before After Image Diff
Slide 27
Slide 27 text
Diff Output Before After Image Diff
Slide 28
Slide 28 text
Diff Output Before After Image Diff
Slide 29
Slide 29 text
Update Screenshots Diff found: › Fix the code or › Update the Screenshot
Slide 30
Slide 30 text
New Issues
Slide 31
Slide 31 text
Threshold Sometimes it’s triggered by a very slight difference. › Add threshold
Slide 32
Slide 32 text
Platform While running in different platforms (Mac / Windows). The rendering font is different › Run Cypress on a CI server instead of a local device.
Slide 33
Slide 33 text
Visual Regression Testing with Cypress With very easy setups we bring much confidence with each commit.
Slide 34
Slide 34 text
Thank you