Add Chromatic visual testing to our site/E2E tests

[Kira-Pilot]

Chromatic has introduced visual testing for Playwright. We should explore adding this additional layer of user flow bug detection to our current E2E tests within site/e2e.

Requirements:

• Add manual snapshots to each of our E2E tests as appropriate - these can be component snapshots or full page snapshots
• Remove any redundant storybook component tests (if there are any)
• Add a NPM script to our package.json for running Chromatic with the playwright flag
• Update our CI workflow's Chromatic setup such that it also supports Playwright
• Update our FE README to make mention of this new tooling
• Establish baseline speed of our CI run and then compare after we have added this layer - it is important we don't significantly slow down the job considering these tests are run on every PR.
• Understand monthly cost of these additional snapshots as Chromatic's pricing depends on # of snapshots - is this addition going to move the needle significantly?

[aslilac]

good news:

bad news:

it seems like it makes some existing flakes fail almost 100% of the time, so I'm gonna have to spend some time fixing more of them.

[aslilac]

and I still need to comb through and see where adding additional snapshots would provide value

[Kira-Pilot]

@Emyrk can help take a look during the buffer week.
@aslilac to see if we can isolate this one test (or does it affect all 5)

[Kira-Pilot]

Update: A Chromatic layer has been added to our Playwright tests; however, this layer introduced some flakes, which we would like to solve as part of this issue. Keeping it open, but taking out of the upcoming sprint so we can remain heads down on RBAC.

[Kira-Pilot]

@aslilac are we still seeing flakes here?

[aslilac]

oooooh, iirc the flakes causing problems were all of the ones I just fixed. I still have the branch for this change, maybe we can put this on the next sprint.