Designers and developers! Have you ever made a seemingly-simple change to your site’s CSS, only to discover later that it caused display problems in places you didn’t think to look at? Maybe that change to your mobile menu looks fine at 320px, but unexpectedly breaks at 600. How do you verify that the fixes you’re making on one element aren’t breaking anything else - preferably before you upload your changes anywhere?Luckily there are tools you can use to streamline and automate this process. It’s called “visual regression testing,” and we’re implementing it for Open Berkeley. You can take snapshots of your site at different widths and generate a visual representation of just the changes. You can exclude elements that you know are going to change. You can compare two sites, or compare one site against its baseline.Topics include:
- BrowserStack and similar services
- Wraith for local testing
- Selenium for interactive testing
This session is aimed at all designers and developers who work with CSS. You don’t need to use Drupal, Wordpress, or anything in particular to benefit from visual regression testing. Familiarity with command-line tools will be helpful for some of the topics in this session.
