feat: add basic axe core asseccibility check

.github/workflows/accessibility-check.yml

@@ -0,0 +1,40 @@
+name: Accessibiliy Check
+
+run-name: Playwright accessibility tests 🚀
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "30 23 * * *"
+jobs:
+  run-stackblitz-templates-tests:
+    runs-on: macos-14
+    env:
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - run: corepack enable
+      - run: pnpm --version
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - name: install
+        run: pnpm install --no-frozen-lockfile --prefer-offline
+
+      - name: Install dependencies with Playwright
+        run: |
+          pnpm playwright install --with-deps
+
+      - name: Run tests
+        run: |
+          cd apps/e2e-tests
+          npx playwright test --grep @accessibility --project=chromium

.github/workflows/failed-job-check.yml

@@ -7,6 +7,7 @@ on:
         Lighthouse CI,
         Stackblitz templates,
         Audit check,
+        Accessibiliy Check,
       ]
     types: [completed]
     branches: [main, prod]
@@ -23,4 +24,4 @@ jobs:
           message_format: ":fire: *${{github.event.workflow_run.name}}* ${{github.event.workflow_run.conclusion}} in <${{github.server_url}}/${{github.repository}}/${{github.event.workflow_run.head_branch}}|${{github.repository}}>"
           footer: "Linked Repo <${{github.server_url}}/${{github.repository}}|${{github.repository}}> | <${{github.server_url}}/${{github.repository}}/actions/runs/${{github.event.workflow_run.id}}|View Failure>"
         env:
-          SLACK_WEBHOOK_URL: ${{ secrets.FAIL_SLACK_URL }}
+          SLACK_WEBHOOK_URL: ${{ secrets.FAIL_SLACK_URL }}

apps/e2e-tests/package.json

@@ -13,6 +13,7 @@
     "@playwright/test": "1.48.2"
   },
   "dependencies": {
+    "@axe-core/playwright": "^4.10.0",
     "@faker-js/faker": "9.0.3",
     "@stackblitz/sdk": "1.11.0",
     "dotenv": "16.4.5",

apps/e2e-tests/tests/accessibilityCheck.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+import { HomePage } from "../page-objects/HomePage";
+import { CategoryPage } from "../page-objects/CategoryPage";
+import { ProductPage } from "../page-objects/ProductPage";
+
+test.describe.only(
+  "Should not have any automatically detectable accessibility issues",
+  { tag: "@accessibility" },
+  () => {
+    let homePage: HomePage;
+    let productPage: ProductPage;
+
+    // Before Hook
+    test.beforeEach(async ({ page }) => {
+      homePage = new HomePage(page);
+      productPage = new ProductPage(page);
+
+      await homePage.visitMainPage();
+    });
+
+    test("Check Homepage accessibility issues", async ({ page }) => {
+      await homePage.visitMainPage();
+      const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+      expect(accessibilityScanResults.violations).toEqual([]);
+    });
+
+    test("Check Category accessibility issues", async ({ page }) => {
+      await homePage.visitMainPage();
+      await homePage.openCategoryPage();
+      const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+      expect(accessibilityScanResults.violations).toEqual([]);
+    });
+
+    test("Check Product Page accessibility issues", async ({ page }) => {
+      await homePage.visitMainPage();
+      await homePage.openCartPage();
+      const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+      expect(accessibilityScanResults.violations).toEqual([]);
+    });
+  },
+);