diff --git a/.gitignore b/.gitignore index cc1b06a..699fba8 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules /blob-report/ /playwright/.cache/ /.idea/ +/playwright-for-uu.iml diff --git a/README.md b/README.md index 3e19563..1fa34bb 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,8 @@ -# Example project for a11y testing +# Example project for a11y testing with Playwright + +Goal is to show how simple it can be to set up accessibility testing for any web page. +With just two targeted tests, we aim to address many of the common a11y pitfalls in web app development also +ensuring that developers prioritize accessibility in every stage of the development process. ## Aria snapshots @@ -8,7 +12,11 @@ To update all snapshot use `npx playwright test --update-snapshots` Read more about aria in [docs](https://playwright.dev/docs/aria-snapshots) -## Prosjektet +## A11y testing + +Run simple Axe analyze to discover any violations + +## Other This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). diff --git a/package-lock.json b/package-lock.json index deb4246..fb6c2fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "playwright-uu-example", "version": "0.1.0", "dependencies": { + "@axe-core/playwright": "^4.10.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -49,6 +50,18 @@ "node": ">=6.0.0" } }, + "node_modules/@axe-core/playwright": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.10.1.tgz", + "integrity": "sha512-EV5t39VV68kuAfMKqb/RL+YjYKhfuGim9rgIaQ6Vntb2HgaCaau0h98Y3WEUqW1+PbdzxDtDNjFAipbtZuBmEA==", + "license": "MPL-2.0", + "dependencies": { + "axe-core": "~4.10.2" + }, + "peerDependencies": { + "playwright-core": ">= 1.0.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.26.2", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", @@ -11480,7 +11493,6 @@ "version": "1.49.0", "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.0.tgz", "integrity": "sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==", - "dev": true, "license": "Apache-2.0", "bin": { "playwright-core": "cli.js" diff --git a/package.json b/package.json index a37a3e4..d35b5e9 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@axe-core/playwright": "^4.10.1", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/playwright.config.js b/playwright.config.js index ff9e3ec..3b9c177 100644 --- a/playwright.config.js +++ b/playwright.config.js @@ -36,16 +36,7 @@ module.exports = defineConfig({ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, - }, - { - name: 'firefox', - use: { ...devices['Desktop Firefox'] }, - }, - - { - name: 'webkit', - use: { ...devices['Desktop Safari'] }, - }, + } /* Test against mobile viewports. */ // { diff --git a/tests/example.spec.js b/tests/example.spec.js index b79dd55..35eaf2a 100644 --- a/tests/example.spec.js +++ b/tests/example.spec.js @@ -1,33 +1,40 @@ // @ts-check -const { test, expect } = require('@playwright/test'); +const {test, expect} = require('@playwright/test'); +const AxeBuilder = require('@axe-core/playwright').default; -test('has title', async ({ page }) => { - await page.goto('http://localhost:3000/'); - await expect(page.locator('#root')).toMatchAriaSnapshot(` - - heading "Eventyrbilder" [level=4] - - textbox "Søk" - - img "Bilde" - - text: Tid - - img "Bilde" - - text: Noe glemt - - img "Bilde" - - text: Et forsøk - - img "Bilde" - - text: Uheldig - - img "Bilde" - - text: Fri - - img "Bilde" - - text: Nytt liv - - img "Bilde" - - text: Evner - - img "Bilde" - - text: Fly - - img "Bilde" - - text: Det første som faller +test.describe('homepage', () => { // 2 + test('has title', async ({page}) => { + await page.goto('http://localhost:3000/'); + await expect(page.locator('#root')).toMatchAriaSnapshot(` + - heading "Eventyrbilder" [level=4] + - textbox "Søk" + - img "Bilde" + - text: Tid + - img "Bilde" + - text: Noe glemt + - img "Bilde" + - text: Et forsøk + - img "Bilde" + - text: Uheldig + - img "Bilde" + - text: Fri + - img "Bilde" + - text: Nytt liv + - img "Bilde" + - text: Evner + - img "Bilde" + - text: Fly + - img "Bilde" + - text: Det første som faller `); -}); + }); + + + test('should not have any automatically detectable accessibility issues', async ({page}) => { + await page.goto('http://localhost:3000/'); -// test('get started link', async ({ page }) => { -// -// -// }); + const accessibilityScanResults = await new AxeBuilder({page}).analyze(); + + expect(accessibilityScanResults.violations).toEqual([]); + }); +});