Implementing a Visual CSS Testing Framework

Implementing a Visual CSS Testing Framework

JSConf via YouTube Direct link

Huxley Phantom CSS Ghost Story Cactus Needle CSSCritic fighting-layout-bugs sikuli Mogo Quixote

4 of 23

4 of 23

Huxley Phantom CSS Ghost Story Cactus Needle CSSCritic fighting-layout-bugs sikuli Mogo Quixote

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Implementing a Visual CSS Testing Framework

Automatically move to the next video in the Classroom when playback concludes

  1. 1 Intro
  2. 2 using AUTOMATIC screenshot COMPARISON to catch style REGRESSIONS
  3. 3 IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK
  4. 4 Huxley Phantom CSS Ghost Story Cactus Needle CSSCritic fighting-layout-bugs sikuli Mogo Quixote
  5. 5 WHAT DO I WANT?
  6. 6 PROCESS
  7. 7 VISIT
  8. 8 UPLOAD
  9. 9 BUILDING our framework
  10. 10 TESTING with rspec
  11. 11 SCREENSHOT with selenium
  12. 12 DYNAMIC DATA
  13. 13 DIFFING with imagemagick
  14. 14 amazon web services
  15. 15 #{commit-sha}/ #{area-of-site}/ #{page-name} / #{image-type} .png
  16. 16 lalalalal marketing/ index/ diff.png
  17. 17 VIEWING with the internet
  18. 18 THE FUTURE
  19. 19 MEANINGFUL TEST ASSERTIONS
  20. 20 0% DIFFS
  21. 21 CURRENT commit on MASTER
  22. 22 DIFF BETWEEN PREVIOUS commit on MASTER
  23. 23 DIFF BETWEEN CURRENT commit on BRANCH

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.