Following meetings with company stakeholders, our Quality Engineering team decided on an automated visual regression testing solution that would compare current screenshots of the various company websites against baseline screenshots.
Our engineers compared different visual testing tools on the market, like Percy (BrowserStack), Sauce Visual (SauceLabs), and wdio-image-comparison-service (WebdriverIO service). For each tool, our team created a series of proof-of-concept implementations customized to the company’s needs. This comparison enabled us to weigh each testing stack’s pros and cons and ultimately choose SauceLabs.
We then crafted a set of visual tests leveraging Sauce Visual. The final solution facilitates regular rapid visual test execution and maintains an excellent set of baseline images.
We configured Travis CI, a continuous integration tool, to trigger automated visual regression builds in a timely manner.
Here are a few key takeaways from our solution:
- Automated visual regression testing: The new solution performs an automated visual comparison of all screens. Quality engineers can validate and approve screenshots by the tool daily.
- Reduces manual testing effort: The new framework completely automates visual testing, reducing heavy resource requirements and preventing discrepancies from going unnoticed.
- Comprehensive analysis of visual changes: The new system captures pixel perfect visual data from all sites. It notes all discrepancies, even the most minute ones.
- Near real-time discrepancy data allows timely response: Visual regressions are identified almost as soon as they are introduced. Daily execution and validations are scheduled so that the baseline is always up-to-date. This allows the company to respond proactively to any issues.
