chore: bump Playwright to v1.32.3 (#6511)

* chore: bump Playwright to v1.32.1 * test: fix locators, remove unnecessary awaits * chore: bump Playwright in ci workflows * test: better selectors for yAxis configs - fix tests * chore: bump Playwright to 1.32.3 * refactor: ensure openmct starts after plugins install * fix: wait for domcontentloaded on initial nav * test: fix autoscale snapshot test * test: fix `--max-failures` argname typo * test: update old locators * test(fix): add missing await * test: fix typo 😅
2024-12-19 21:27:52 +00:00 · 2023-04-18 15:32:29 -07:00 · 2023-04-18 15:32:29 -07:00 · 968eee6698
commit 968eee6698
parent 43d56a68bb
50 changed files with 100 additions and 99 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -2,7 +2,7 @@ version: 2.1
 executors:
  pw-focal-development:
    docker:
-      - image: mcr.microsoft.com/playwright:v1.29.0-focal
+      - image: mcr.microsoft.com/playwright:v1.32.3-focal
    environment:
      NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
      PERCY_POSTINSTALL_BROWSER: 'true' # Needed to store the percy browser in cache deps
--- a/.github/workflows/e2e-couchdb.yml
+++ b/.github/workflows/e2e-couchdb.yml
@ -14,7 +14,7 @@ jobs:
      - uses: actions/setup-node@v3
        with:
          node-version: 'lts/gallium'
-      - run: npx playwright@1.29.0 install
+      - run: npx playwright@1.32.3 install
      - run: npm install
      - name: Start CouchDB Docker Container and Init with Setup Scripts
        run : |
--- a/.github/workflows/e2e-pr.yml
+++ b/.github/workflows/e2e-pr.yml
@ -29,10 +29,10 @@ jobs:
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
-      - run: npx playwright@1.29.0 install
+      - run: npx playwright@1.32.3 install
      - run: npx playwright install chrome-beta
      - run: npm install
-      - run: npm run test:e2e:full -- --maxFailures=40
+      - run: npm run test:e2e:full -- --max-failures=40
      - run: npm run cov:e2e:report || true
      - shell: bash
        env:
--- a/e2e/playwright-ci.config.js
+++ b/e2e/playwright-ci.config.js
@ -9,7 +9,7 @@ const NUM_WORKERS = 2;

 /** @type {import('@playwright/test').PlaywrightTestConfig} */
 const config = {
-    retries: 2, //Retries 2 times for a total of 3 runs. When running sharded and with maxFailures = 5, this should ensure that flake is managed without failing the full suite
+    retries: 2, //Retries 2 times for a total of 3 runs. When running sharded and with max-failures=5, this should ensure that flake is managed without failing the full suite
    testDir: 'tests',
    testIgnore: '**/*.perf.spec.js', //Ignore performance tests and define in playwright-perfromance.config.js
    timeout: 60 * 1000,
--- a/e2e/tests/framework/appActions.e2e.spec.js
+++ b/e2e/tests/framework/appActions.e2e.spec.js
@ -25,7 +25,7 @@ const { createDomainObjectWithDefaults, createNotification, expandEntireTree } =

 test.describe('AppActions', () => {
    test('createDomainObjectsWithDefaults', async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        const e2eFolder = await createDomainObjectWithDefaults(page, {
            type: 'Folder',
@ -86,7 +86,7 @@ test.describe('AppActions', () => {
        });
    });
    test("createNotification", async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        await createNotification(page, {
            message: 'Test info notification',
            severity: 'info'
@ -110,7 +110,7 @@ test.describe('AppActions', () => {
        await page.locator('[aria-label="Dismiss"]').click();
    });
    test('expandEntireTree', async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        const rootFolder = await createDomainObjectWithDefaults(page, {
            type: 'Folder'
--- a/e2e/tests/framework/baseFixtures.e2e.spec.js
+++ b/e2e/tests/framework/baseFixtures.e2e.spec.js
@ -32,7 +32,7 @@ test.describe('baseFixtures tests', () => {
    test('Verify that tests fail if console.error is thrown', async ({ page }) => {
        test.fail();
        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        //Verify that ../fixtures.js detects console log errors
        await Promise.all([
@ -43,7 +43,7 @@ test.describe('baseFixtures tests', () => {
    });
    test('Verify that tests pass if console.warn is thrown', async ({ page }) => {
        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        //Verify that ../fixtures.js detects console log errors
        await Promise.all([
--- a/e2e/tests/framework/exampleTemplate.e2e.spec.js
+++ b/e2e/tests/framework/exampleTemplate.e2e.spec.js
@ -63,7 +63,7 @@ test.describe('Renaming Timer Object', () => {
    let timer;
    test.beforeEach(async ({ page }) => {
        // Open a browser, navigate to the main page, and wait until all network events to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // We provide some helper functions in appActions like `createDomainObjectWithDefaults()`.
        // This example will create a Timer object with default properties, under the root folder:
--- a/e2e/tests/framework/generateVisualTestData.e2e.spec.js
+++ b/e2e/tests/framework/generateVisualTestData.e2e.spec.js
@ -36,7 +36,7 @@ const { test, expect } = require('../../pluginFixtures.js');

 test('Generate Visual Test Data @localStorage', async ({ page, context }) => {
    //Go to baseURL
-    await page.goto('./', { waitUntil: 'networkidle' });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });
    const overlayPlot = await createDomainObjectWithDefaults(page, { type: 'Overlay Plot' });

    // click create button
--- a/e2e/tests/framework/testData.e2e.spec.js
+++ b/e2e/tests/framework/testData.e2e.spec.js
@ -30,7 +30,7 @@ test.describe('recycled_local_storage @localStorage', () => {
    //We may want to do some additional level of verification of this file. For now, we just verify that it exists and can be used in a test suite.
    test.use({ storageState: './e2e/test-data/recycled_local_storage.json' });
    test('Can use recycled_local_storage file', async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
    });
 });

--- a/e2e/tests/functional/branding.e2e.spec.js
+++ b/e2e/tests/functional/branding.e2e.spec.js
@ -29,7 +29,7 @@ const { test, expect } = require('../../baseFixtures.js');
 test.describe('Branding tests', () => {
    test('About Modal launches with basic branding properties', async ({ page }) => {
        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Click About button
        await page.click('.l-shell__app-logo');
@ -47,7 +47,7 @@ test.describe('Branding tests', () => {
    });
    test('Verify Links in About Modal @2p', async ({ page }) => {
        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Click About button
        await page.click('.l-shell__app-logo');
--- a/e2e/tests/functional/couchdb.e2e.spec.js
+++ b/e2e/tests/functional/couchdb.e2e.spec.js
@ -100,7 +100,7 @@ test.describe("CouchDB initialization with mocked responses @couchdb", () => {
            && req.method() === 'GET');

        // Go to baseURL.
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Wait for both requests to resolve.
        await Promise.all([
--- a/e2e/tests/functional/example/eventGenerator.e2e.spec.js
+++ b/e2e/tests/functional/example/eventGenerator.e2e.spec.js
@ -30,7 +30,7 @@ const { createDomainObjectWithDefaults } = require('../../../appActions');
 test.describe('Example Event Generator CRUD Operations', () => {
    test('Can create a Test Event Generator and it results in the table View', async ({ page }) => {
        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        //Create a name for the object
        const newObjectName = 'Test Event Generator';
--- a/e2e/tests/functional/example/generator/sineWaveLimitProvider.e2e.spec.js
+++ b/e2e/tests/functional/example/generator/sineWaveLimitProvider.e2e.spec.js
@ -32,7 +32,7 @@ test.describe('Sine Wave Generator', () => {
        test.skip(browserName === 'firefox', 'This test needs to be updated to work with firefox');

        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        //Click the Create button
        await page.click('button:has-text("Create")');
--- a/e2e/tests/functional/forms.e2e.spec.js
+++ b/e2e/tests/functional/forms.e2e.spec.js
@ -36,7 +36,7 @@ const imageFilePath = 'e2e/test-data/rick.jpg';
 test.describe('Form Validation Behavior', () => {
    test('Required Field indicators appear if title is empty and can be corrected', async ({ page }) => {
        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        await page.click('button:has-text("Create")');
        await page.click(':nth-match(:text("Folder"), 2)');
@ -77,7 +77,7 @@ test.describe('Form File Input Behavior', () => {
    });

    test('Can select a JSON file type', async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        await page.getByRole('button', { name: ' Create ' }).click();
        await page.getByRole('menuitem', { name: 'JSON File Input Object' }).click();
@ -91,7 +91,7 @@ test.describe('Form File Input Behavior', () => {
    });

    test('Can select an image file type', async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        await page.getByRole('button', { name: ' Create ' }).click();
        await page.getByRole('menuitem', { name: 'Image File Input Object' }).click();
@ -117,7 +117,7 @@ test.describe('Persistence operations @addInit', () => {
            type: 'issue',
            description: 'https://github.com/nasa/openmct/issues/4323'
        });
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        await page.click('button:has-text("Create")');

@ -138,7 +138,7 @@ test.describe('Persistence operations @couchdb', () => {
            description: 'https://github.com/nasa/openmct/issues/5616'
        });

-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create a new 'Clock' object with default settings
        const clock = await createDomainObjectWithDefaults(page, {
--- a/e2e/tests/functional/menu.e2e.spec.js
+++ b/e2e/tests/functional/menu.e2e.spec.js
@ -36,7 +36,7 @@ test.describe('Persistence operations @addInit', () => {
    });

    test('Non-persistable objects should not show persistence related actions', async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        await page.locator('text=Persistence Testing').first().click({
            button: 'right'
--- a/e2e/tests/functional/notification.e2e.spec.js
+++ b/e2e/tests/functional/notification.e2e.spec.js
@ -35,7 +35,7 @@ test.describe('Notifications List', () => {
        });

        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create an error notification with the message "Error message"
        await createNotification(page, {
@ -80,7 +80,7 @@ test.describe('Notification Overlay', () => {
        });

        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create a new Display Layout object
        await createDomainObjectWithDefaults(page, { type: 'Display Layout' });
--- a/e2e/tests/functional/planning/ganttChart.e2e.spec.js
+++ b/e2e/tests/functional/planning/ganttChart.e2e.spec.js
@ -29,7 +29,7 @@ const { getPreciseDuration } = require('../../../../src/utils/duration');
 test.describe("Gantt Chart", () => {
    let ganttChart;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        ganttChart = await createDomainObjectWithDefaults(page, {
            type: 'Gantt Chart'
        });
--- a/e2e/tests/functional/planning/plan.e2e.spec.js
+++ b/e2e/tests/functional/planning/plan.e2e.spec.js
@ -27,7 +27,7 @@ const { assertPlanActivities } = require('../../../helper/planningUtils');
 test.describe("Plan", () => {
    let plan;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        plan = await createPlanFromJSON(page, {
            json: testPlan1
        });
--- a/e2e/tests/functional/planning/timestrip.e2e.spec.js
+++ b/e2e/tests/functional/planning/timestrip.e2e.spec.js
@ -80,7 +80,7 @@ test.describe("Time Strip", () => {
        const activityBounds = page.locator('.activity-bounds');

        // Goto baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        const timestrip = await test.step("Create a Time Strip", async () => {
            const createdTimeStrip = await createDomainObjectWithDefaults(page, { type: 'Time Strip' });
--- a/e2e/tests/functional/plugins/clocks/clock.e2e.spec.js
+++ b/e2e/tests/functional/plugins/clocks/clock.e2e.spec.js
@ -34,7 +34,7 @@ test.describe('Clock Generator CRUD Operations', () => {
            description: 'https://github.com/nasa/openmct/issues/4878'
        });
        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        //Click the Create button
        await page.click('button:has-text("Create")');
--- a/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
+++ b/e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
@ -37,7 +37,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
        //TODO: This needs to be refactored
        const context = await browser.newContext();
        const page = await context.newPage();
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        await page.click('button:has-text("Create")');

        await page.locator('li[role="menuitem"]:has-text("Condition Set")').click();
@ -148,7 +148,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
    });
    test('condition set object can be deleted by Search Tree Actions menu on @localStorage', async ({ page }) => {
        //Navigate to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        //Assertions on loaded Condition Set in main view. This is a stateful transition step after page.goto()
        await expect(page.locator('a:has-text("Unnamed Condition Set Condition Set") >> nth=0')).toBeVisible();
@ -182,7 +182,7 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
 test.describe('Basic Condition Set Use', () => {
    test.beforeEach(async ({ page }) => {
        // Open a browser, navigate to the main page, and wait until all network events to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
    });
    test('Can add a condition', async ({ page }) => {
        // Create a new condition set
@ -247,7 +247,7 @@ test.describe('Basic Condition Set Use', () => {
    });
    test('ConditionSet should output blank instead of the default value', async ({ page }) => {
        //Navigate to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        //Click the Create button
        await page.click('button:has-text("Create")');
--- a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
@ -27,7 +27,7 @@ test.describe('Display Layout', () => {
    /** @type {import('../../../../appActions').CreatedObjectInfo} */
    let sineWaveObject;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        await setRealTimeMode(page);

        // Create Sine Wave Generator
--- a/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
+++ b/e2e/tests/functional/plugins/flexibleLayout/flexibleLayout.e2e.spec.js
@ -27,7 +27,7 @@ test.describe('Flexible Layout', () => {
    let sineWaveObject;
    let clockObject;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create Sine Wave Generator
        sineWaveObject = await createDomainObjectWithDefaults(page, {
--- a/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
+++ b/e2e/tests/functional/plugins/gauge/gauge.e2e.spec.js
@ -31,7 +31,7 @@ const uuid = require('uuid').v4;
 test.describe('Gauge', () => {
    test.beforeEach(async ({ page }) => {
        // Open a browser, navigate to the main page, and wait until all networkevents to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
    });

    test('Can add and remove telemetry sources @unstable', async ({ page }) => {
--- a/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
+++ b/e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js
@ -37,7 +37,7 @@ const thumbnailUrlParamsRegexp = /\?w=100&h=100/;
 test.describe('Example Imagery Object', () => {
    test.beforeEach(async ({ page }) => {
        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create a default 'Example Imagery' object
        const exampleImagery = await createDomainObjectWithDefaults(page, { type: 'Example Imagery' });
@ -178,7 +178,7 @@ test.describe('Example Imagery in Display Layout', () => {
    let displayLayout;
    test.beforeEach(async ({ page }) => {
        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        displayLayout = await createDomainObjectWithDefaults(page, { type: 'Display Layout' });
        await page.goto(displayLayout.url);
@ -317,7 +317,7 @@ test.describe('Example Imagery in Display Layout', () => {
 test.describe('Example Imagery in Flexible layout', () => {
    let flexibleLayout;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        flexibleLayout = await createDomainObjectWithDefaults(page, { type: 'Flexible Layout' });
        await page.goto(flexibleLayout.url);
@ -359,7 +359,7 @@ test.describe('Example Imagery in Flexible layout', () => {
 test.describe('Example Imagery in Tabs View', () => {
    let tabsView;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        tabsView = await createDomainObjectWithDefaults(page, { type: 'Tabs View' });
        await page.goto(tabsView.url);
@ -395,7 +395,7 @@ test.describe('Example Imagery in Tabs View', () => {
 test.describe('Example Imagery in Time Strip', () => {
    let timeStripObject;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        timeStripObject = await createDomainObjectWithDefaults(page, {
            type: 'Time Strip'
        });
--- a/e2e/tests/functional/plugins/lad/lad.e2e.spec.js
+++ b/e2e/tests/functional/plugins/lad/lad.e2e.spec.js
@ -25,7 +25,7 @@ const { createDomainObjectWithDefaults, setStartOffset, setFixedTimeMode, setRea

 test.describe('Testing LAD table configuration', () => {
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create LAD table
        const ladTable = await createDomainObjectWithDefaults(page, {
@ -139,7 +139,7 @@ test.describe('Testing LAD table configuration', () => {
 test.describe('Testing LAD table @unstable', () => {
    let sineWaveObject;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        await setRealTimeMode(page);

        // Create Sine Wave Generator
--- a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js
@ -72,7 +72,7 @@ test.describe('Notebook section tests', () => {
    //The following test cases are associated with Notebook Sections
    test.beforeEach(async ({ page }) => {
        //Navigate to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create Notebook
        await createDomainObjectWithDefaults(page, {
@ -133,7 +133,7 @@ test.describe('Notebook page tests', () => {
    //The following test cases are associated with Notebook Pages
    test.beforeEach(async ({ page }) => {
        //Navigate to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create Notebook
        await createDomainObjectWithDefaults(page, {
@ -201,7 +201,7 @@ test.describe('Notebook page tests', () => {
 test.describe('Notebook export tests', () => {
    test.beforeEach(async ({ page }) => {
        //Navigate to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create Notebook
        await createDomainObjectWithDefaults(page, {
@ -243,7 +243,7 @@ test.describe('Notebook entry tests', () => {
    test.beforeEach(async ({ page }) => {
        // eslint-disable-next-line no-undef
        await page.addInitScript({ path: path.join(__dirname, '../../../../helper/', 'addInitNotebookWithUrls.js') });
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        notebookObject = await createDomainObjectWithDefaults(page, {
            type: NOTEBOOK_NAME
--- a/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebookSnapshots.e2e.spec.js
@ -66,7 +66,7 @@ test.describe('Snapshot Menu tests', () => {
 test.describe('Snapshot Container tests', () => {
    test.beforeEach(async ({ page }) => {
        //Navigate to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create Notebook
        // const notebook = await createDomainObjectWithDefaults(page, {
--- a/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/notebookWithCouchDB.e2e.spec.js
@ -33,7 +33,7 @@ test.describe('Notebook Tests with CouchDB @couchdb', () => {

    test.beforeEach(async ({ page }) => {
        //Navigate to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create Notebook
        testNotebook = await createDomainObjectWithDefaults(page, {type: 'Notebook' });
--- a/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js
@ -202,7 +202,7 @@ test.describe('can export restricted notebook as text', () => {
 async function startAndAddRestrictedNotebookObject(page) {
    // eslint-disable-next-line no-undef
    await page.addInitScript({ path: path.join(__dirname, '../../../../helper/', 'addInitRestrictedNotebook.js') });
-    await page.goto('./', { waitUntil: 'networkidle' });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });

    return createDomainObjectWithDefaults(page, { type: CUSTOM_NAME });
 }
--- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
+++ b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js
@ -80,7 +80,7 @@ async function createNotebookEntryAndTags(page, iterations = 1) {
 test.describe('Tagging in Notebooks @addInit', () => {
    test.beforeEach(async ({ page }) => {
        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
    });
    test('Can load tags', async ({ page }) => {
        await createNotebookAndEntry(page);
@ -109,7 +109,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
        await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling");
    });
    test('Can add tags with blank entry', async ({ page }) => {
-        createDomainObjectWithDefaults(page, { type: 'Notebook' });
+        await createDomainObjectWithDefaults(page, { type: 'Notebook' });
        await selectInspectorTab(page, 'Annotations');

        await nbUtils.enterTextEntry(page, '');
@ -214,7 +214,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
        await page.locator('button[title="More options"]').click();
        await page.locator('li[title="Remove this object from its containing object."]').click();
        await page.locator('button:has-text("OK")').click();
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Unnamed');
        await expect(page.locator('text=No results found')).toBeVisible();
@ -225,7 +225,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
    });
    test('Tags persist across reload', async ({ page }) => {
        //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        const clock = await createDomainObjectWithDefaults(page, { type: 'Clock' });

--- a/e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js
+++ b/e2e/tests/functional/plugins/operatorStatus/operatorStatus.e2e.spec.js
@ -44,7 +44,7 @@ test.describe('Operator Status', () => {
        await page.addInitScript({ path: path.join(__dirname, '../../../../helper/', 'addInitExampleUser.js')});
        // eslint-disable-next-line no-undef
        await page.addInitScript({ path: path.join(__dirname, '../../../../helper/', 'addInitOperatorStatus.js')});
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
    });

    // verify that operator status is visible
--- a/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/autoscale.e2e.spec.js
@ -40,7 +40,7 @@ test.describe('Autoscale', () => {
        //This is necessary due to the size of the test suite.
        test.slow();

-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        await setTimeRange(page);

@ -73,6 +73,7 @@ test.describe('Autoscale', () => {
        const canvas = page.locator('canvas').nth(1);

        await canvas.hover({trial: true});
+        await expect(page.locator('.js-series-data-loaded')).toBeVisible();

        expect.soft(await canvas.screenshot()).toMatchSnapshot('autoscale-canvas-prepan.png', { animations: 'disabled' });

@ -172,7 +173,7 @@ async function createSinewaveOverlayPlot(page, myItemsFolderName) {
 */
 async function turnOffAutoscale(page) {
    // uncheck autoscale
-    await page.getByRole('listitem').filter({ hasText: 'Auto scale' }).getByRole('checkbox').uncheck();
+    await page.getByRole('checkbox', { name: 'Auto scale' }).uncheck();
 }

 /**
@ -182,14 +183,9 @@ async function turnOffAutoscale(page) {
 */
 async function setUserDefinedMinAndMax(page, min, max) {
    // set minimum value
-    const minRangeInput = page.getByRole('listitem').filter({ hasText: 'Minimum Value' }).locator('input[type="number"]');
-    await minRangeInput.click();
-    await minRangeInput.fill(min);
-
+    await page.getByRole('spinbutton').first().fill(min);
    // set maximum value
-    const maxRangeInput = page.getByRole('listitem').filter({ hasText: 'Maximum Value' }).locator('input[type="number"]');
-    await maxRangeInput.click();
-    await maxRangeInput.fill(max);
+    await page.getByRole('spinbutton').nth(1).fill(max);
 }

 /**
--- a/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js
@ -76,7 +76,7 @@ test.describe('Log plot tests', () => {
 */
 async function makeOverlayPlot(page, myItemsFolderName) {
    // fresh page with time range from 2022-03-29 22:00:00.000Z to 2022-03-29 22:00:30.000Z
-    await page.goto('./', { waitUntil: 'networkidle' });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });

    // Set a specific time range for consistency, otherwise it will change
    // on every test to a range based on the current time.
@ -147,7 +147,7 @@ async function makeOverlayPlot(page, myItemsFolderName) {
 * @param {import('@playwright/test').Page} page
 */
 async function testRegularTicks(page) {
-    const yTicks = await page.locator('.gl-plot-y-tick-label');
+    const yTicks = page.locator('.gl-plot-y-tick-label');
    expect(await yTicks.count()).toBe(7);
    await expect(yTicks.nth(0)).toHaveText('-2');
    await expect(yTicks.nth(1)).toHaveText('0');
@ -162,7 +162,7 @@ async function testRegularTicks(page) {
 * @param {import('@playwright/test').Page} page
 */
 async function testLogTicks(page) {
-    const yTicks = await page.locator('.gl-plot-y-tick-label');
+    const yTicks = page.locator('.gl-plot-y-tick-label');
    expect(await yTicks.count()).toBe(9);
    await expect(yTicks.nth(0)).toHaveText('-2.98');
    await expect(yTicks.nth(1)).toHaveText('-1.51');
@ -180,27 +180,24 @@ async function testLogTicks(page) {
 */
 async function enableEditMode(page) {
    // turn on edit mode
-    await page.locator('text=Unnamed Overlay Plot Snapshot >> button').nth(3).click();
-    await expect(await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1)).toBeVisible();
+    await page.getByRole('button', { name: 'Edit' }).click();
+    await expect(page.getByRole('button', { name: 'Save' })).toBeVisible();
 }

 /**
 * @param {import('@playwright/test').Page} page
 */
 async function enableLogMode(page) {
-    // turn on log mode
-    await expect(page.getByRole('listitem').filter({ hasText: 'Log mode' }).getByRole('checkbox')).not.toBeChecked();
-    await page.getByRole('listitem').filter({ hasText: 'Log mode' }).getByRole('checkbox').check();
-    // await page.locator('text=Y Axis Label Log mode Auto scale Padding >> input[type="checkbox"]').first().check();
+    await expect(page.getByRole('checkbox', { name: 'Log mode' })).not.toBeChecked();
+    await page.getByRole('checkbox', { name: 'Log mode' }).check();
 }

 /**
 * @param {import('@playwright/test').Page} page
 */
 async function disableLogMode(page) {
-    // turn off log mode
-    await expect(page.getByRole('listitem').filter({ hasText: 'Log mode' }).getByRole('checkbox')).toBeChecked();
-    await page.getByRole('listitem').filter({ hasText: 'Log mode' }).getByRole('checkbox').uncheck();
+    await expect(page.getByRole('checkbox', { name: 'Log mode' })).toBeChecked();
+    await page.getByRole('checkbox', { name: 'Log mode' }).uncheck();
 }

 /**
--- a/e2e/tests/functional/plugins/plot/missingPlotObj.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/missingPlotObj.e2e.spec.js
@ -84,7 +84,7 @@ test.describe('Handle missing object for plots', () => {
 */
 async function makeStackedPlot(page, myItemsFolderName) {
    // fresh page with time range from 2022-03-29 22:00:00.000Z to 2022-03-29 22:00:30.000Z
-    await page.goto('./', { waitUntil: 'networkidle' });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });

    // create stacked plot
    await page.locator('button.c-create-button').click();
--- a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
@ -30,7 +30,7 @@ const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../..

 test.describe('Overlay Plot', () => {
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
    });

    test('Plot legend color is in sync with plot series color', async ({ page }) => {
--- a/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js
@ -33,7 +33,7 @@ test.describe('Plot Integrity Testing @unstable', () => {

    test.beforeEach(async ({ page }) => {
        //Open a browser, navigate to the main page, and wait until all networkevents to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        sineWaveGeneratorObject = await createDomainObjectWithDefaults(page, { type: 'Sine Wave Generator' });
    });

--- a/e2e/tests/functional/plugins/plot/scatterPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/scatterPlot.e2e.spec.js
@ -33,7 +33,7 @@ test.describe('Scatter Plot', () => {

    test.beforeEach(async ({ page }) => {
        // Open a browser, navigate to the main page, and wait until all networkevents to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Create the Scatter Plot
        scatterPlot = await createDomainObjectWithDefaults(page, { type: 'Scatter Plot' });
--- a/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/stackedPlot.e2e.spec.js
@ -36,7 +36,7 @@ test.describe('Stacked Plot', () => {

    test.beforeEach(async ({ page }) => {
        // Open a browser, navigate to the main page, and wait until all networkevents to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        stackedPlot = await createDomainObjectWithDefaults(page, {
            type: "Stacked Plot"
@ -146,7 +146,7 @@ test.describe('Stacked Plot', () => {

        // Assert that the inspector shows the Y Axis properties for swgB
        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('heading', { name: "Y Axis" })).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgB.name);

        // Click on the 3rd plot
@ -154,7 +154,7 @@ test.describe('Stacked Plot', () => {

        // Assert that the inspector shows the Y Axis properties for swgC
        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('heading', { name: "Y Axis" })).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgC.name);

        // Go into edit mode
@ -167,7 +167,7 @@ test.describe('Stacked Plot', () => {

        // Assert that the inspector shows the Y Axis properties for swgA
        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('heading', { name: "Y Axis" })).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgA.name);

        //Click on canvas for the 2nd plot
@ -175,7 +175,7 @@ test.describe('Stacked Plot', () => {

        // Assert that the inspector shows the Y Axis properties for swgB
        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('heading', { name: "Y Axis" })).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgB.name);

        //Click on canvas for the 3rd plot
@ -183,7 +183,7 @@ test.describe('Stacked Plot', () => {

        // Assert that the inspector shows the Y Axis properties for swgC
        await expect(page.locator('[aria-label="Plot Series Properties"] >> h2')).toContainText("Plot Series");
-        await expect(page.getByRole('heading', { name: "Y Axis" })).toBeVisible();
+        await expect(page.getByRole('heading', { name: 'Y Axis' })).toBeVisible();
        await expect(page.locator('[aria-label="Plot Series Properties"] .c-object-label')).toContainText(swgC.name);
    });
 });
--- a/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/tagging.e2e.spec.js
@ -157,7 +157,7 @@ test.describe('Plot Tagging', () => {
    }

    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
    });

    test('Tags work with Overlay Plots', async ({ page }) => {
--- a/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js
+++ b/e2e/tests/functional/plugins/telemetryTable/telemetryTable.e2e.spec.js
@ -30,7 +30,7 @@ test.describe('Telemetry Table', () => {
            description: 'https://github.com/nasa/openmct/issues/5113'
        });

-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        const table = await createDomainObjectWithDefaults(page, { type: 'Telemetry Table' });
        await createDomainObjectWithDefaults(page, {
--- a/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js
+++ b/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js
@ -26,7 +26,7 @@ const { setFixedTimeMode, setRealTimeMode, setStartOffset, setEndOffset } = requ
 test.describe('Time conductor operations', () => {
    test('validate start time does not exceeds end time', async ({ page }) => {
        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        const year = new Date().getFullYear();

        let startDate = 'xxxx-01-01 01:00:00.000Z';
@ -82,7 +82,7 @@ test.describe('Time conductor input fields real-time mode', () => {
        };

        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Switch to real-time mode
        await setRealTimeMode(page);
@ -119,7 +119,7 @@ test.describe('Time conductor input fields real-time mode', () => {
        const endDelta = (1 * 1000);

        // Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Switch to real-time mode
        await setRealTimeMode(page);
--- a/e2e/tests/functional/plugins/timer/timer.e2e.spec.js
+++ b/e2e/tests/functional/plugins/timer/timer.e2e.spec.js
@ -26,7 +26,7 @@ const { openObjectTreeContextMenu, createDomainObjectWithDefaults } = require('.
 test.describe('Timer', () => {
    let timer;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
        timer = await createDomainObjectWithDefaults(page, { type: 'timer' });
    });

--- a/e2e/tests/functional/recentObjects.e2e.spec.js
+++ b/e2e/tests/functional/recentObjects.e2e.spec.js
@ -32,7 +32,7 @@ test.describe('Recent Objects', () => {
    /** @type {import('@playwright/test').Locator} */
    let folderA;
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });

        // Set Recent Objects List locator for subsequent tests
        recentObjectsList = page.getByRole('list', {
--- a/e2e/tests/functional/smoke.e2e.spec.js
+++ b/e2e/tests/functional/smoke.e2e.spec.js
@ -38,7 +38,7 @@ const { test, expect } = require('../../pluginFixtures');
 test('Verify that the create button appears and that the Folder Domain Object is available for selection', async ({ page }) => {

    //Go to baseURL
-    await page.goto('./', { waitUntil: 'networkidle' });
+    await page.goto('./', { waitUntil: 'domcontentloaded' });

    //Click the Create button
    await page.click('button:has-text("Create")');
--- a/e2e/tests/functional/tree.e2e.spec.js
+++ b/e2e/tests/functional/tree.e2e.spec.js
@ -28,7 +28,7 @@ const {

 test.describe('Main Tree', () => {
    test.beforeEach(async ({ page }) => {
-        await page.goto('./', { waitUntil: 'networkidle' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
    });

    test('Creating a child object within a folder and immediately opening it shows the created object in the tree @couchdb', async ({ page }) => {
--- a/index.html
+++ b/index.html
@ -200,6 +200,8 @@
        openmct.install(openmct.plugins.Timelist());
        openmct.install(openmct.plugins.BarChart());
        openmct.install(openmct.plugins.ScatterPlot());
-        openmct.start();
+        document.addEventListener('DOMContentLoaded', function () {
+            openmct.start();
+        });
    </script>
 </html>
--- a/package.json
+++ b/package.json
@ -8,7 +8,7 @@
    "@deploysentinel/playwright": "0.3.3",
    "@percy/cli": "1.23.0",
    "@percy/playwright": "1.0.4",
-    "@playwright/test": "1.29.0",
+    "@playwright/test": "1.32.3",
    "@types/eventemitter3": "1.2.0",
    "@types/jasmine": "4.3.1",
    "@types/lodash": "4.14.192",
@ -51,7 +51,7 @@
    "moment-timezone": "0.5.41",
    "nyc": "15.1.0",
    "painterro": "1.2.78",
-    "playwright-core": "1.29.0",
+    "playwright-core": "1.32.3",
    "plotly.js-basic-dist": "2.20.0",
    "plotly.js-gl2d-dist": "2.20.0",
    "printj": "1.3.1",
--- a/src/plugins/plot/inspector/forms/YAxisForm.vue
+++ b/src/plugins/plot/inspector/forms/YAxisForm.vue
@ -19,6 +19,7 @@
        </li>
        <li class="grid-row">
            <div
+                id="log-mode-checkbox"
                class="grid-cell label"
                title="Enable log mode."
            >
@ -29,6 +30,7 @@
                <input
                    v-model="logMode"
                    class="js-log-mode-input"
+                    aria-labelledby="log-mode-checkbox"
                    type="checkbox"
                    @change="updateForm('logMode')"
                />
@ -36,12 +38,14 @@
        </li>
        <li class="grid-row">
            <div
+                id="autoscale-checkbox"
                class="grid-cell label"
                title="Automatically scale the Y axis to keep all values in view."
            >Auto scale</div>
            <div class="grid-cell value"><input
                v-model="autoscale"
                type="checkbox"
+                aria-labelledby="autoscale-checkbox"
                @change="updateForm('autoscale')"
            ></div>
        </li>
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@ -70,6 +70,7 @@
                v-if="isViewEditable && !isEditing && !domainObject.locked"
                class="l-browse-bar__actions__edit c-button c-button--major icon-pencil"
                title="Edit"
+                aria-label="Edit"
                @click="edit()"
            ></button>

@ -80,6 +81,7 @@
                <button
                    class="c-button--menu c-button--major icon-save"
                    title="Save"
+                    aria-label="Save"
                    @click.stop="toggleSaveMenu"
                ></button>
                <div