Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for...
Transcript of Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for...
![Page 1: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/1.jpg)
Cypress Visual Testing
![Page 3: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/3.jpg)
What is visual
testing? Detect and view visual changes
![Page 4: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/4.jpg)
What is visual
testing? Manual comparison process
![Page 5: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/5.jpg)
What is visual
testing?Visual bugs are hard to
catch
![Page 6: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/6.jpg)
What is visual
testing?Color variations?
![Page 7: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/7.jpg)
What is visual
testing? We run unit, integration, and E2E tests to find
issues.
![Page 8: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/8.jpg)
What is visual
testing?Why not visual?
![Page 9: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/9.jpg)
How does it work?
Base imageCurrent image compareVariance/tolerance
![Page 10: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/10.jpg)
What problem does it solve?
![Page 11: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/11.jpg)
Visual change control
![Page 12: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/12.jpg)
Test and validate complex user
interfaces
![Page 13: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/13.jpg)
GraphsDashboards
LayoutsImages
![Page 14: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/14.jpg)
Developers change stuff…
![Page 15: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/15.jpg)
What tools are
available? Cypress Visual Regression
Percy.io
![Page 16: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/16.jpg)
Cypress Visual
Regression● Plugin for Cypress● PixelMatch Library● Captures baseline images● Compares current to baseline● Fails test if images are different● Yugo for visual testing
![Page 17: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/17.jpg)
![Page 18: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/18.jpg)
![Page 19: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/19.jpg)
![Page 20: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/20.jpg)
![Page 21: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/21.jpg)
![Page 22: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/22.jpg)
Cypress Visual Regression
![Page 23: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/23.jpg)
Percy.io● Soup to nuts solution● Stores images on cloud● Integrates with GitHub and PR
process● Approval process flow● Auto approves on specific
branches like master
![Page 24: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/24.jpg)
![Page 25: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/25.jpg)
![Page 26: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/26.jpg)
Percy.io ● Sign up for an account● Create project● Export PERCY_TOKEN
![Page 27: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/27.jpg)
Percy.io
![Page 28: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/28.jpg)
![Page 29: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/29.jpg)
![Page 30: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/30.jpg)
![Page 31: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/31.jpg)
Percy.ioLet’s make some changes
![Page 32: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/32.jpg)
Percy.io
![Page 33: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/33.jpg)
ToolsThat work
![Page 34: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/34.jpg)
Find Me?
![Page 35: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/35.jpg)
Angular Training, Consulting, Experts
![Page 36: Cypress Visual Testing - International Javascript Conference · Visual Regression Plugin for Cypress PixelMatch Library ... Yugo for visual testing. Cypress Visual Regression Soup](https://reader034.fdocuments.us/reader034/viewer/2022042805/5f67c1132002e964a433190a/html5/thumbnails/36.jpg)
THANKS!Questions?@[email protected]