Implementing a visual CSS testing framework

Working with large CSS codebases can be hard. Large-scale refactors, or even just tweaking styles on our more general elements, could end up having unintended consequences on the rest of the site. To catch these problems, we manually check every page on our site, which is a slow and error-prone approach. We need a better way to test our CSS. This talk will walk through how we implemented a visual CSS testing framework using RSpec & Selenium, using automatic screenshot comparison to catch style regressions.

Transcript

1. IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK @jessicard
2. using AUTOMATIC screenshot COMPARISON to catch style REGRESSIONS
3. @jessicard Jessica Dillon
6. (we’re hiring!)
7. bugsnag.com/blog
8. IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK
12. does this EXIST?
13. Huxley Phantom CSS GhostStory Cactus Needle CSSCritic fighting-layout-bugs sikuli Mogo Quixote
14. huxley
15. “Watches you browse, takes screenshots, tells you when they change”
18. quixote
22. Huxley Phantom CSS GhostStory Cactus Needle CSSCritic fighting-layout-bugs sikuli Mogo Quixote
23. WHAT DO I WANT?
25. master feature
26. master feature
30. master
31. master feature
34. PROCESS
35. VISIT 1.
37. SCREENSHOT 2.
41. UPLOAD 3.
42. upload master screenshot
43. download master screenshot upload feature screenshot
44. DIFF 4.
45. master feature
46. master feature
47. master feature
49. VIEW 5.
52. BUILDING our framework
53. TESTING with rspec
54. rspec
59. LOCAL speed
60. CI speed
63. buildkite
65. SCREENSHOT with selenium
66. selenium
67. browserstack
82. DYNAMIC DATA
84. DIFFING with imagemagick
85. imagemagick
94. 1 2
105. VS
111. STORING with aws
122. /#{commit-sha}/ #{area-of-site}/ #{page-name}/ #{image-type}.png
123. /a1a1a1a/ marketing/ index/ diff.png
124. diff.png current.png master.png
125. VIEWING with the internet
133. THE FUTURE
134. MEANINGFUL TEST ASSERTIONS
135. 0% DIFFS
136. VS VS
137. PULL REQUESTS
139. CURRENT commit on BRANCH CURRENT commit on MASTER DIFF BETWEEN
140. master feature
141. PREVIOUS commit on MASTER CURRENT commit on MASTER DIFF BETWEEN
142. master feature
143. CURRENT commit on BRANCH PREVIOUS commit on BRANCH DIFF BETWEEN
144. master feature
146. thanks! @jessicard
147. leanpub.com/ just-enough-unix-command-line @jessicard