feat: Automated accessibility tests (#1113)

paypal · Aug 13, 2024 · 28812ac · 28812ac
1 parent 52fb0c4
commit 28812ac
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 50 deletions.
diff --git a/demo/standalone.html b/demo/standalone.html
@@ -10,16 +10,16 @@
     <body>
         <div class="messages" data-pp-message></div>
         <script>
-            // paypal
-            //     .Messages({
-            //         style: {
-            //             layout: 'text',
-            //             logo: {
-            //                 type: 'none'
-            //             }
-            //         },
-            //     })
-            //     .render('.messages');
+            paypal
+                .Messages({
+                    style: {
+                        layout: 'text',
+                        logo: {
+                            type: 'none'
+                        }
+                    }
+                })
+                .render('.messages');
         </script>
     </body>
 </html>
diff --git a/playwright.config.js b/playwright.config.js
@@ -20,60 +20,78 @@ module.exports = defineConfig({
     retries: process.env.CI ? 2 : 0,
     // retries: 1,
     /* Opt out of parallel tests on CI. */
-    workers: process.env.CI ? 1 : undefined,
+    workers: process.env.CI ? 4 : undefined,
     /* 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. */
-    use: {
-        /* Base URL to use in actions like `await page.goto('/')`. */
-        // baseURL: 'http://127.0.0.1:3000',
-
-        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-        trace: 'on-first-retry'
-    },
-
     /* Configure projects for major browsers */
     projects: [
         {
             name: 'chromium',
-            use: { ...devices['Desktop Chrome'] }
-        },
-
-        {
-            name: 'firefox',
-            use: { ...devices['Desktop Firefox'] }
+            use: {
+                ...devices['Desktop Chrome']
+            }
         },
-
-        {
-            name: 'webkit',
-            use: { ...devices['Desktop Safari'] }
-        }
-
-        /* Test against mobile viewports. */
-        // {
-        //   name: 'Mobile Chrome',
-        //   use: { ...devices['Pixel 5'] },
-        // },
         // {
-        //   name: 'Mobile Safari',
-        //   use: { ...devices['iPhone 12'] },
+        //     name: 'firefox',
+        //     use: {
+        //         ...devices['Desktop Firefox'],
+        //     }
         // },
 
-        /* Test against branded browsers. */
         // {
-        //   name: 'Microsoft Edge',
-        //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+        //     name: 'webkit',
+        //     use: {
+        //         ...devices['Desktop Safari'],
+        //     }
         // },
+
+        /* Test against mobile viewports. */
+        {
+            name: 'Mobile Chrome',
+            use: {
+                ...devices['Pixel 5']
+            }
+        },
         // {
-        //   name: 'Google Chrome',
-        //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+        //     name: 'Mobile Safari',
+        //     use: {
+        //         ...devices['iPhone 12'],
+        //     }
         // },
-    ]
 
-    /* Run your local dev server before starting the tests */
-    // webServer: {
-    //   command: 'npm run start',
-    //   url: 'http://127.0.0.1:3000',
-    //   reuseExistingServer: !process.env.CI,
-    // },
+        /* Test against branded browsers. */
+        {
+            name: 'Microsoft Edge',
+            use: {
+                ...devices['Desktop Edge'],
+                channel: 'msedge'
+            }
+        },
+        {
+            name: 'Google Chrome',
+            use: {
+                ...devices['Desktop Chrome'],
+                channel: 'chrome'
+            }
+        }
+    ],
+    webServer: [
+        {
+            command: './.github/scripts/runServerV2.sh',
+            timeout: 120 * 1000,
+            reuseExistingServer: !process.env.CI
+        }
+    ],
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        baseURL: 'https://127.0.0.1:8080',
+        ignoreHTTPSErrors: true,
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+        bypassCSP: true,
+        launchOptions: {
+            args: ['--disable-web-security']
+        }
+    }
 });
diff --git a/tests/playwright/practice-tests/accessibility.spec.js b/tests/playwright/practice-tests/accessibility.spec.js
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import { AxeBuilder } from '@axe-core/playwright';
+
+test.describe('smart', () => {
+    test('message should not have any automatically detectable accessibility issues', async ({ page }) => {
+        // Navigate to page
+        await page.goto(`/standalone.html?account=DEV_US_MULTI&amount=200&offer=PAY_LATER_SHORT_TERM`);
+        page.waitForLoadState('domcontentloaded');
+
+        const zoidIFrame = await page.$('iframe[name*="__zoid__paypal_message__"]');
+        const messageIframe = await zoidIFrame.contentFrame();
+
+        const button = await messageIframe.$('button');
+        // TODO: 'best-practice' and 'wcag2aa' are resulting in errors, investigate
+        const results = await new AxeBuilder({ page })
+            .include(button)
+            .withTags(['wcag2a', 'wcag21a', 'wcag21aa'])
+            .analyze();
+
+        expect(results.violations).toEqual([]);
+    });
+    test('modal should not have any automatically detectable accessibility issues', async ({ page }) => {
+        // Navigate to page
+        await page.goto(`/snapshot/v2/standalone-modal.html?account=DEV_US_MULTI&amount=59&offer=PAY_LATER_SHORT_TERM`);
+        page.waitForLoadState('domcontentloaded');
+
+        const messageButton = await page.$('button');
+        await messageButton.click();
+
+        const modalIframe = await page.$('iframe[name*="__zoid__paypal_credit_modal"]');
+        const modalFrame = await modalIframe.contentFrame();
+
+        await modalFrame.locator('.content__wrapper').waitFor({
+            state: 'visible'
+        });
+
+        const results = await new AxeBuilder({ page })
+            .include(modalIframe)
+            .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'best-practice'])
+            .analyze();
+        expect(results.violations).toEqual([]);
+    });
+});