Actions

Difference between revisions of "Testing Area/Visual regression testing"

From Mahara Wiki

< Testing Area
m (Dianne.tennent moved page Testing Area/ to Testing Area/Visual regression testing)
Line 1: Line 1:
==== Behat Testing ====
+
=== Visual Regression Testing with BackstopJS ===
[[Testing Area/Behat Testing/Setup]]
 
<br />
 
  
==== Visual Regression Testing with BackstopJS for Mahara ====
+
#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 June 2022

Visual Regression Testing with BackstopJS

  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' - 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