Faster, more user friendly visual regression testing. Used to tell a developer which components on a website have been affected by code changes, and gives a developer more visibility over a website. Involves three steps:
npm install ocularjs -g
ocularjs init
ocularjs
This creates a folder called ocular
in the directory in which the command is run. Inside this folder will be a data.json
file which is where the settings for the project will be set.
Ocularjs
will open and take screenshots from, make sure all your components are on this page.Ocularjs
will open every viewport and take a screenshot for each component. This object can have a list of named viewports, each with an array containing screen width and screen height in that order.{
"pageUrl": "http://localhost:7000/",
"viewports": {
"smallScreen": [320, 480],
"mediumScreen_landscape": [768, 1024],
"mediumScreen_portrait": [1024, 768],
"largeScreen" : [1920, 1080]
},
"selectorList": {
"containerOne": "[data-container-one]",
"containerTwo": "[data-container-two]"
}
}
This will ask the user a question with three options:
ocular
folder under screenshots/reference
.Reference
. It will then compare the Test
screenshots against the Reference
screenshots and will tell the user which components have changed and what breakpoint they have changed on.Ocularjs
process and will not ask another question. Both of the other options will ask the question again once that process has been completed.