add simple playwright-axe test

.gitignore

@@ -4,3 +4,4 @@ node_modules
 /blob-report/
 /playwright/.cache/
 /.idea/
+/playwright-for-uu.iml

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).
 
 

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",

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. */
     // {

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([]);
+    });
+});