DjangoCon Europe 2019: Simple visual regression testing
Writeup of the DjangoCon Europe 2019 talk »Simple visual regression testing« by Zelma Gist
Zelma Gist: A full stack engineer who prefers working in the back end. Likes working with kids that wouldn't normally consider computer programming. Especially focuses teaching Python, because it's an accessible language for new engineers.
How do you know CSS changes don't have unexpected side effects? Maybe you just send it over to QA who'll have to catch these issues, but that's hard for them and difficult to catch issues reliably. Also, not everybody has QA.
Requirements
- Compare the same page in two environments
- Find out exactly what is different
- Be able to run it with the existing tests locally
Solution
Start a PhantomJS webdriver on test setup, retrieve the URL, and remove unneeded artifacts in the teardown. Compare images. Done! Define classes that remove changing content such as time/date based data.
Image comparison is actually done by going through the image and overlaying it with a grid. Do pixel comparisons of both images on basis of the grid, and mark the grid parts that are different. In the end, only draw the parts of the grid that are different, which produces a very nice marker of what has changed.
This is going to be open-sourced soon.