SBCQ-58 Frontend Testing

[TaylorFries]

🎯 Summary

SBCQ-58

• .devcontainer/devcontainer.json Added playwright extension to devContainer build
• src/app/page.tsx Modified homepage to showcase playwright testing
• playwright/
  • report/ Not included in git
    • Any reports generated from playwright scrips will be placed here.
    • HTML and json results as files
    • data/ ailed test screenshots and videos will be stored here
  • tests-results/Not included in git
    • .last-run.json info on last run, if everything passed it is pretty sparse
    • folders for any failed tests
  • tests/
    • accessibilityTest.spec.ts
      • Sample test that could be used to loop through a list of URLs to check accessibility
    • customAxeBuilder.ts
      • This builds off of the standard Playwright test service
      • https://github.com/dequelabs/axe-core-npm/tree/develop/packages/playwright
      • https://playwright.dev/docs/accessibility-testing
    • example.spec.ts
      • Foundation of an E2E test
• .gitignore updated and added new testing folders to be ignored
• package.json Renamed a lot of the scripts to better match the other scripts
• playwright.config.ts`
  • https://playwright.dev/docs/test-configuration
  • Updated output directories
    • everything for Playwright will now be created in the Playwright folder
  • Removed xml reporter
  • Commented out Firefox tests
    • This is because I was hitting errors... but it may be a my mac problem.
  • Undecided if the webServer should be commented out or not. I believe it only needs to be uncommented while running playwright tests locally

🧪 Testing

1. I recommend opening files locally to test
   • If you are on Windows these might work in DevContainers but who knows
2. npm i
3. install all browser dependencies locally -> npm run test:e2e-install
   • takes a long time the first time, should be pretty quick after that
4. in one terminal run npm run dev
5. Run playwright scripts in another terminal
   1. `test:e2e"
      • Will run tests through command line
      • Any errors will be displayed in the console
      • Errors will also trigger the full report to be launched on port 9323
        • See info on this report below
   2. `test:e2e-ui"
      • Will open a window where you can watch the tests run
   3. `test:e2e-report"
      • Will open a local port to view the report in a webpage
        • See info on this report below
   4. npm run test:e2e-headed
   • Browsers will open and close automatically running tests against how the browser actually displays the pages

Accessibility Report:

If there were failing accessibility tests they should be able to be seen through the npm run test:e2e-report (if there were failures on the last run), or by adding an accessibility error to the homepage and running npm run test:e2e
Then open the report (should be on localhost:9323), select a failed test, scroll down to Attachments, select accessibility-scan-results.
This will open the full report from Axe-Core

🔰 Checklist

• I have read and agree with the following checklist.

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation where required.
• I have tested my changes to the best of my ability.
• I have consulted with the team if introducing a new dependency.
• My changes generate no new warnings.