Page Comparison

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)/wiki/spaces/QA/pages/2435153972

• 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): https://www.npmjs.com/package/lighthouse

    • Chrome plugin: https://developers.google.com/web/tools/lighthouse

  • Screen Readers

    • NVDA for Windows 10

    • VoiceOver for MacOS

  • Silktide (@aga?, @nathan? - budget): https://silktide.com/

Performance Standards (Confluence)/wiki/spaces/QA/pages/46019805196

• Lighthouse

  • Code level (CI/CD): https://www.npmjs.com/package/lighthouse

  • Chrome plugin: https://developers.google.com/web/tools/lighthouse

• Page Speed Insights: https://pagespeed.web.dev/

  WebPageTest: https://www.webpagetest.org/

E2E Tests (preferred one)

• Cypress: https://www.cypress.io/

• 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/