feat: Accessibility testing across all US SDK messages

.github/workflows/playwright.yml

@@ -19,8 +19,13 @@ jobs:
               run: npm i
             - name: Install Playwright Browsers
               run: npx playwright install --with-deps
-            - name: Run Playwright tests
-              run: npx playwright test
+            - name: Run server
+              run: |
+                  ./.github/scripts/runServerV2.sh
+            - name: Run Playwright Modals
+              run: npx playwright test tests/playwright/tests/sdk/modals
+            - name: Run Playwright Messages
+              run:  npx playwright test tests/playwright/tests/sdk/messages
             - uses: actions/upload-artifact@v4
               if: always()
               with:

playwright.config.js

@@ -11,19 +11,15 @@ const { defineConfig, devices } = require('@playwright/test');
  * @see https://playwright.dev/docs/test-configuration
  */
 module.exports = defineConfig({
-    testDir: './tests/playwright/practice-tests',
-    /* Run tests in files in parallel */
-    fullyParallel: true,
+    testDir: './tests/playwright/tests',
     /* Fail the build on CI if you accidentally left test.only in the source code. */
     forbidOnly: !!process.env.CI,
     /* Retry on CI only */
     retries: process.env.CI ? 2 : 0,
-    // retries: 1,
-    /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 5 : undefined,
+    workers: 80,
     /* Reporter to use. See https://playwright.dev/docs/test-reporters */
     reporter: 'html',
-    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    timeout: 5 * 60000,
     /* Configure projects for major browsers */
     projects: [
         {
@@ -84,11 +80,10 @@ module.exports = defineConfig({
         }
     ],
     use: {
-        /* Base URL to use in actions like `await page.goto('/')`. */
         baseURL: 'https://localhost.paypal.com:8080',
         ignoreHTTPSErrors: true,
-        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
         trace: 'on-first-retry',
-        bypassCSP: true
+        bypassCSP: true,
+        headless: !!process.env.CI || undefined
     }
 });

tests/playwright/pages/base.js

@@ -0,0 +1,34 @@
+// modalsFixture.js
+import { test as base, expect } from '@playwright/test';
+import { AxeBuilder } from '@axe-core/playwright';
+
+// Function to generate URL based on parameters
+export const generateUrl = (baseUrl, { account, amount, offer }) => {
+    let url = `${baseUrl}?account=${account}`;
+    if (amount !== undefined) {
+        url += `&amount=${amount}`;
+    }
+    if (offer !== undefined && offer !== '') {
+        url += `&offer=${offer}`;
+    }
+    return url;
+};
+
+// Extend Playwright base test with custom fixtures
+export const baseTest = base.extend({
+    navigatePage: async ({ page }, use) => {
+        const navigate = async (baseurl, { account, amount, offer }) => {
+            const url = generateUrl(baseurl, { account, amount, offer });
+            await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
+        };
+        await use(navigate);
+    },
+    // Fixture for running Axe accessibility checks
+    runAxeCoreScan: async ({ page }, use) => {
+        const runAxeCoreScan = async (element, tags = []) => {
+            const results = await new AxeBuilder({ page }).include(element).withTags(tags).analyze();
+            expect(results.violations).toEqual([]);
+        };
+        await use(runAxeCoreScan);
+    }
+});

tests/playwright/pages/messages_fixture.js

@@ -0,0 +1,35 @@
+// modalsFixture.js
+import { baseTest } from './base';
+import { selectors } from '../util/selectors';
+
+// Extend Playwright base test with custom fixtures
+export const messageTest = baseTest.extend({
+    navigatePage: async ({ navigatePage }, use) => {
+        const messageUrl = '/snapshot/v2/sdk.html';
+        const navigate = async ({ account, amount, offer }) => {
+            await navigatePage(messageUrl, { account, amount, offer });
+        };
+        await use(navigate);
+    },
+
+    // Fixture for loading the modal
+    loadMessage: async ({ page }, use) => {
+        const loadMessage = async () => {
+            const messageIframe = await page.waitForSelector(selectors.message.messageIframe, {
+                state: 'visible',
+                timeout: 300000
+            });
+            if (!messageIframe) {
+                throw new Error('Message Iframe not found');
+            }
+
+            const messageFrame = await messageIframe.contentFrame();
+            await messageFrame.locator(selectors.message.messageMessaging).waitFor({
+                state: 'visible',
+                timeout: 300000
+            });
+            return messageIframe;
+        };
+        await use(loadMessage);
+    }
+});

tests/playwright/pages/modals_fixture.js

@@ -0,0 +1,40 @@
+// modalsFixture.js
+import { baseTest } from './base';
+import { selectors } from '../util/selectors';
+
+// Extend Playwright base test with custom fixtures
+export const modalTest = baseTest.extend({
+    navigatePage: async ({ navigatePage }, use) => {
+        const modalUrl = '/snapshot/v2/standalone-modal.html';
+        const navigate = async ({ account, amount, offer }) => {
+            await navigatePage(modalUrl, { account, amount, offer });
+        };
+        await use(navigate);
+    },
+
+    // Fixture for loading the modal
+    loadModal: async ({ page }, use) => {
+        const loadModal = async () => {
+            const messageButton = await page.waitForSelector(selectors.standaloneLearnMore, {
+                state: 'visible',
+                timeout: 300000
+            });
+            if (!messageButton) {
+                throw new Error('Button not found');
+            }
+            await messageButton.click();
+
+            const modalIframe = await page.waitForSelector(selectors.modal.iframe, {
+                state: 'attached',
+                timeout: 300000
+            });
+            const modalFrame = await modalIframe.contentFrame();
+            await modalFrame.locator(selectors.modal.contentWrapper).waitFor({
+                state: 'visible',
+                timeout: 300000
+            });
+            return modalIframe;
+        };
+        await use(loadModal);
+    }
+});