[PRP-238] Streamline Playwright testing and generate linux snapshots on developer machines

[rocketnova]

Ticket

https://wicmtdp.atlassian.net/browse/PRP-238

Changes

What was added, updated, or removed in this PR.

• Change Playwright CI to create and test snapshots in linux by using a docker composition
• Remove newly created Github Action to manually generate linux snapshots (added in #27 )
• Add a dedicated e2e docker container image for testing that runs remix database reset as an entrypoint
• Add a Dockerfile to build and run headless browsers in a linux docker container
• Change e2e docker-compose file to include a database, a remix server, and playwright with browsers
• Remove macOS snapshots
• Change npm scripts for e2e
• Remove html Playwright reporter

Context for reviewers

Testing instructions, background context, more in-depth details of the implementation, and anything else you'd like to call out or ask reviewers. Explain how the changes were verified.

After watching @makaelastephens use the Github Action manual workflow #27 added yesterday, it seemed pretty clear that the process was too onerous. This PR streamlines the e2e process by creating the snapshots on linux.

Note: I had to remove the html test reporter because I couldn't get it to work reliably in the container.

Scenario 1: New work

• You have created a new page and created a new e2e test in /participant/e2e as a <name>.spec.ts file
• You need to create snapshots for your new e2e test!

Scenario 2: Updating existing work that impacts the front end

• You have changed the layout, updated i18n content, or updated an existing page
• You need to update existing e2e snapshots!

Scenario 3: Updating existing work that doesn't impact the front end

• You have made changes that don't change the way the application looks on the frontend
• You do not need to update the e2e snapshots!

Steps to create or update snapshots

1. Make changes to your code and your tests
2. Run npm run e2e:update to create the new snapshots
3. Open the snapshots folder and look at the PNG files and verify that they are correct
4. Run npm run e2e to run your tests
5. Repeat steps 1-4 until you have written tests with adequate coverage and your tests are passing
6. Run npm run e2e:cleanup once all your tests are passing

Testing

Screenshots, GIF demos, code examples or output to help show the changes working as expected. ProTip: you can drag and drop or paste images into this textbox.

1. Test that the e2e tests pass when the correct snapshots are in place: Run npm run e2e
2. Test that the e2e tests fail but create snapshots on failure if there are missing snapshots: Remove the snapshots in /participant/e2e/routes/index.spec.ts-snapshots and run npm run e2e
3. Test that the e2e script can create missing snapshots: Remove the snapshots in /participant/e2e/routes/index.spec.ts-snapshots and run npm run e2e:update
4. Test that the e2e script can do cleanup: npm run e2e:cleanup

[github-actions[bot]]

Chromatic_Build : Link to latest build in Chromatic 🌈 Link to storybook build in Chromatic