Testing Area/Visual regression testing

Behat Testing

Testing Area/Behat Testing/Setup

Visual Regression Testing with BackstopJS for Mahara

1. Create a new directory e.g. backstopjsmahara and cd into it
2. Run npm i backstopjs
3. Run backstop init
4. Get the list of urls from your local site with this formula in the console in devtools: n=$$('a');for(u in n)console.log(n[u].href)
5. Copy and paste and turn these into a JavaScript array of strings as the value of urls in urls.js
6. The urls.js file creates a scenarios.json file - run on cli with node urls.js
7. Copy and paste the json array from the generated file into the backstop.json file as the value for "scenarios": (json array)

We're going to start by running backstop test - Make sure your site is the state you want to compare it against i.e. the 'correct' state

When you run backstop test - It will say 'reference url not found'

For some reason the report tries to open in Matrix... But you can view the report results by opening the generated backstop_data/html_report/index.html in a browser. Check that the test shots are in the state you want them to be in.

Then you'll run backstop approve - This will make all the tests become the reference files, so next time you run a test, you will have reference files to compare with

Then you can make your changes or checkout your test patch and run backstop test again and the report will show any visual regressions