AccessibilityTestCaseAdded

Author: akshayp7

README.md

@@ -230,6 +230,11 @@ npm run test:ui --ENV="qa"
 ```
 24. For Extracting text from PDF we are using `pdfjs-dist-es5` library. You can run the test case `PdfToText.test.ts` to verify contents of PDF file. `getPDFText()` method in `lib/WebActions.ts` class is used for extracting text from PDF file.
 
+25. Accessibility test case is written in `tests/accessibility/Axe.test.ts`, to run this test use the command
+```JS
+ npm run test:accessibility --ENV="qa"
+```
+
 ## Reports
 
 - <b>Overall Report</b>

lib/BaseTest.ts

@@ -1,10 +1,11 @@
-import { test as baseTest } from '@playwright/test';
+import { TestInfo, test as baseTest } from '@playwright/test';
 import { LoginPage } from '@pages/LoginPage';
 import { ElementsPage } from '@pages/ElementsPage';
 import { AlertsFrameWindowsPage } from '@pages/AlertsFrameWindowsPage';
 import { WidgetsPage } from '@pages/WidgetsPage';
 import { InteractionsPage } from '@pages/InteractionsPage';
 import { WebActions } from '@lib/WebActions';
+import AxeBuilder from '@axe-core/playwright';
 
 const test = baseTest.extend<{
     webActions: WebActions;
@@ -13,6 +14,8 @@ const test = baseTest.extend<{
     alertsFrameWindowsPage: AlertsFrameWindowsPage;
     widgetsPage: WidgetsPage;
     interactionsPage: InteractionsPage;
+    makeAxeBuilder: AxeBuilder;
+    testInfo: TestInfo;
 }>({
     webActions: async ({ page, context }, use) => {
         await use(new WebActions(page, context));
@@ -31,6 +34,11 @@ const test = baseTest.extend<{
     },
     interactionsPage: async ({ page, context }, use) => {
         await use(new InteractionsPage(page, context));
+    },
+    makeAxeBuilder: async ({ page }, use) => {
+        await use(new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+            .exclude('#commonly-reused-element-with-known-issue'));
     }
 })
 

package-lock.json

@@ -15,7 +15,8 @@
     "test:visual": "npx playwright test visualComparision.test.ts --project=Chrome",
     "test:device": "npx playwright test Emulation.test.ts --project=Device",
     "allureReport": "allure serve",
-    "lighthouse": "node tests/lighthouse/Lighthouse.js"
+    "lighthouse": "node tests/lighthouse/Lighthouse.js",
+    "test:accessibility": "npx playwright test Axe.test.ts --project=Chrome"
   },
   "repository": {
     "type": "git",
@@ -24,6 +25,7 @@
   "author": "Akshay Pai",
   "license": "MIT",
   "dependencies": {
+    "@axe-core/playwright": "^4.8.2",
     "@playwright/test": "^1.40.1",
     "@types/adm-zip": "^0.5.5",
     "@types/crypto-js": "^4.2.1",
@@ -42,4 +44,4 @@
     "typescript": "^5.3.2",
     "winston": "^3.11.0"
   }
-}
+}

package.json

@@ -3,7 +3,7 @@ import { testConfig } from './testConfig';
 const ENV = process.env.npm_config_ENV;
 
 if (!ENV || ![`qa`, `dev`, `qaApi`, `devApi`].includes(ENV)) {
-  console.log(`Please provide a correct environment value like "npx cross-env ENV=qa|dev|qaApi|devApi"`);
+  console.log(`Please provide a correct environment value after command like "--ENV=qa|dev|qaApi|devApi"`);
   process.exit();
 }
 

playwright.config.ts

@@ -0,0 +1,9 @@
+import test from '@lib/BaseTest';
+import { expect } from "@playwright/test";
+
+test(`Verify Page Accessibility`, async ({ page, makeAxeBuilder }) => {
+    await page.goto('https://google.com/');
+    const accessibilityScanResults = await makeAxeBuilder.analyze();
+    // Automatically uses the shared AxeBuilder configuration,
+    expect(accessibilityScanResults.violations).toEqual([]);
+});