<

Continuously Monitor Visual Regression Tests with CircleCI + BackstopJS (Puppeteer)

CircleCI
BackstopJS
Visual Regression Testing
Puppeteer
Test

We have created a tool to continuously monitor visual changes on web pages by combining CircleCI and BackstopJS.

https://github.com/silverbirder/silver-enigma

Motivation

In operating a web application, system improvements are continuously made. Before releasing these system improvements, it is necessary to pass thorough tests (unit tests, integration tests, E2E tests). However, as the scale of the web application increases, the likelihood of unintentional degradation increases. It is unclear whether the degradation is noticed by "internal pointing out" or "inquiries from end users". Therefore, we wanted a mechanism that could detect unexpected degradation early by regularly monitoring the web application.

The requirements are as follows:

  • Able to schedule execution
    • Can be used for free
  • Easy-to-understand report of visual changes
  • Easy-to-customize monitoring method

From here, the combination of CircleCI + BackstopJS (Puppeteer) was born.

Usage

You can build it in the following steps.

~ $ node -v
v12.9.1
  1. Set the URL you want to monitor in backstop.json
  2. Set the necessary environment variables in CircleCI (refer to README.md)
  3. Run the Job in CircleCI and view the report in Artifacts

We are making requests to the web application using Puppeteer. Therefore, it can handle needs such as "disabling Javascript" and "setting cookies".

Conclusion

With this tool, we have been able to detect changes in web applications from the outside at an early stage. However, please be careful with the scheduling interval for making requests. If you make too many requests, the load on the target web application will increase.

If it was helpful, support me with a ☕!

Share

Related tags

CircleCI
Test