initial WIP

e2e/playwright-a11y.config.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-undef */
+// playwright.config.js
+// @ts-check
+
+/** @type {import('@playwright/test').PlaywrightTestConfig<{ theme: string }>} */
+const config = {
+    retries: 0, // Visual tests should never retry due to snapshot comparison errors. Leaving as a shim
+    testDir: 'tests/a11y',
+    testMatch: '**/*.a11y.spec.js', // only run visual tests
+    timeout: 60 * 1000,
+    workers: 1, //Lower stress on Circle CI Agent for Visual tests https://github.com/percy/cli/discussions/1067
+    webServer: {
+        command: 'npm run start:coverage',
+        url: 'http://localhost:8080/#',
+        timeout: 200 * 1000,
+        reuseExistingServer: !process.env.CI
+    },
+    use: {
+        baseURL: 'http://localhost:8080/',
+        headless: true, // this needs to remain headless to avoid visual changes due to GPU rendering in headed browsers
+        ignoreHTTPSErrors: true,
+        screenshot: 'only-on-failure',
+        trace: 'on-first-retry',
+        video: 'off'
+    },
+    projects: [
+        {
+            name: 'chrome',
+            use: {
+                browserName: 'chromium'
+            }
+        },
+        {
+            name: 'chrome-snow-theme', //Runs the same visual tests but with snow-theme enabled
+            use: {
+                browserName: 'chromium',
+                theme: 'snow'
+            }
+        }
+    ],
+    reporter: [
+        ['list'],
+        ['junit', { outputFile: '../test-results/results.xml' }],
+        ['html', {
+            open: 'never',
+            outputFolder: '../html-test-results' //Must be in different location due to https://github.com/microsoft/playwright/issues/12840
+        }]
+    ]
+};
+
+module.exports = config;

e2e/tests/a11y/default.a11y.spec.js

@@ -0,0 +1,129 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+const { test, expect } = require('../../pluginFixtures');
+const { createDomainObjectWithDefaults, expandTreePaneItemByName } = require('../../appActions');
+const { injectAxe, checkA11y, getViolations, reportViolations } = require('axe-playwright');
+const { createHtmlReport } = require('axe-html-reporter');
+const AxeBuilder = require('@axe-core/playwright').default; // 1
+
+test.describe('Visual - Default', () => {
+    test.beforeEach(async ({ page }) => {
+        //Go to baseURL and Hide Tree
+        await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+        await injectAxe(page);
+    });
+
+    test.only('axe-playwright - basic reporting', async ({ page, theme }) => {
+        // Verify that Create button is actionable
+        await expect(page.locator('button:has-text("Create")')).toBeEnabled();
+
+        await checkA11y(page, null, {
+            detailedReport: true,
+            detailedReportOptions: { html: true }
+        });
+    });
+
+    test('axe-playwright - notebook', async ({ page, theme, openmctConfig }) => {
+        const { myItemsFolderName } = openmctConfig;
+
+        // Create Notebook
+        const notebook = await createDomainObjectWithDefaults(page, {
+            type: 'Notebook',
+            name: "Embed Test Notebook"
+        });
+        // Create Overlay Plot
+        await createDomainObjectWithDefaults(page, {
+            type: 'Overlay Plot',
+            name: "Dropped Overlay Plot"
+        });
+
+        await expandTreePaneItemByName(page, myItemsFolderName);
+
+        await page.goto(notebook.url);
+        await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', '.c-notebook__drag-area');
+
+        await percySnapshot(page, `Notebook w/ dropped embed (theme: ${theme})`);
+
+        await checkA11y(page, null, {
+            detailedReport: true,
+            detailedReportOptions: { html: true }
+        });
+    });
+
+    test('axe-playwright - html reporting with wcag2aa rules 2', async ({ page, theme }) => {
+        // Verify that Create button is actionable
+        await expect(page.locator('button:has-text("Create")')).toBeEnabled();
+
+        await checkA11y(page, null,
+            {
+                axeOptions: {
+                    runOnly: {
+                        type: 'tag',
+                        values: ['wcag2aa']
+                    }
+                }
+            },
+            true, 'default',
+            {
+                outputDirPath: './results',
+                outputDir: 'accessibility',
+                reportFileName: 'accessibility-audit.html'
+            }
+        );
+    });
+
+    test('axe-playwright - html reporting with wcag2aa rules', async ({ page, theme }) => {
+        // Verify that Create button is actionable
+        await expect(page.locator('button:has-text("Create")')).toBeEnabled();
+
+        await checkA11y(page, null,
+            {
+                axeOptions: {
+                    runOnly: {
+                        type: 'tag',
+                        values: ['wcag2aa']
+                    }
+                }
+            },
+            true, 'default',
+            { reporter: 'html' }
+        );
+        await createHtmlReport(
+            { results: { violations: args.violations } }
+        );
+
+    });
+
+    test('axeBuilder - should not have any automatically detectable accessibility issues', async ({ page }, testInfo) => {
+
+        const accessibilityScanResults = await new AxeBuilder({ page }).withTags(['wcag2aa']).analyze(); // 4
+
+        await testInfo.attach('accessibility-scan-results', {
+            body: JSON.stringify(accessibilityScanResults, null, 2),
+            contentType: 'application/json'
+        });
+
+        expect(accessibilityScanResults.violations).toEqual([]); // 5
+    });
+
+});

package.json

@@ -51,6 +51,9 @@
     "nyc": "15.1.0",
     "painterro": "1.2.78",
     "playwright-core": "1.29.0",
+    "axe-playwright": "1.2.3",
+    "axe-html-reporter": "2.2.3",
+    "@axe-core/playwright": "4.6.0",
     "plotly.js-basic-dist": "2.17.0",
     "plotly.js-gl2d-dist": "2.17.1",
     "printj": "1.3.1",
@@ -86,6 +89,7 @@
     "test": "karma start",
     "test:debug": "KARMA_DEBUG=true karma start",
     "test:e2e": "npx playwright test",
+    "test:e2e:a11y": "npx playwright test --config=e2e/playwright-a11y.config.js --project=chrome --grep-invert @unstable",
     "test:e2e:couchdb": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @couchdb",
     "test:e2e:stable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep-invert \"@unstable|@couchdb\"",
     "test:e2e:unstable": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @unstable",