Accessibility scan

README.md

@@ -19,6 +19,7 @@ The repository contains playwright automated tests of the online store available
 - **/.github/workflows/pipeline.yml** - File that contains Continuous Integration/Continuous Deployment (CI/CD) configuration.
 - **TEST_CASES.md** - File that contains test cases of the implemented tests.
 - **/test-results** - Folder contains test results obtained using the Playwright Trace Viewer tool. The test results report is saved in zip format and only retained in case of failure. The file is named **"trace.zip"**, to view the report, drop the file on https://trace.playwright.dev/. The folder is also saved in pipeline. By opening workflow run in the artifacts section you can download the result of failed tests from the pipeline run.
+- **/test-results/accessibility** - Folder contains the results of the accessibility scan.
 
 ## How to run tests
 

package.json

@@ -17,6 +17,8 @@
     "allure-playwright": "^2.15.1"
   },
   "dependencies": {
+    "@axe-core/playwright": "^4.9.1",
+    "axe-html-reporter": "^2.2.5",
     "dotenv": "^16.4.5",
     "playwright": "^1.44.1"
   }

page_object/homePage.ts

@@ -4,18 +4,22 @@ export class HomePage {
   readonly page: Page;
   readonly shoppingCartButton: Locator;
   readonly sortByButton: Locator;
-  readonly firstProductOnList: Locator;
+  readonly menuButton: Locator;
   readonly activeSortingOption: Locator;
+  readonly backToProductsButton: Locator;
+  readonly firstProductOnList: Locator;
   private addToCartButton: Locator;
 
   constructor(page: Page) {
     this.page = page;
     this.shoppingCartButton = this.page.locator('[data-test="shopping-cart-link"]');
     this.sortByButton = this.page.locator('[data-test="product-sort-container"]');
+    this.menuButton = this.page.getByRole('button', { name: 'Open Menu' });
     this.activeSortingOption = this.page.locator('[data-test="active-option"]');
+    this.backToProductsButton = this.page.locator('[data-test="back-to-products"]');
     this.firstProductOnList = this.page.locator('[data-test="inventory-item-name"]').first();
   }
-  
+
   async addProduct(productName: "backpack" | "bike-light" | "onesie") {
     this.addToCartButton = this.page.locator(`[data-test="add-to-cart-sauce-labs-${productName}"]`);
     await this.addToCartButton.click();
@@ -25,13 +29,25 @@ export class HomePage {
     await this.shoppingCartButton.click();
   }
 
-  async sortByName(order: "asc" | "desc") { 
+  async openMenu() {
+    await this.menuButton.click();
+  }
+
+  async backToProducts() {
+    await this.backToProductsButton.click();
+  }
+
+  async openFirstProductDetails() {
+    await this.firstProductOnList.click();
+  }
+
+  async sortByName(order: "asc" | "desc") {
     await this.sortByButton.click();
     const optionValue = (order == "asc") ? "az" : "za";
     await this.sortByButton.selectOption(optionValue);
   }
- 
-  async sortByPrice(order: "asc" | "desc") { 
+
+  async sortByPrice(order: "asc" | "desc") {
     await this.sortByButton.click();
     const optionValue = (order == "asc") ? "lohi" : "hilo";
     await this.sortByButton.selectOption(optionValue);

playwright.config.ts

@@ -25,10 +25,12 @@ export default defineConfig({
     {
       name: 'firefox',
       use: devices['Desktop Firefox'],
+      testIgnore: "tests/accessibility.spec.ts"
     },
     {
       name: 'webkit',
       use: devices['Desktop Safari'],
+      testIgnore: "tests/accessibility.spec.ts"
     },
   ],
 });

tests/accessibility.spec.ts

@@ -0,0 +1,58 @@
+import { test } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+import { createHtmlReport } from 'axe-html-reporter';
+import { LoginPage } from '../page_object/loginPage';
+import { HomePage } from '../page_object/homePage'
+import { CustomerCheckoutForm } from '../page_object/customerCheckoutForm'
+import { Cart } from '../page_object/yourCart'
+import { Checkout } from '../page_object/checkoutOverview'
+
+test.describe('Accessibility', () => {
+
+    const orderData: customerData = {
+        firstName: "John",
+        lastName: "Wick",
+        postalCode: "84-200"
+    };
+
+    async function generateReport(page, reportName: string) {
+
+        const accessibilityScanResults = await new AxeBuilder({ page })
+            .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
+            .analyze()
+
+        createHtmlReport({
+            results: accessibilityScanResults,
+            options: {
+                projectKey: reportName,
+                outputDir: 'test-results/accessibility',
+                reportFileName: `${reportName}.html`
+            },
+        });
+    }
+
+    test('Should collect reports from all pages', async ({ page }) => {
+        const loginPage = new LoginPage(page);
+        const homePage = new HomePage(page);
+        const cart = new Cart(page);
+        const customerCheckoutForm = new CustomerCheckoutForm(page);
+        const checkout = new Checkout(page);
+        await page.goto('/');
+        await generateReport(page, "login-page");
+        await loginPage.login(process.env.STANDARD_USER, process.env.PASSWORD);
+        await homePage.openMenu();
+        await generateReport(page, "home-page");
+        await homePage.openFirstProductDetails();
+        await generateReport(page, "home-page-product-details");
+        await homePage.backToProducts();
+        await homePage.addProduct("backpack");
+        await homePage.goToYourCart();
+        await generateReport(page, "cart-page");
+        await cart.goToOrderDetails();
+        await generateReport(page, "customer-checkout-form");
+        await customerCheckoutForm.orderDetails(orderData);
+        await generateReport(page, "checkout-overview");
+        await checkout.confirmOrder();
+        await generateReport(page, "checkout-complete");
+    });
+});