Quality Assurance Standards

QA Standards
- Statement of Work (Confluence)
  - Testing activities
  - Responsive Web Design
    - Supported desktop browsers
      Supported tablet devices
      Supported mobile devices
  - Client-side performance
- High-level Requirements for Websites (Confluence)
  - Identity
  - Layout and design
  - Accessibility
  - Navigation
  - Content
  - Links and media
  - Performance
  - Search Engine Optimisation (SEO)
  - Security
Accessibility Standards (Confluence)
- Web Content Accessibility Guidelines (WCAG) 2.1 or higher (minimum Level AA conformance)
- Tools
  - Axe-core
    - Code level (CI/CD): https://www.npmjs.com/package/@axe-core/react
    - E2E level (CI/CD): https://www.npmjs.com/package/@axe-core/puppeteer
    - Chrome plugin: https://www.deque.com/axe/devtools/
  - Siteimprove Accessibility Checker
    - Chrome plugin: https://chrome.google.com/webstore/detail/siteimprove-accessibility/djcglbmbegflehmbfleechkjhmedcopn?hl=en
  - Markup Validaton
    - Code level (CI/CD): https://html-validate.org/
    - Code level (CI/CD): https://www.npmjs.com/package/html-validator
    - Online tool: https://validator.w3.org/
  - Lighthouse
    - Code level (CI/CD): npm: lighthouse
    - Chrome plugin: Introduction to Lighthouse | Chrome for Developers
  - Screen Readers
    - NVDA for Windows 10
    - VoiceOver for MacOS
  - Silktide (@aga?, @nathan? - budget): https://silktide.com/
Performance Standards (Confluence)
- Lighthouse
  - Code level (CI/CD): npm: lighthouse
  - Chrome plugin: Introduction to Lighthouse | Chrome for Developers
- Page Speed Insights: PageSpeed Insights
  WebPageTest: https://www.webpagetest.org/
E2E Tests (preferred one)
- Cypress: Testing Frameworks for Javascript | Write, Run, Debug | Cypress
- Playwright: https://playwright.dev/
Visual Regression (preferred one)
- Plugin for Cypress/Playwright
- BackstopJS: https://github.com/garris/BackstopJS
- Storybook Visual Tests: https://storybook.js.org/docs/react/writing-tests/visual-testing
- Chromatic (@aga?, @nathan? - budget): https://www.chromatic.com/docs/
- Percy (@aga?, @nathan? - budget): https://percy.io/