Chore/implement playwright axe and axe core

[aasimsyed]

Contributor checklist

• [x] This pull request is on a separate branch and not the main branch

---

Description

This PR removes Cypress and adds Playwright in its place as well as updates the GitHub Actions workfile pr_ci_frontend.yaml for CI testing.

• This assumes that secrets are set up in the project under the dev environment for it to work.

Changes in this PR:

• implemented Playwright with basic tests for Landing Page -- uses a Page Object Model design pattern -- uses scripts to run set in frontend/package.json -- to run against local (assuming server is running): yarn test:local -- to run against prod: yarn test:prod -- to run either using Playwright UI, append --ui on either command
• updated pr_ci_frontend.yaml to include server start/stop and run playwright tests
• updated docker-compose.yml to include health check
• tested Playwright tests using yarn test:local, yarn test:prod, and yarn playwright test and
• tested GitHub Actions for frontend on branch

Related issue

• 829

[github-actions[bot]]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. It'd be great to have you!

Maintainer checklist

• [x] The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

  • The contributor's name and icon in remote commits should be the same as what appears in the PR
  • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

• [x] The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

• [x] The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

[netlify[bot]]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	d86178c0207e890bff0c46dfd81255c653364be4
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/6635528a55f44f0008474c66
😎 Deploy Preview	https://deploy-preview-838--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[aasimsyed]

for this PR to pass, the pr_ci_frontend.yaml and the project's GitHub secrets/environment will need to match.

[andrewtavis]

Hey @aasimsyed 👋 Discussing all of this now with @to-sta and @wkyoshida :)

• @to-sta was saying that as far as secrets are concerned, we don't need to worry about this as we can just use random strings
• @wkyoshida was saying that it'd be best to be running this off of a staging backend at some point, but we all agree that for now this setup is fine so long as we're only running it from time to time
  • Reason for this is a worry about the GitHub Actions allotment
• We can switch this over to something that we trigger explicitly
  • Making a different workflow like e2e.yaml would likely be better (I had said we should include it in the frontend PR workflow, but given the timing it's taking we should make a single one)
  • Running this automatically within the release to deployment workflow would make sense, but we can make another issue for that as we start to develop that workflow

Let me know if you'd like to connect on all of this in the future. After Wednesday would be ideal, and I'm off Thursday and Friday 😊

[aasimsyed]

@andrewtavis please take a new look at this. I have addressed your comments and restored the pr_ci_frontend.yaml from upstream/main, creating a separate pr_ci_playwright_e2e.yaml for Playwright E2E that is not automatically triggered (while it's a WIP). I made the Playwright one with the below trigger, which I think adds a button to manually run on GitHub if it's on the default branch:

  workflow_dispatch:

I also added a couple of ids on LandingSplash.vue for easier locators, if that is OK.

[andrewtavis]

Thanks, @aasimsyed!