test: set up Cypress visual diff smoke tests

[contolini]

Adds a global afterEach hook that runs after every test and takes a screenshot of the app's current state. Baseline screenshots are generated with yarn test-visual:baseline and comparisons against the baseline are made with yarn test-visual.

Changes

• Adds cypress-visual-regression library
• Adds a global Cypress afterEach hook

Testing

1. Run yarn test-visual:baseline to generate baseline screenshots.
2. Change some aspect of the app.
3. Run yarn test-visual to take new screenshots and compare against the baselines. It should fail if you changed something and pass if you didn't.

Notes

• I gitignored the entire screenshots directory. Normally you'd only ignore the actual subdirectory and check the base subdirectory into git. Because this is a new thing and all our environments are a little different, I decided to ignore everything for now.

[contolini]

This helper function wasn't working as expected with the Cypress global afterEach hook so I replaced it with Cypress' native request method.

[billhimmelsbach]

Looking good! 🎉 One comment about how the screenshots are taken, but otherwise super excited to use this in some bug squashing!

[contolini]

@billhimmelsbach I updated the afterEach hook to fail the assertion if the screenshot element can't be found on the page, see 3eee6c0. You can test it locally by changing the selectors to gibberish and yarn test-visual:baseline --spec=cypress/e2e/common-features/navigation.spec.js.

[billhimmelsbach]

Thanks for making those changes we chatted about this morning! 🎉 Erroring when a screenshot can't be taken definitely helps. I did find two tests that don't have a visual component, so they always fail when taking the baseline.

Rate Spread API
  - Generates rates from file

Check Digit API
  - Generates Check Digit file

They both just check for 200s, so they both fail. If you want to skip them with a tag, account for them in the snapshot command, or just make a ticket to maybe fix them later if we want to make a CI test, whatever works for ya.

Very excited for this one!🚀

EDIT: I also took a look at running the documentation e2e tests too, and they work well except maybe two things for a future ticket.

1. There's the sticky nav that appears bunch on some of the screenshots that we could probably remove?
2. Sometimes cypress runs out of memory when comparing the images from tests that include infinite scrolls through the fig content (45mb images).

Something for a future ticket, but this was super exciting to use!

EDIT 2: Something for another issue as we get more things working against staging, but when running against staging, tests that are skipped on staging still have screenshot attempts that fail.

EDIT 3: Looks like maybe the maps are tricky since they can be in various states of loading. I guess for a future ticket/pr we could add more wait or do something different for pages that may take a while to load.

From a screenshot as an example:

[contolini]

Thanks @billhimmelsbach! I added 7eedc21 which skips tests that are tagged @no-visual and I created ticket #5537 to track the above changes that need to be made.