Testing Area/Visual regression testing
From Mahara Wiki
Visual Regression Testing with BackstopJS
- Create a new directory e.g. backstopjsmahara and cd into it
npm i backstopjs
- 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),or use a web scraper
- The urls.js file creates a scenarios.json file - run on cli with
- Copy and paste the json array from the generated file into the backstop.json file as the value for
"scenarios": (json array)
- INSERT HERE: Final state of backstop.json file and onReady.js script used in this context
We're going to start by running
backstop reference - This will create reference screenshots for you to compare with when you run your test.
Then you can make your changes or checkout your test patch
Then you will run
backstop test - this will take screenshots and compare them with your reference screenshots
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.
Then you can run
backstop approve - This will make all the tests become the reference files. Pass a
--filter=<image_filename_regex> argument to promote only the test captures matching your scenario filename. The filenames (which by default include scenario and viewport names) are displayed in the visual and cli reports.