BackstopJS Practice

This project was build to serve as a guide using the backstopJS tool which is used to perform visual tests and detect if there were changes at the level of the front-end objects, it has four scenarios which performs the validation of:

• A single object on the page
• Complete capture of the page by removing an object from the page.
• Clicking on a link before the screen capture
• Login by entering username - password and clicking on the login button and then taking the screenshots.

Installation

git clone https://github.com/camhost01/BackstopJS_Practice.git

move to the folder

cd BackstopJS_Practice

backstop_data > bitmaps_reference

Inside this folder you will find the images against which you will contrast the execution of the test cases.

backstop.json

Json with scenarios[] section who has the four test scenarios

package.json

Scripts to run through npm run

clean

Delete folder bitmap_test or bitmap_reference

npm run clean:bitmaps_test

npm run clean:bitmaps_reference

scenarios

Execute all scenarios

npm run scenarios

approve_scenarios

Approve all image reference for the four scenarios

npm run approve_scenarios

If you want to run only one test scenario and not all of them

To run only one test scenario and not all of them just add

npm run logo_test

Execution

npm run scenarios

After execution, the test report is displayed in your browser, showing the results of the comparison at the top of the page

Note

The reference was taken in that way to generate those test results.

Checking the differences

In the report click on the image of "DIFF" section

And move the "Scrubber" to watch the difference between reference and test image