Talks
Speakers
Events
Topics
Sign in
Home
Talks
Speakers
Events
Topics
Leaderboard
Use
Analytics
Sign in
Suggest modification to this talk
Title
Description
by Jessica Dillon 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. Help us caption & translate this video! http://amara.org/v/G8uY/
Date
Summarized using AI?
If this talk's summary was generated by AI, please check this box. A "Summarized using AI" badge will be displayed in the summary tab to indicate that the summary was generated using AI.
Show "Summarized using AI" badge on summary page
Summary
Markdown supported
In this talk at RailsConf 2015, Jessica Dillon discusses the implementation of a visual CSS testing framework that utilizes automatic screenshot comparison to identify style regressions in large-scale CSS codebases. The need for such a framework arises from the challenges posed by manual checks across numerous pages following CSS changes, which can be slow and prone to errors. Key points include: - **Introduction to Bugsnag**: Jessica begins by introducing herself and her role at Bugsnag, a company specializing in error monitoring tools. - **Challenges with CSS testing**: Working with extensive CSS code requires rigorous testing due to potential visual regressions that can arise from even minor code modifications. - **Searching for existing frameworks**: The team experimented with various libraries such as Huxley and Kiot, but they found them lacking in reliability and did not fit their needs. - **Development of a custom framework**: After assessing the shortcomings of existing tools, Jessica decided to develop their own solution. This involved defining requirements for taking screenshots and comparing visual outputs between feature branches and the master production environment. - **Technical implementation**: - They decided on using RSpec for testing, allowing them to keep visual tests separate from main tests to improve build speeds. - Selenium was chosen for browser automation to capture full-page screenshots, while ImageMagick was utilized for comparing screenshots to generate diffs. - The integration with AWS for storing screenshots aimed to make them easily accessible through a custom viewing tool in their admin dashboard. - **Final thoughts and potential improvements**: Jessica concludes with ideas for future enhancements, such as better handling of diffs, automatic traversal of pages, and metrics capture from ImageMagick. Overall, the implementation of this visual testing framework aims to streamline the CSS development process at Bugsnag, allowing developers to confidently manage and refactor CSS without the fear of introducing regressions.
Suggest modifications
Cancel
