imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add visual tests using Percy in Cypress (#8610)

Browse source 
* Add basic Percy tests

* Run Percy in CI

* Fix snapshot timing

* Fix bad selector

* Hide another bit of dynamic text

* Add docs
This commit is contained in:
Michael Telatynski 2022-05-17 16:16:14 +01:00 • committed by GitHub
parent c122c5cd3b
commit d9b7e0721c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 218 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

12
docs/cypress.md
View file

@ -6,6 +6,7 @@ It aims to cover:
* How to run the tests yourself
* How the tests work
* How to write great Cypress tests
* Visual testing
## Running the Tests
Our Cypress tests run automatically as part of our CI along with our other tests,
@ -166,3 +167,14 @@ already familiar with Cypress.
This is a small selection - the Cypress best practices guide, linked above, has more good advice, and we
should generally try to adhere to them.
## Percy Visual Testing
We also support visual testing via Percy, this extracts the DOM from Cypress and renders it using custom renderers
for Safari, Firefox, Chrome & Edge, allowing us to spot visual regressions before they become release regressions.
Right now we run it as part of the standard Pull Request CI automation but due to only having 25k screenshots/month,
and each `cy.percySnapshot()` call results in 8 screenshots (4 browsers, 2 sizes) this could quickly be exhausted and
at that point we would likely run it on a CRON interval or before releases.
To record a snapshot use `cy.percySnapshot()`, you may have to pass `percyCSS` into the 2nd argument to hide certain
elements which contain dynamic/generated data to avoid them cause false positives in the Percy screenshot diffs.