Visual Testing
Cypress does not check on CSS changes on elements, instead,
I used Visual Testing Tool to achieve this. I integrated Percy Visual Testing in
the Cypress automation as follows:
Firstly, I created a Jira ticket for visual
testing. Then I pulled the develop, our main branch from GitHub using
Visual Studio Code IDE, and created a new local git branch, this would ensure I
have the latest merged code to begin the test.
I run the npm command -
npm install --save-dev
@percy/cypress
To install Percy. Then imported -
import
'@percy/cypress';
in support/commands.js
which will give us access to the Percy snapshot command-
cy.percySnapshot().
Also, percy expects a PERCY_TOKEN to be set, this value can be found on the Percy project in the BrowserStack dashboard.
Set
PERCY_TOKEN=<PERCY_TOKEN VALUE>
I logged into the Browserstack online dashboard and created
a project then copied the PERCY_TOKEN value provided.
Using the following command, I issued PERCY_TOKEN on
the command line:
Set
PERCY_TOKEN=<PERCY_TOKEN VALUE>
Then echo the following command to make sure the value is
set:
Echo %PERCY_TOKEN%
This is part of the security measures on your product to conceal
the PERCY_TOKEN, which is unique to every Percy project.
Once it was confirmed I entered the npm command to run the
visual test.
npm run percy:tests
Percy Global SDK Configuration.
Configure Percy SDK with a global configuration file using Percy YAML file.
The YAML file was placed in the test project
root.
In the above screenshot, I have set up the
widths, iframes and images not to be displayed as those are dynamic elements.
Below are screenshots from Percy –
The above screenshot was a snapshot of the
main navigation headings. I have eliminated images and iframe elements to focus
on the static elements.
The above screenshot was a snapshot of the
subcategories, just in case there is a change in the future, then we can check
with the team before allowing deployment into Production.
Find the part - 5 - Conclusion, here:
Comments
Post a Comment