@@ -186,12 +186,30 @@ already familiar with Cypress.
186
186
This is a small selection - the Cypress best practices guide, linked above, has more good advice, and we
187
187
should generally try to adhere to them.
188
188
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