Automated Visual Testing in Ember

on YouTube ↗26m

" summary

A demo Ember holidays calendar shows automated visual testing using Percy snapshots to send DOM copies for server-side rendering and pixel diffing, with HTTP recordings via polly record/replay and local HAR files to eliminate API flakiness and a mockdate hook to freeze time. Tests run under QUnit with a custom toolbar toggle to re-record fixtures, integrate with GitHub PR checks, and cut false positives so visual regressions are reviewed, accepted, or rejected before merge.

AI-written summary · about

" chapters (10)

1. 0:00Introduction
2. 3:14Visual testing need
3. 8:49Visual testing tools
4. 10:37Setting up Percy
5. 12:45Reliable visual tests
6. 17:46API mocking solution
7. 20:35Test setup improvements
8. 22:18False positives fixed
9. 23:00Integration in workflow
10. 24:46Summary and conclusion

" related talks

• 27mPixel by Pixel: Visual Regression Testing in EmberMike Fotinakis · EmberConf 2018
• 51mAutomating visual testing with PercyMike Fotinakis · Breakpoint 2020
• 42mFunctional and Visual Testing for Web ApplicationsDmitriy Kovalenko · TestCon Europe 2019
• 12mAutomation of GUI testing using visual regression testingAudun Wigum Arbo · NDC Oslo 2023
• 32mContinuous Visual Integration for RailsMike Fotinakis · RailsConf 2016
• 21mTesting against time in JavaScript applicationsJessica Jordan · Assert(js) 2018
• 58mUnit Testing with Screenshots: Breaking the Sound BarrierRoman Dvornov · HolyJS 2017
• 37mFront-end Testing for SkepticsLuke Francl · RailsConf 2013