@@ -186,12 +186,30 @@ already familiar with Cypress.
186186This is a small selection - the Cypress best practices guide, linked above, has more good advice, and we
187187should generally try to adhere to them.
188188
189- ## Percy Visual Testing
190-
191- We also support visual testing via Percy, this extracts the DOM from Cypress and renders it using custom renderers
192- for Safari, Firefox, Chrome & Edge, allowing us to spot visual regressions before they become release regressions.
193- Each ` cy.percySnapshot() ` call results in 8 screenshots (4 browsers, 2 sizes) this can quickly be exhausted and
194- so we only run Percy testing on ` develop ` and PRs which are labelled ` X-Needs-Percy ` .
195-
196- To record a snapshot use ` cy.percySnapshot() ` , you may have to pass ` percyCSS ` into the 2nd argument to hide certain
197- elements which contain dynamic/generated data to avoid them cause false positives in the Percy screenshot diffs.
189+ ## Screenshot testing with Percy
190+
191+ We also support visual testing via [ Percy] ( https://percy.io ) . Within many of our
192+ Cypress tests you can see lines calling ` cy.percySnapshot() ` . This creates a
193+ screenshot and uses Percy to check whether it has changed from the last time
194+ this test was run.
195+
196+ It can help to pass ` percyCSS ` in as the 2nd argument to ` percySnapshot ` to hide
197+ elements that vary (e.g. timestamps). See the existing code for examples of
198+ this. (Note: it is also possible for team members to mark certain parts of a
199+ screenshot to be ignored. This is done within the Percy UI.)
200+
201+ Percy screenshots are created using custom renderers based on Safari, Firefox,
202+ Chrome and Edge. Each ` percySnapshot ` actually creates 8 screenshots (4
203+ browsers, 2 sizes). Since we have a limited budget for Percy screenshots, by
204+ default we only run Percy once per day against the ` develop ` branch, based on a
205+ nightly build at approximately 04:00 UTC every day. (The schedule is defined in
206+ [ element-web.yaml] ( ../.github/workflows/element-web.yaml ) and the Percy tests are
207+ enabled/disabled in [ cypress.yaml] ( ../.github/workflows/cypress.yaml ) .)
208+
209+ If your pull request makes visual changes, you are encouraged to request Percy
210+ to run by adding the label ` X-Needs-Percy ` to the PR. This will help us find any
211+ visual bugs or validate visual changes at the time they are made, instead of
212+ having to figure it out later after the nightly build. If you don't have
213+ permission to add a label, please ask your reviewer to do it. Note: it's best to
214+ add this label when the change is nearly ready, because the screenshots will be
215+ re-created every time you make a change to your PR.
0 commit comments