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 😅

.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

.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 : |

.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:

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,

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'

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([

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:

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

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' });
     });
 });
 

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');

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([

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';

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")');

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, {

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'

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' });

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'
         });

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
         });

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' });

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")');

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")');

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

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, {

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 }) => {

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'
         });

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

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

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, {

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' });

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 });
 }

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' });
 

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

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 page.getByRole('spinbutton').first().fill(min);
-    await minRangeInput.click();
-    await minRangeInput.fill(min);
-
     // set maximum value
-    const maxRangeInput = page.getByRole('listitem').filter({ hasText: 'Maximum Value' }).locator('input[type="number"]');
+    await page.getByRole('spinbutton').nth(1).fill(max);
-    await maxRangeInput.click();
-    await maxRangeInput.fill(max);
 }
 
 /**

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 page.getByRole('button', { name: 'Edit' }).click();
-    await expect(await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1)).toBeVisible();
+    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('checkbox', { name: 'Log mode' })).not.toBeChecked();
-    await expect(page.getByRole('listitem').filter({ hasText: 'Log mode' }).getByRole('checkbox')).not.toBeChecked();
+    await page.getByRole('checkbox', { name: 'Log mode' }).check();
-    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();
 }
 
 /**
  * @param {import('@playwright/test').Page} page
  */
 async function disableLogMode(page) {
-    // turn off log mode
+    await expect(page.getByRole('checkbox', { name: 'Log mode' })).toBeChecked();
-    await expect(page.getByRole('listitem').filter({ hasText: 'Log mode' }).getByRole('checkbox')).toBeChecked();
+    await page.getByRole('checkbox', { name: 'Log mode' }).uncheck();
-    await page.getByRole('listitem').filter({ hasText: 'Log mode' }).getByRole('checkbox').uncheck();
 }
 
 /**

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();

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 }) => {

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' });
     });
 

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' });

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);
     });
 });

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 }) => {

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, {

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);

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' });
     });
 

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', {

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")');

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 }) => {

index.html

@@ -200,6 +200,8 @@
         openmct.install(openmct.plugins.Timelist());
         openmct.install(openmct.plugins.BarChart());
         openmct.install(openmct.plugins.ScatterPlot());
+        document.addEventListener('DOMContentLoaded', function () {
             openmct.start();
+        });
     </script>
 </html>

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",

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>

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