Automating your QA with Visual Regression Testing Example Repository

This repository is an example for my talk Automating your QA with Visual Regression Testing at WordCamp Europe 2019. It uses BackstopJS and Node JS to automate visual QA. The slides for the talk can be found here.

Prerequisites

You will need:

• A local development environment with Node JS/NPM
• Google Chrome
• A live, web-accessible WordPress site
• Another environment of the WordPress site above (e.g. local, staging, etc.)

Getting The Code

Either clone this repository using Git or download the master branch .zip file.

Instructions

After setting up the repository locally (see above) you will need to:

1. Run the command npm install to download dependencies
2. Run the command npm run start
   • Type the number of a site from the list or enter all to test all sites in src/sitesToTest.js
3. Check out the results from the sample test
   • They should open in your browser automatically
4. Edit src/sitesToTest.js
   • This is where the list of sites to test is stored
   • Try changing to one (or more) of your sites
   • BackstopReferenceBaseUrl is your non-production environment (local, staging, etc.) URL
   • BackstopTestUrl is your production site URL
   • Adjust pathsToTest, which is the array of URIs to test for each site
5. Edit src/backstopConfig.js to adjust viewports, delay, hidden selectors, etc.
6. Run the command npm run build.
   • This command needs to be run anytime you edit items in src
7. Run the command npm run start.
   • To test a single site, enter its number from the list, or enter all to test all sites in src/sitesToTest.js

Troubleshooting If you are having issues with the script hanging or BackstopJS taking a long time there may be headless Chrome instances that didn't close properly.

Try pkill -f "(chrome)?(--headless)" on Mac/Linux or Get-CimInstance Win32_Process -Filter "Name = 'chrome.exe' AND CommandLine LIKE '%--headless%'" | %{Stop-Process $_.ProcessId} in Windows PowerShell.