☠️ WE DO NOT SPEAK OF THIS ☠️ - Cypress visual snapshot testing

[LilyL0u]

Uses cypress-image-snapshot to take snapshots and compare to a base image.

This is still being worked on, but have a look to see what you think.

I am currently getting failures with images not loading, so I am looking into that. We could also put the tests themselves into a separate file that is run from each page type's tests to reduce duplication, but it depends if and how many will need varations.

Snapshots will only be taken in headless mode, as headed mode has issues with screen size varying and always failing the test. The tests will also only run in local environment (1) Because this is what chromatic did (2) Reduces content variance

To run in headless mode use the command: CYPRESS_APP_ENV=local CYPRESS_SMOKE=true yarn run test:e2e

To also update the snapshots use the command: CYPRESS_APP_ENV=local CYPRESS_SMOKE=true updateSnapshots=true yarn run test:e2e (actually the update snapshots command isn't working >:( I am looking into it now)

I have used it.only on the visual tests so while this is being worked on, only the visual snapshot tests will run. This will be removed before merge.

---

• [x] I have assigned myself to this PR and the corresponding issues
• [x] I have added the cross-team label to this PR if it requires visibility across World Service teams
• [x] I have assigned this PR to the Simorgh project
• [x] (BBC contributors only) This PR follows the repository use guidelines

Testing:

I have not yet run this as a whole test suite and I have not tested it skips the test on test and live yet.

[LilyL0u]

With waits added, the problem with diffs caused by slow image and font loading is solved. Wait may need to increase if this becomes flakey. I will look at adding conditional waits instead of these unconditional ones.

[LilyL0u]

2 runs with no diffs after adding cy.document().its('fonts.status').should('equal', 'loaded'); to all snapshot tests. Will see if this continues.