Testing Area/Visual regression testing: Difference between revisions
From Mahara Wiki
< Testing Area
m (Dianne.tennent moved page Testing Area/ to Testing Area/Visual regression testing) |
No edit summary |
||
| Line 1: | Line 1: | ||
=== | === Visual Regression Testing with BackstopJS === | ||
#Create a new directory e.g. backstopjsmahara and cd into it | |||
#Run <code>npm i backstopjs</code> | |||
# Create a new directory e.g. backstopjsmahara and cd into it | #Run <code>backstop init</code> | ||
# Run <code>npm i backstopjs</code> | #Get the list of urls from your local site with this formula in the console in devtools: <code>n=$$('a');for(u in n)console.log(n[u].href)</code> | ||
# Run <code>backstop init</code> | #Copy and paste and turn these into a JavaScript array of strings as the value of urls in urls.js | ||
# Get the list of urls from your local site with this formula in the console in devtools: <code>n=$$('a');for(u in n)console.log(n[u].href)</code> | #The urls.js file creates a scenarios.json file - run on cli with <code>node urls.js</code> | ||
# Copy and paste and turn these into a JavaScript array of strings as the value of urls in urls.js | #Copy and paste the json array from the generated file into the backstop.json file as the value for <code>"scenarios": (json array)</code> | ||
# The urls.js file creates a scenarios.json file - run on cli with <code>node urls.js</code> | |||
# Copy and paste the json array from the generated file into the backstop.json file as the value for <code>"scenarios": (json array)</code> | |||
We're going to start by running <code>backstop test</code> - Make sure your site is the state you want to compare it against i.e. the 'correct' state | We're going to start by running <code>backstop test</code> - Make sure your site is the state you want to compare it against i.e. the 'correct' state | ||
When you run <code>backstop test</code> - It will say 'reference url not found' | When you run <code>backstop test</code> - It will say 'reference url not found' - this is ok because we will use this test to create the references | ||
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. | 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. | ||
Revision as of 09:56, 27 Haziran 2022
Visual Regression Testing with BackstopJS
- Create a new directory e.g. backstopjsmahara and cd into it
- Run
npm i backstopjs - Run
backstop init - 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) - Copy and paste and turn these into a JavaScript array of strings as the value of urls in urls.js
- The urls.js file creates a scenarios.json file - run on cli with
node urls.js - 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' - this is ok because we will use this test to create the references
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