Author: Rodrigo Silva Ferreira
Last Updated: 16MAR2025
This project automates UI functionality testing and WCAG A11Y compliance for Posit using Playwright and axe-core. It hopes to demonstrate Playwright automation skills using Typescript by performing A11Y and UI testing in the website.
- Ensure keyboard accessibility (Tab navigation).
- Validate form interactions (email validation, dropdown behavior).
- Perform automated WCAG audits with axe-core.
- Capture screenshots of accessibility violations for debugging and saves report.
This test suite ensures accessibility and functional compliance for the Posit website by identifying potential accessibility issues.
| Test | Description | Action | Expected Outcome |
|---|---|---|---|
| Tab Navigation Accessibility Test | Ensures key interactive elements, including "Subscribe" and "Talk to Us" buttons, receive focus when navigating using the Tab key. |
Press Tab key multiple times and check the active element. |
The "Subscribe" or "Talk to Us" button should receive focus at least once. |
| Subscribe Button Navigation | Verifies correct navigation to the subscription management page upon clicking the "Subscribe" button. | Click the "Subscribe" button and wait for navigation. | The page should navigate to https://posit.co/about/subscription-management/. |
| Invalid Email Validation | Ensures that entering an invalid email triggers an error message after clicking outside and refocusing the input field. | Fill the email field with an invalid format, click outside, then click back inside the field. | The message "Must be valid email" should appear below the email input. |
| State Field Visibility | Ensures that the state dropdown appears only when "United States" is selected in the country dropdown. | Select United States, then select other countries one by one. | The state field should be visible only when "United States" is selected and hidden for all other countries. |
| WCAG Audit - Homepage | Runs an automated axe-core scan for accessibility violations on the homepage. | Load the homepage and run an axe-core analysis. | Any detected WCAG violations are logged in a11y-report.txt, and issue-specific screenshots are saved. |
| WCAG Audit - Subscription Page | Runs an automated axe-core scan for accessibility violations on the subscription management page. | Load the subscription page and run an axe-core scan. | Any detected WCAG violations are logged in a11y-report.txt, and issue-specific screenshots are saved. |
| WCAG Audit - Country Dropdown | Runs an automated axe-core scan to verify the accessibility of the country selection dropdown. | Load the subscription page and focus on the country selection field. | No accessibility violations related to dropdown interaction should be found. |
This repository uses GitHub Actions to automatically run UI and A11Y tests every Sunday at 11:59 PM EST.
- Go to the "Actions" tab in the repository.
- Select "Playwright Tests" from the left sidebar.
- Click "Run workflow" to trigger a test run.
- Download artifacts for run, because GitHub Actions will not automatically push the results to the repository.
a) Go to "Actions" → Select a workflow run.
b) Scroll to "Artifacts" and click "a11y-reports".
c) Download the.zipcontaining test reports & screenshots.
npm install
npx playwright install --with-depsnpx playwright test # Runs all tests
npx playwright test --headed # Runs tests in a visible browser (e.g., Chromium)
npx playwright test --grep "Run WCAG audit on homepage" # Runs a specific test based on its nameautomated-a11y-testing
├── a11y-issues/ # A11Y violation screenshots and report
├── test-results/ # Playwright test execution history (i.e., last run)
├── tests/
│ ├── a11y.spec.ts # Playwright test suite
├── axe-results.json # Raw WCAG reports
├── package.json # Node.js dependencies
├── README.md # Documentation