Batch save requests to minimize the number of requests required to import a JSON file

* chatty

* bad linebreak

* bump to 3.3.2

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

.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
@@ -162,7 +162,7 @@ jobs:
     steps:
       - build_and_install:
           node-version: <<parameters.node-version>>
-      - run: npx playwright@1.29.0 install #Necessary for bare ubuntu machine
+      - run: npx playwright@1.32.3 install #Necessary for bare ubuntu machine
       - run: |
           export $(cat src/plugins/persistence/couch/.env.ci | xargs)
           docker-compose -f src/plugins/persistence/couch/couchdb-compose.yaml up --detach

.github/dependabot.yml

@@ -27,6 +27,8 @@ updates:
         update-types: ["version-update:semver-patch"]
       - dependency-name: "moment-timezone"
         update-types: ["version-update:semver-patch"]
+      - dependency-name: "@types/lodash"
+        update-types: ["version-update:semver-patch"]
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:

.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 : |
@@ -41,3 +41,20 @@ jobs:
         uses: actions/upload-artifact@v3
         with:
           path: html-test-results
+      - name: Remove pr:e2e:couchdb label (if present)
+        if: ${{ contains(github.event.pull_request.labels.*.name, 'pr:e2e:couchdb') }}
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:e2e:couchdb';
+            try {
+              await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+              });
+            } catch (error) {
+              core.warning(`Failed to remove 'pr:e2e:couchdb' label: ${error.message}`);
+            }

.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:
@@ -66,3 +66,20 @@ jobs:
               repo: "openmct",
               body: 'Failure ❌ ! Build artifacts are here: https://github.com/nasa/openmct/actions/runs/' + context.runId
             })
+      - name: Remove pr:e2e label (if present)
+        if: ${{ contains(github.event.pull_request.labels.*.name, 'pr:e2e') }}
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { owner, repo, number } = context.issue;
+            const labelToRemove = 'pr:e2e';
+            try {
+              await github.rest.issues.removeLabel({
+                owner,
+                repo,
+                issue_number: number,
+                name: labelToRemove
+              });
+            } catch (error) {
+              core.warning(`Failed to remove 'pr:e2e' label: ${error.message}`);
+            }

.webpack/webpack.dev.js

@@ -53,7 +53,11 @@ module.exports = merge(common, {
         },
         client: {
             progress: true,
-            overlay: true
+            overlay: {
+                // Disable overlay for runtime errors.
+                // See: https://github.com/webpack/webpack-dev-server/issues/4771
+                runtimeErrors: false
+            }
         }
     }
 });

e2e/README.md

@@ -139,16 +139,18 @@ These tests are expected to become blocking and gating with assertions as we ext
 
 Our file structure follows the type of type of testing being excercised at the e2e layer and files containing test suites which matcher application behavior or our `src` and `example` layout. This area is not well refined as we figure out what works best for closed source and downstream projects. This may change altogether if we move `e2e` to it's own npm package.
 
-- `./helper` - contains helper functions or scripts which are leveraged directly within the testsuites. i.e. non-default plugin scripts injected into DOM
-- `./test-data` - contains test data which is leveraged or generated in the functional, performance, or visual test suites. i.e. localStorage data
-- `./tests/functional` - the bulk of the tests are contained within this folder to verify the functionality of open mct
-- `./tests/functional/example/` - tests which specifically verify the example plugins
-- `./tests/functional/plugins/` - tests which loosely test each plugin. This folder is the most likely to change. Note: some @snapshot tests are still contained within this structure
-- `./tests/framework/` - tests which verify that our testframework functionality and assumptions will continue to work based on further refactoring or playwright version changes
-- `./tests/performance/` - performance tests
-- `./tests/visual/` - Visual tests
-- `./appActions.js` - Contains common fixtures which can be leveraged by testcase authors to quickly move through the application when writing new tests.
-- `./baseFixture.js` - Contains base fixtures which only extend default `@playwright/test` functionality. The goal is to remove these fixtures as native Playwright APIs improve.
+|File Path|Description|
+|:-:|-|
+|`./helper`                    | Contains helper functions or scripts which are leveraged directly within the test suites (e.g.: non-default plugin scripts injected into the DOM)|
+|`./test-data`                 | Contains test data which is leveraged or generated in the functional, performance, or visual test suites (e.g.: localStorage data).|
+|`./tests/functional`          | The bulk of the tests are contained within this folder to verify the functionality of Open MCT.|
+|`./tests/functional/example/` | Tests which specifically verify the example plugins (e.g.: Sine Wave Generator).|
+|`./tests/functional/plugins/` | Tests which loosely test each plugin. This folder is the most likely to change. Note: some `@snapshot` tests are still contained within this structure.|
+|`./tests/framework/`          | Tests which verify that our testing framework's functionality and assumptions will continue to work based on further refactoring or Playwright version changes (e.g.: verifying custom fixtures and appActions).|
+|`./tests/performance/`        | Performance tests.|
+|`./tests/visual/`             | Visual tests.|
+|`./appActions.js`             | Contains common methods which can be leveraged by test case authors to quickly move through the application when writing new tests.|
+|`./baseFixture.js`            | Contains base fixtures which only extend default `@playwright/test` functionality. The expectation is that these fixtures will be removed as the native Playwright API improves|
 
 Our functional tests end in `*.e2e.spec.js`, visual tests in `*.visual.spec.js` and performance tests in `*.perf.spec.js`.
 
@@ -158,10 +160,12 @@ Where possible, we try to run Open MCT without modification or configuration cha
 
 Open MCT is leveraging the [config file](https://playwright.dev/docs/test-configuration) pattern to describe the capabilities of Open MCT e2e _where_ it's run
 
-- `./playwright-ci.config.js` - Used when running in CI or to debug CI issues locally
-- `./playwright-local.config.js` - Used when running locally
-- `./playwright-performance.config.js` - Used when running performance tests in CI or locally
-- `./playwright-visual.config.js` - Used to run the visual tests in CI or locally
+|Config File|Description|
+|:-:|-|
+|`./playwright-ci.config.js` | Used when running in CI or to debug CI issues locally|
+|`./playwright-local.config.js` | Used when running locally|
+|`./playwright-performance.config.js` | Used when running performance tests in CI or locally|
+|`./playwright-visual.config.js` | Used to run the visual tests in CI or locally|
 
 #### Test Tags
 
@@ -169,13 +173,15 @@ Test tags are a great way of organizing tests outside of a file structure. To le
 
 Current list of test tags:
 
-- `@ipad` - Test case or test suite is compatible with Playwright's iPad support and Open MCT's read-only mobile view (i.e. no Create button).
-- `@gds` - Denotes a GDS Test Case used in the VIPER Mission.
-- `@addInit` - Initializes the browser with an injected and artificial state. Useful for loading non-default plugins. Likely will not work outside of `npm start`.
-- `@localStorage` - Captures or generates session storage to manipulate browser state. Useful for excluding in tests which require a persistent backend (i.e. CouchDB).
-- `@snapshot` - Uses Playwright's snapshot functionality to record a copy of the DOM for direct comparison. Must be run inside of the playwright container.
-- `@unstable` - A new test or test which is known to be flaky.
-- `@2p` - Indicates that multiple users are involved, or multiple tabs/pages are used. Useful for testing multi-user interactivity.
+|Test Tag|Description|
+|:-:|-|
+|`@ipad` | Test case or test suite is compatible with Playwright's iPad support and Open MCT's read-only mobile view (i.e. no create button).|
+|`@gds` | Denotes a GDS Test Case used in the VIPER Mission.|
+|`@addInit` | Initializes the browser with an injected and artificial state. Useful for loading non-default plugins. Likely will not work outside of `npm start`.|
+|`@localStorage` | Captures or generates session storage to manipulate browser state. Useful for excluding in tests which require a persistent backend (i.e. CouchDB).|
+|`@snapshot` | Uses Playwright's snapshot functionality to record a copy of the DOM for direct comparison. Must be run inside of the playwright container.|
+|`@unstable` | A new test or test which is known to be flaky.|
+|`@2p` | Indicates that multiple users are involved, or multiple tabs/pages are used. Useful for testing multi-user interactivity.|
 
 ### Continuous Integration
 
@@ -232,7 +238,8 @@ At the same time, we don't want to waste CI resources on parallel runs, so we've
 
 In order to maintain fast and reliable feedback, tests go through a promotion process. All new test cases or test suites must be labeled with the `@unstable` annotation. The Open MCT dev team runs these unstable tests in our private repos to ensure they work downstream and are reliable.
 
-To run the stable tests, use the ```npm run test:e2e:stable``` command. To run the new and flaky tests, use the ```npm run test:e2e:unstable``` command.
+- To run the stable tests, use the `npm run test:e2e:stable` command.
+- To run the new and flaky tests, use the `npm run test:e2e:unstable` command.
 
 A testcase and testsuite are to be unmarked as @unstable when:
 
@@ -293,13 +300,24 @@ Skipping based on browser version (Rarely used): <https://github.com/microsoft/p
 - How to make tests robust to function in other contexts (VISTA, VIPER, etc.)
   - Leverage the use of `appActions.js` methods such as `createDomainObjectWithDefaults()`
 - How to make tests faster and more resilient
-  - When possible, navigate directly by URL
-  - Leverage `await page.goto('./', { waitUntil: 'networkidle' });`
+  - When possible, navigate directly by URL:
+
+  ```javascript
+    // You can capture the CreatedObjectInfo returned from this appAction:
+    const clock = await createDomainObjectWithDefaults(page, { type: 'Clock' });
+
+    // ...and use its `url` property to navigate directly to it later in the test:
+    await page.goto(clock.url);
+  ```
+
+  - Leverage `await page.goto('./', { waitUntil: 'domcontentloaded' });`
+    - Initial navigation should _almost_ always use the `{ waitUntil: 'domcontentloaded' }` option.
   - Avoid repeated setup to test to test a single assertion. Write longer tests with multiple soft assertions.
 
 ### How to write a great test (WIP)
 
 - Use our [App Actions](./appActions.js) for performing common actions whenever applicable.
+  - Use `waitForPlotsToRender()` before asserting against anything that is dependent upon plot series data being loaded and drawn.
 - If you create an object outside of using the `createDomainObjectWithDefaults` App Action, make sure to fill in the 'Notes' section of your object with `page.testNotes`:
 
   ```js
@@ -346,7 +364,7 @@ We leverage the following official Playwright reporters:
 - Tracefile
 - Screenshots
 
-When running the tests locally with the `npm run test:local` command, the html report will open automatically on failure. Inside this HTML report will be a complete summary of the finished tests. If the tests failed, you'll see embedded links to screenshot failure, execution logs, and the Tracefile.
+When running the tests locally with the `npm run test:e2e:local` command, the html report will open automatically on failure. Inside this HTML report will be a complete summary of the finished tests. If the tests failed, you'll see embedded links to screenshot failure, execution logs, and the Tracefile.
 
 When looking at the reports run in CI, you'll leverage this same HTML Report which is hosted either in CircleCI or Github Actions as a build artifact.
 

e2e/appActions.js

@@ -55,6 +55,7 @@
 
 const Buffer = require('buffer').Buffer;
 const genUuid = require('uuid').v4;
+const { expect } = require('@playwright/test');
 
 /**
  * This common function creates a domain object with the default options. It is the preferred way of creating objects
@@ -74,7 +75,6 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine
     // Navigate to the parent object. This is necessary to create the object
     // in the correct location, such as a folder, layout, or plot.
     await page.goto(`${parentUrl}?hideTree=true`);
-    await page.waitForLoadState('networkidle');
 
     //Click the Create button
     await page.click('button:has-text("Create")');
@@ -406,19 +406,92 @@ async function selectInspectorTab(page, name) {
     }
 }
 
+/**
+* Waits and asserts that all plot series data on the page
+* is loaded and drawn.
+*
+* In lieu of a better way to detect when a plot is done rendering,
+* we [attach a class to the '.gl-plot' element](https://github.com/nasa/openmct/blob/5924d7ea95a0c2d4141c602a3c7d0665cb91095f/src/plugins/plot/MctPlot.vue#L27)
+* once all pending series data has been loaded. The following appAction retrieves
+* all plots on the page and waits up to the default timeout for the class to be
+* attached to each plot.
+* @param {import('@playwright/test').Page} page
+*/
+async function waitForPlotsToRender(page) {
+    const plotLocator = page.locator('.gl-plot');
+    for (const plot of await plotLocator.all()) {
+        await expect(plot).toHaveClass(/js-series-data-loaded/);
+    }
+}
+
+/**
+ * @typedef {Object} PlotPixel
+ * @property {number} r The value of the red channel (0-255)
+ * @property {number} g The value of the green channel (0-255)
+ * @property {number} b The value of the blue channel (0-255)
+ * @property {number} a The value of the alpha channel (0-255)
+ * @property {string} strValue The rgba string value of the pixel
+ */
+
+/**
+ * Wait for all plots to render and then retrieve and return an array
+ * of canvas plot pixel data (RGBA values).
+ * @param {import('@playwright/test').Page} page
+ * @param {string} canvasSelector The selector for the canvas element
+ * @return {Promise<PlotPixel[]>}
+ */
+async function getCanvasPixels(page, canvasSelector) {
+    const getTelemValuePromise = new Promise(resolve => page.exposeFunction('getCanvasValue', resolve));
+    const canvasHandle = await page.evaluateHandle((canvas) => document.querySelector(canvas), canvasSelector);
+    const canvasContextHandle = await page.evaluateHandle(canvas => canvas.getContext('2d'), canvasHandle);
+
+    await waitForPlotsToRender(page);
+    await page.evaluate(([canvas, ctx]) => {
+        // The document canvas is where the plot points and lines are drawn.
+        // The only way to access the canvas is using document (using page.evaluate)
+        /** @type {ImageData} */
+        const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+        /** @type {number[]} */
+        const imageDataValues = Object.values(data);
+        /** @type {PlotPixel[]} */
+        const plotPixels = [];
+        // Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
+        // The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
+        for (let i = 0; i < imageDataValues.length;) {
+            if (imageDataValues[i] > 0) {
+                plotPixels.push({
+                    r: imageDataValues[i],
+                    g: imageDataValues[i + 1],
+                    b: imageDataValues[i + 2],
+                    a: imageDataValues[i + 3],
+                    strValue: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${imageDataValues[i + 2]}, ${imageDataValues[i + 3]})`
+                });
+            }
+
+            i = i + 4;
+        }
+
+        window.getCanvasValue(plotPixels);
+    }, [canvasHandle, canvasContextHandle]);
+
+    return getTelemValuePromise;
+}
+
 // eslint-disable-next-line no-undef
 module.exports = {
     createDomainObjectWithDefaults,
     createNotification,
-    expandTreePaneItemByName,
-    expandEntireTree,
     createPlanFromJSON,
-    openObjectTreeContextMenu,
+    expandEntireTree,
+    expandTreePaneItemByName,
+    getCanvasPixels,
     getHashUrlToDomainObject,
     getFocusedObjectUuid,
+    openObjectTreeContextMenu,
     setFixedTimeMode,
     setRealTimeMode,
     setStartOffset,
     setEndOffset,
-    selectInspectorTab
+    selectInspectorTab,
+    waitForPlotsToRender
 };

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
@@ -260,7 +260,7 @@ test.describe('Notebook entry tests', () => {
     });
     test('When an object is dropped into a notebook, a new entry is created and it should be focused @unstable', async ({ page }) => {
         // Create Overlay Plot
-        await createDomainObjectWithDefaults(page, {
+        const overlayPlot = await createDomainObjectWithDefaults(page, {
             type: 'Overlay Plot'
         });
 
@@ -270,17 +270,17 @@ test.describe('Notebook entry tests', () => {
         // Reveal the notebook in the tree
         await page.getByTitle('Show selected item in tree').click();
 
-        await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', '.c-notebook__drag-area');
+        await page.dragAndDrop(`role=treeitem[name=/${overlayPlot.name}/]`, '.c-notebook__drag-area');
 
         const embed = page.locator('.c-ne__embed__link');
         const embedName = await embed.textContent();
 
         await expect(embed).toHaveClass(/icon-plot-overlay/);
-        expect(embedName).toBe('Dropped Overlay Plot');
+        expect(embedName).toBe(overlayPlot.name);
     });
     test('When an object is dropped into a notebooks existing entry, it should be focused @unstable', async ({ page }) => {
         // Create Overlay Plot
-        await createDomainObjectWithDefaults(page, {
+        const overlayPlot = await createDomainObjectWithDefaults(page, {
             type: 'Overlay Plot'
         });
 
@@ -291,14 +291,14 @@ test.describe('Notebook entry tests', () => {
         await page.getByTitle('Show selected item in tree').click();
 
         await nbUtils.enterTextEntry(page, 'Entry to drop into');
-        await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', 'text=Entry to drop into');
+        await page.dragAndDrop(`role=treeitem[name=/${overlayPlot.name}/]`, 'text=Entry to drop into');
 
         const existingEntry = page.locator('.c-ne__content', { has: page.locator('text="Entry to drop into"') });
         const embed = existingEntry.locator('.c-ne__embed__link');
         const embedName = await embed.textContent();
 
         await expect(embed).toHaveClass(/icon-plot-overlay/);
-        expect(embedName).toBe('Dropped Overlay Plot');
+        expect(embedName).toBe(overlayPlot.name);
     });
     test.fixme('new entries persist through navigation events without save', async ({ page }) => {});
     test('previous and new entries can be deleted', async ({ page }) => {

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,37 +225,13 @@ test.describe('Tagging in Notebooks @addInit', () => {
     });
     test('Tags persist across reload', async ({ page }) => {
         //Go to baseURL
-        await page.goto('./', { waitUntil: 'networkidle' });
-
-        const clock = await createDomainObjectWithDefaults(page, { type: 'Clock' });
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
 
         const ITERATIONS = 4;
         const notebook = await createNotebookEntryAndTags(page, ITERATIONS);
+        await page.goto(notebook.url);
 
-        for (let iteration = 0; iteration < ITERATIONS; iteration++) {
-            const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
-            await expect(page.locator(entryLocator)).toContainText("Science");
-            await expect(page.locator(entryLocator)).toContainText("Driving");
-        }
-
-        await Promise.all([
-            page.waitForNavigation(),
-            page.goto('./#/browse/mine?hideTree=false'),
-            page.click('.c-disclosure-triangle')
-        ]);
-
-        const treePane = page.getByRole('tree', {
-            name: 'Main Tree'
-        });
-        // Click Clock
-        await treePane.getByRole('treeitem', {
-            name: clock.name
-        }).click();
-        // Click Notebook
-        await page.getByRole('treeitem', {
-            name: notebook.name
-        }).click();
-
+        // Verify tags are present
         for (let iteration = 0; iteration < ITERATIONS; iteration++) {
             const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
             await expect(page.locator(entryLocator)).toContainText("Science");
@@ -263,14 +239,9 @@ test.describe('Tagging in Notebooks @addInit', () => {
         }
 
         //Reload Page
-        await Promise.all([
-            page.reload(),
-            page.waitForLoadState('networkidle')
-        ]);
-
-        // Click Notebook
-        await page.click(`text="${notebook.name}"`);
+        await page.reload({ waitUntil: 'domcontentloaded' });
 
+        // Verify tags persist across reload
         for (let iteration = 0; iteration < ITERATIONS; iteration++) {
             const entryLocator = `[aria-label="Notebook Entry"] >> nth = ${iteration}`;
             await expect(page.locator(entryLocator)).toContainText("Science");

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

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();
 }
 
 /**

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

@@ -26,11 +26,11 @@ necessarily be used for reference when writing new tests in this area.
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
+const { createDomainObjectWithDefaults, getCanvasPixels, selectInspectorTab, waitForPlotsToRender } = require('../../../../appActions');
 
 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 }) => {
@@ -52,14 +52,9 @@ test.describe('Overlay Plot', () => {
         await page.locator('li.c-tree__item.menus-to-left .c-disclosure-triangle').click();
         await page.locator('.c-click-swatch--menu').click();
         await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click();
-
         // gets color for swatch located in legend
-        const element = await page.waitForSelector('.plot-series-color-swatch');
-        const color = await element.evaluate((el) => {
-            return window.getComputedStyle(el).getPropertyValue('background-color');
-        });
-
-        expect(color).toBe('rgb(255, 166, 61)');
+        const seriesColorSwatch = page.locator('.gl-plot-label > .plot-series-color-swatch');
+        await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)');
     });
 
     test('Limit lines persist when series is moved to another Y Axis and on refresh', async ({ page }) => {
@@ -214,62 +209,27 @@ test.describe('Overlay Plot', () => {
         });
 
         await page.goto(overlayPlot.url);
+        // Wait for plot series data to load and be drawn
+        await waitForPlotsToRender(page);
         await page.click('button[title="Edit"]');
 
         await selectInspectorTab(page, 'Elements');
 
         await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).click();
 
-        const plotPixelSize = await getCanvasPixelsWithData(page);
+        const plotPixels = await getCanvasPixels(page, '.js-overlay canvas');
+        const plotPixelSize = plotPixels.length;
         expect(plotPixelSize).toBeGreaterThan(0);
     });
 });
 
 /**
- * @param {import('@playwright/test').Page} page
- */
-async function getCanvasPixelsWithData(page) {
-    const getTelemValuePromise = new Promise(resolve => page.exposeFunction('getCanvasValue', resolve));
-
-    await page.evaluate(() => {
-        // The document canvas is where the plot points and lines are drawn.
-        // The only way to access the canvas is using document (using page.evaluate)
-        let data;
-        let canvas;
-        let ctx;
-        canvas = document.querySelector('.js-overlay canvas');
-        ctx = canvas.getContext('2d');
-        data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-        const imageDataValues = Object.values(data);
-        let plotPixels = [];
-        // Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
-        // The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
-        for (let i = 0; i < imageDataValues.length;) {
-            if (imageDataValues[i] > 0) {
-                plotPixels.push({
-                    startIndex: i,
-                    endIndex: i + 3,
-                    value: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${imageDataValues[i + 2]}, ${imageDataValues[i + 3]})`
-                });
-            }
-
-            i = i + 4;
-
-        }
-
-        window.getCanvasValue(plotPixels.length);
-    });
-
-    return getTelemValuePromise;
-}
-
-/**
- *
+ * Asserts that limit lines exist and are visible
  * @param {import('@playwright/test').Page} page
  */
 async function assertLimitLinesExistAndAreVisible(page) {
     // Wait for plot series data to load
-    await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+    await waitForPlotsToRender(page);
     // Wait for limit lines to be created
     await page.waitForSelector('.js-limit-area', { state: 'attached' });
     const limitLineCount = await page.locator('.c-plot-limit-line').count();

e2e/tests/functional/plugins/plot/plotLegendSwatch.e2e.spec.js

@@ -1,113 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2023, 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.
- *****************************************************************************/
-
-/*
-Tests to verify log plot functionality. Note this test suite if very much under active development and should not
-necessarily be used for reference when writing new tests in this area.
-*/
-
-const { selectInspectorTab } = require('../../../../appActions');
-const { test, expect } = require('../../../../pluginFixtures');
-
-test.describe('Legend color in sync with plot color', () => {
-    test('Testing', async ({ page }) => {
-        await makeOverlayPlot(page);
-
-        // navigate to plot series color palette
-        await page.click('.l-browse-bar__actions__edit');
-        await selectInspectorTab(page, 'Config');
-
-        await page.locator('li.c-tree__item.menus-to-left .c-disclosure-triangle').click();
-        await page.locator('.c-click-swatch--menu').click();
-        await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click();
-
-        // gets color for swatch located in legend
-        const element = await page.waitForSelector('.plot-series-color-swatch');
-        const color = await element.evaluate((el) => {
-            return window.getComputedStyle(el).getPropertyValue('background-color');
-        });
-
-        expect(color).toBe('rgb(255, 166, 61)');
-    });
-});
-
-async function saveOverlayPlot(page) {
-    // save overlay plot
-    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
-
-    await Promise.all([
-        page.locator('text=Save and Finish Editing').click(),
-        //Wait for Save Banner to appear
-        page.waitForSelector('.c-message-banner__message')
-    ]);
-    //Wait until Save Banner is gone
-    await page.locator('.c-message-banner__close-button').click();
-    await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
-}
-
-async function makeOverlayPlot(page) {
-    // 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' });
-
-    // create overlay plot
-
-    await page.locator('button.c-create-button').click();
-    await page.locator('li[role="menuitem"]:has-text("Overlay Plot")').click();
-    await Promise.all([
-        page.waitForNavigation({ waitUntil: 'networkidle'}),
-        page.locator('button:has-text("OK")').click(),
-        //Wait for Save Banner to appear
-        page.waitForSelector('.c-message-banner__message')
-    ]);
-    //Wait until Save Banner is gone
-    await page.locator('.c-message-banner__close-button').click();
-    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
-
-    // save the overlay plot
-
-    await saveOverlayPlot(page);
-
-    // create a sinewave generator
-
-    await page.locator('button.c-create-button').click();
-    await page.locator('li[role="menuitem"]:has-text("Sine Wave Generator")').click();
-
-    // Click OK to make generator
-
-    await Promise.all([
-        page.waitForNavigation({ waitUntil: 'networkidle'}),
-        page.locator('button:has-text("OK")').click(),
-        //Wait for Save Banner to appear
-        page.waitForSelector('.c-message-banner__message')
-    ]);
-    //Wait until Save Banner is gone
-    await page.locator('.c-message-banner__close-button').click();
-    await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
-
-    // click on overlay plot
-
-    await page.locator('text=Open MCT My Items >> span').nth(3).click();
-    await Promise.all([
-        page.waitForNavigation(),
-        page.locator('text=Unnamed Overlay Plot').first().click()
-    ]);
-}

e2e/tests/functional/plugins/plot/plotRendering.e2e.spec.js

@@ -26,26 +26,25 @@
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults} = require('../../../../appActions');
+const { createDomainObjectWithDefaults, getCanvasPixels } = require('../../../../appActions');
 
-test.describe('Plot Integrity Testing @unstable', () => {
+test.describe('Plot Rendering', () => {
     let sineWaveGeneratorObject;
 
     test.beforeEach(async ({ page }) => {
-        //Open a browser, navigate to the main page, and wait until all networkevents to resolve
-        await page.goto('./', { waitUntil: 'networkidle' });
+        // Open a browser, navigate to the main page, and wait until all networkevents to resolve
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
         sineWaveGeneratorObject = await createDomainObjectWithDefaults(page, { type: 'Sine Wave Generator' });
     });
 
     test('Plots do not re-request data when a plot is clicked', async ({ page }) => {
-        //Navigate to Sine Wave Generator
+        // Navigate to Sine Wave Generator
         await page.goto(sineWaveGeneratorObject.url);
-        //Click on the plot canvas
+        // Click on the plot canvas
         await page.locator('canvas').nth(1).click();
-        //No request was made to get historical data
+        // No request was made to get historical data
         const createMineFolderRequests = [];
         page.on('request', req => {
-            // eslint-disable-next-line playwright/no-conditional-in-test
             createMineFolderRequests.push(req);
         });
         expect(createMineFolderRequests.length).toEqual(0);
@@ -56,7 +55,8 @@ test.describe('Plot Integrity Testing @unstable', () => {
         await editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject);
 
         //Get pixel data from Canvas
-        const plotPixelSize = await getCanvasPixelsWithData(page);
+        const plotPixels = await getCanvasPixels(page, 'canvas');
+        const plotPixelSize = plotPixels.length;
         expect(plotPixelSize).toBeGreaterThan(0);
     });
 });
@@ -70,70 +70,19 @@ test.describe('Plot Integrity Testing @unstable', () => {
  */
 async function editSineWaveToUseInfinityOption(page, sineWaveGeneratorObject) {
     await page.goto(sineWaveGeneratorObject.url);
-    // Edit LAD table
+    // Edit SWG properties to include infinity values
     await page.locator('[title="More options"]').click();
     await page.locator('[title="Edit properties of this object."]').click();
-    // Modify the infinity option to true
-    const infinityInput = page.locator('[aria-label="Include Infinity Values"]');
-    await infinityInput.click();
+    await page.getByRole('switch', {
+        name: "Include Infinity Values"
+    }).check();
 
-    // Click OK button and wait for Navigate event
-    await Promise.all([
-        page.waitForLoadState(),
-        page.click('[aria-label="Save"]'),
-        // Wait for Save Banner to appear
-        page.waitForSelector('.c-message-banner__message')
-    ]);
+    await page.getByRole('button', {
+        name: 'Save'
+    }).click();
 
     // FIXME: Changes to SWG properties should be reflected on save, but they're not?
     // Thus, navigate away and back to the object.
     await page.goto('./#/browse/mine');
     await page.goto(sineWaveGeneratorObject.url);
-
-    await page.locator('c-progress-bar c-telemetry-table__progress-bar').waitFor({
-        state: 'hidden'
-    });
-
-    // FIXME: The progress bar disappears on series data load, not on plot render,
-    // so wait for a half a second before evaluating the canvas.
-    // eslint-disable-next-line playwright/no-wait-for-timeout
-    await page.waitForTimeout(500);
-}
-
-/**
- * @param {import('@playwright/test').Page} page
- */
-async function getCanvasPixelsWithData(page) {
-    const getTelemValuePromise = new Promise(resolve => page.exposeFunction('getCanvasValue', resolve));
-
-    await page.evaluate(() => {
-        // The document canvas is where the plot points and lines are drawn.
-        // The only way to access the canvas is using document (using page.evaluate)
-        let data;
-        let canvas;
-        let ctx;
-        canvas = document.querySelector('canvas');
-        ctx = canvas.getContext('2d');
-        data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-        const imageDataValues = Object.values(data);
-        let plotPixels = [];
-        // Each pixel consists of four values within the ImageData.data array. The for loop iterates by multiples of four.
-        // The values associated with each pixel are R (red), G (green), B (blue), and A (alpha), in that order.
-        for (let i = 0; i < imageDataValues.length;) {
-            if (imageDataValues[i] > 0) {
-                plotPixels.push({
-                    startIndex: i,
-                    endIndex: i + 3,
-                    value: `rgb(${imageDataValues[i]}, ${imageDataValues[i + 1]}, ${imageDataValues[i + 2]}, ${imageDataValues[i + 3]})`
-                });
-            }
-
-            i = i + 4;
-
-        }
-
-        window.getCanvasValue(plotPixels.length);
-    });
-
-    return getTelemValuePromise;
 }

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"
@@ -138,7 +138,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('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
+        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 the 2nd 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('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
+        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('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
+        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('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
+        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('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
+        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('list', { name: "Y Axis Properties" }).locator("h2")).toContainText("Y Axis");
+        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

@@ -25,7 +25,7 @@ Tests to verify plot tagging functionality.
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults, setRealTimeMode, setFixedTimeMode } = require('../../../../appActions');
+const { createDomainObjectWithDefaults, setRealTimeMode, setFixedTimeMode, waitForPlotsToRender } = require('../../../../appActions');
 
 test.describe('Plot Tagging', () => {
     /**
@@ -133,12 +133,9 @@ test.describe('Plot Tagging', () => {
         await expect(page.getByText('No results found')).toBeVisible();
 
         //Reload Page
-        await Promise.all([
-            page.reload(),
-            page.waitForLoadState('networkidle')
-        ]);
+        await page.reload({ waitUntil: 'domcontentloaded' });
         // wait for plots to load
-        await expect(page.locator('.js-series-data-loaded')).toBeVisible();
+        await waitForPlotsToRender(page);
 
         await page.getByText('Annotations').click();
         await expect(page.getByText('No tags to display for this item')).toBeVisible();
@@ -157,7 +154,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 }) => {

e2e/tests/visual/ladTable.visual.spec.js

@@ -0,0 +1,74 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, 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 { expect, test } = require('../../pluginFixtures');
+const percySnapshot = require('@percy/playwright');
+const { createDomainObjectWithDefaults } = require('../../appActions');
+
+test.describe('Visual - LAD Table', () => {
+    /** @type {import('@playwright/test').Locator} */
+    let ladTable;
+
+    test.beforeEach(async ({ page }) => {
+        await page.goto('./', { waitUntil: 'domcontentloaded' });
+        // Create LAD Table
+        ladTable = await createDomainObjectWithDefaults(page, {
+            type: 'LAD Table',
+            name: 'LAD Table Test'
+        });
+        // Create SWG inside of LAD Table
+        await createDomainObjectWithDefaults(page, {
+            type: 'Sine Wave Generator',
+            name: 'SWG4LAD Table Test',
+            parent: ladTable.uuid
+        });
+
+        //Modify SWG to create a really stable SWG
+        await page.locator('button[title="More options"]').click();
+
+        await page.getByRole('menuitem', { name: ' Edit Properties...' }).click();
+
+        //Forgive me, padre
+        await page.getByRole('spinbutton', { name: 'Data Rate (hz)' }).fill('0');
+        await page.getByRole('spinbutton', { name: 'Period' }).fill('0');
+
+        await page.getByRole('button', { name: 'Save' }).click();
+    });
+    test('Toggled column widths behave accordingly', async ({ page, theme }) => {
+
+        await page.goto(ladTable.url);
+        //Close panes for visual consistency
+        await page.getByTitle('Collapse Inspect Pane').click();
+        await page.getByTitle('Collapse Browse Pane').click();
+
+        await expect(page.locator('button[title="Expand Columns"]')).toBeVisible();
+
+        await percySnapshot(page, `LAD Table w/ Sine Wave Generator columns autosized (theme: ${theme})`);
+
+        await page.locator('button[title="Expand Columns"]').click();
+
+        await expect(page.locator('button[title="Autosize Columns"]')).toBeVisible();
+
+        await percySnapshot(page, `LAD Table w/ Sine Wave Generator columns expanded (theme: ${theme})`);
+
+    });
+});

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>

package.json

@@ -1,14 +1,14 @@
 {
   "name": "openmct",
-  "version": "2.2.2",
+  "version": "2.2.3-SNAPSHOT",
   "description": "The Open MCT core platform",
   "devDependencies": {
-    "@babel/eslint-parser": "7.18.9",
+    "@babel/eslint-parser": "7.19.1",
     "@braintree/sanitize-url": "6.0.2",
-    "@deploysentinel/playwright": "0.3.3",
-    "@percy/cli": "1.23.0",
+    "@deploysentinel/playwright": "0.3.4",
+    "@percy/cli": "1.24.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",
@@ -21,10 +21,10 @@
     "d3-axis": "3.0.0",
     "d3-scale": "3.3.0",
     "d3-selection": "3.0.0",
-    "eslint": "8.37.0",
+    "eslint": "8.39.0",
     "eslint-plugin-compat": "4.1.4",
     "eslint-plugin-playwright": "0.12.0",
-    "eslint-plugin-vue": "9.10.0",
+    "eslint-plugin-vue": "9.11.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "6.12.0",
     "eventemitter3": "1.2.0",
     "file-saver": "2.0.5",
@@ -32,8 +32,8 @@
     "html2canvas": "1.4.1",
     "imports-loader": "4.0.1",
     "jasmine-core": "4.5.0",
-    "karma": "6.3.20",
-    "karma-chrome-launcher": "3.1.1",
+    "karma": "6.4.2",
+    "karma-chrome-launcher": "3.2.0",
     "karma-cli": "2.0.0",
     "karma-coverage": "2.2.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
@@ -51,13 +51,13 @@
     "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",
     "resolve-url-loader": "5.0.0",
     "sanitize-html": "2.10.0",
-    "sass": "1.62.0",
+    "sass": "1.62.1",
     "sass-loader": "13.2.2",
     "sinon": "15.0.1",
     "style-loader": "3.3.2",
@@ -67,9 +67,9 @@
     "vue-eslint-parser": "9.1.0",
     "vue-loader": "15.9.8",
     "vue-template-compiler": "2.6.14",
-    "webpack": "5.79.0",
-    "webpack-cli": "5.0.0",
-    "webpack-dev-server": "4.11.1",
+    "webpack": "5.81.0",
+    "webpack-cli": "5.0.2",
+    "webpack-dev-server": "4.13.3",
     "webpack-merge": "5.8.0"
   },
   "scripts": {

src/plugins/LADTable/components/LADTable.vue

@@ -226,7 +226,10 @@ export default {
             };
         },
         toggleFixedLayout() {
-            this.configuration.isFixedLayout = !this.configuration.isFixedLayout;
+            const config = structuredClone(this.configuration);
+
+            config.isFixedLayout = !this.configuration.isFixedLayout;
+            this.ladTableConfiguration.updateConfiguration(config);
         },
         initializeViewActions() {
             if (this.configuration.isFixedLayout) {

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -21,16 +21,18 @@
 *****************************************************************************/
 
 <template>
-<component
-    :is="urlDefined ? 'a' : 'span'"
+<div
+    ref="conditionWidgetElement"
     class="c-condition-widget u-style-receiver js-style-receiver"
-    :href="url"
-    :target="url ? '_BLANK' : ''"
 >
-    <div class="c-condition-widget__label">
-        {{ label }}
-    </div>
-</component>
+    <component
+        :is="urlDefined ? 'a' : 'div'"
+        class="c-condition-widget__label-wrapper"
+        :href="url"
+    >
+        <div class="c-condition-widget__label">{{ label }}</div>
+    </component>
+</div>
 </template>
 
 <script>
@@ -40,19 +42,26 @@ export default {
     inject: ['openmct', 'domainObject'],
     data: function () {
         return {
-            conditionalLabel: '',
-            conditionSetIdentifier: null,
-            domainObjectLabel: '',
-            url: null,
-            urlDefined: false,
-            useConditionSetOutputAsLabel: false
+            conditionalLabel: ''
         };
     },
     computed: {
+        urlDefined() {
+            return this.domainObject.url?.length > 0;
+        },
+        url() {
+            return this.urlDefined ? sanitizeUrl(this.domainObject.url) : null;
+        },
+        useConditionSetOutputAsLabel() {
+            return this.conditionSetIdentifier && this.domainObject.configuration.useConditionSetOutputAsLabel;
+        },
+        conditionSetIdentifier() {
+            return this.domainObject.configuration?.objectStyles?.conditionSetIdentifier;
+        },
         label() {
             return this.useConditionSetOutputAsLabel
                 ? this.conditionalLabel
-                : this.domainObjectLabel
+                : this.domainObject.label
             ;
         }
     },
@@ -69,20 +78,11 @@ export default {
         }
     },
     mounted() {
-        this.unlisten = this.openmct.objects.observe(this.domainObject, '*', this.updateDomainObject);
-
         if (this.domainObject) {
-            this.updateDomainObject(this.domainObject);
             this.listenToConditionSetChanges();
         }
     },
     beforeDestroy() {
-        this.conditionSetIdentifier = null;
-
-        if (this.unlisten) {
-            this.unlisten();
-        }
-
         this.stopListeningToConditionSetChanges();
     },
     methods: {
@@ -121,31 +121,6 @@ export default {
             }
 
             this.conditionalLabel = latestDatum.output || '';
-        },
-        updateDomainObject(domainObject) {
-            if (this.domainObjectLabel !== domainObject.label) {
-                this.domainObjectLabel = domainObject.label;
-            }
-
-            const urlDefined = domainObject.url && domainObject.url.length > 0;
-            if (this.urlDefined !== urlDefined) {
-                this.urlDefined = urlDefined;
-            }
-
-            const url = this.urlDefined ? sanitizeUrl(domainObject.url) : null;
-            if (this.url !== url) {
-                this.url = url;
-            }
-
-            const conditionSetIdentifier = domainObject.configuration?.objectStyles?.conditionSetIdentifier;
-            if (conditionSetIdentifier && this.conditionSetIdentifier !== conditionSetIdentifier) {
-                this.conditionSetIdentifier = conditionSetIdentifier;
-            }
-
-            const useConditionSetOutputAsLabel = this.conditionSetIdentifier && domainObject.configuration.useConditionSetOutputAsLabel;
-            if (this.useConditionSetOutputAsLabel !== useConditionSetOutputAsLabel) {
-                this.useConditionSetOutputAsLabel = useConditionSetOutputAsLabel;
-            }
         }
     }
 };

src/plugins/conditionWidget/components/condition-widget.scss

@@ -26,31 +26,35 @@
     background-color: rgba($colorBodyFg, 0.1); // Give a little presence if the user hasn't defined a fill color
     border-radius: $basicCr;
     border: 1px solid transparent;
-    display: inline-block;
-    padding: $interiorMarginLg $interiorMarginLg * 2;
+    display: block;
+    max-width: max-content;
+
+    a {
+        display: block;
+        color: inherit;
+    }
 }
 
 .c-condition-widget__label {
-    padding: $interiorMargin;
+    // Either a <div> or an <a> tag
+    padding: $interiorMargin $interiorMargin * 1.5;
     text-align: center;
     white-space: normal;
 }
 
-a.c-condition-widget {
-    // Widget is conditionally made into a <a> when URL property has been defined
-    cursor: pointer !important;
-    pointer-events: inherit;
-}
-
 // Make Condition Widget expand when in a hidden frame Layout context
 // For both static and Flexible Layouts
 .c-so-view--conditionWidget.c-so-view--no-frame {
     .c-condition-widget {
         @include abs();
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0;
+        max-width: unset;
+
+        &__label-wrapper {
+            @include abs();
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     }
 
     .c-so-view__frame-controls { display: none; }

src/plugins/conditionWidget/plugin.js

@@ -36,6 +36,7 @@ export default function plugin() {
                 domainObject.configuration = {};
                 domainObject.label = 'Condition Widget';
                 domainObject.conditionalLabel = '';
+                domainObject.url = '';
             },
             form: [
                 {

src/plugins/inspectorViews/styles/FontStyleEditor.vue

@@ -19,7 +19,7 @@
             class="c-icon-button c-button--menu icon-font"
             @click.prevent.stop="showFontMenu"
         >
-            <span class="c-button__label">{{ fontTypeLable }}</span>
+            <span class="c-button__label">{{ fontTypeLabel }}</span>
         </button>
     </div>
 </div>
@@ -43,7 +43,7 @@ export default {
         }
     },
     computed: {
-        fontTypeLable() {
+        fontTypeLabel() {
             const fontType = FONTS.find(f => f.value === this.fontStyle.font);
             if (!fontType) {
                 return '??';

src/plugins/persistence/couch/CouchObjectProvider.js

@@ -24,6 +24,7 @@ import CouchDocument from "./CouchDocument";
 import CouchObjectQueue from "./CouchObjectQueue";
 import { PENDING, CONNECTED, DISCONNECTED, UNKNOWN } from "./CouchStatusIndicator";
 import { isNotebookOrAnnotationType } from '../../notebook/notebook-constants.js';
+import _ from 'lodash';
 
 const REV = "_rev";
 const ID = "_id";
@@ -42,6 +43,8 @@ class CouchObjectProvider {
         this.batchIds = [];
         this.onEventMessage = this.onEventMessage.bind(this);
         this.onEventError = this.onEventError.bind(this);
+        this.flushPersistenceQueue = _.debounce(this.flushPersistenceQueue.bind(this));
+        this.persistenceQueue = [];
     }
 
     /**
@@ -666,7 +669,11 @@ class CouchObjectProvider {
             const queued = this.objectQueue[key].dequeue();
             let document = new CouchDocument(key, queued.model);
             document.metadata.created = Date.now();
-            this.request(key, "PUT", document).then((response) => {
+
+            this.put({
+                key,
+                document
+            }).then((response) => {
                 this.#checkResponse(response, queued.intermediateResponse, key);
             }).catch(error => {
                 queued.intermediateResponse.reject(error);
@@ -677,6 +684,50 @@ class CouchObjectProvider {
         return intermediateResponse.promise;
     }
 
+    put({key, document}) {
+        return new Promise((resolve, reject) => {
+            this.persistenceQueue.push({
+                key,
+                document,
+                resolve,
+                reject
+            });
+            this.flushPersistenceQueue();
+        });
+
+    }
+
+    async flushPersistenceQueue() {
+        if (this.persistenceQueue.length > 1) {
+            const batch = {
+                docs: this.persistenceQueue.map((queued) => queued.document)
+            };
+            const response = await this.request("_bulk_docs", "POST", batch);
+            response.forEach((responseMetadatum) => {
+                const queued = this.persistenceQueue.find((queuedMetadatum) => queuedMetadatum.key === responseMetadatum.id);
+                if (responseMetadatum.ok) {
+                    queued.resolve(responseMetadatum);
+                } else {
+                    queued.reject(responseMetadatum);
+                }
+            });
+        } else if (this.persistenceQueue.length === 1) {
+            const {
+                key,
+                document,
+                resolve,
+                reject
+            } = this.persistenceQueue[0];
+
+            this.request(key, "PUT", document)
+                .then(resolve)
+                .catch(reject);
+
+        }
+
+        this.persistenceQueue = [];
+    }
+
     /**
      * @private
      */

src/plugins/persistence/couch/couchdb-compose.yaml

@@ -1,10 +1,9 @@
 version: "3"
 services:
   couchdb:
-    image: couchdb:${COUCHDB_IMAGE_TAG:-3.2.1}
+    image: couchdb:${COUCHDB_IMAGE_TAG:-3.3.2}
     ports:
     - "5984:5984"
-    - "5986:5986"
     volumes:
     - couchdb:/opt/couchdb/data
     environment:

src/plugins/persistence/couch/setup-couchdb.sh

@@ -1,57 +1,25 @@
 #!/bin/bash -e
 
-# Do a couple checks for environment variables we expect to have a value.
-
-if [ -z "${OPENMCT_DATABASE_NAME}" ] ; then
-    echo "OPENMCT_DATABASE_NAME has no value" 1>&2
-    exit 1
-fi
-
-if [ -z "${COUCH_ADMIN_USER}" ] ; then
-    echo "COUCH_ADMIN_USER has no value" 1>&2
-    exit 1
-fi
-
-if [ -z "${COUCH_BASE_LOCAL}" ] ; then
-    echo "COUCH_BASE_LOCAL has no value" 1>&2
-    exit 1
-fi
-
-# Come up with what we'll be providing to curl's -u option. Always supply the username from the environment,
-# and optionally supply the password from the environment, if it has a value.
-CURL_USERPASS_ARG="${COUCH_ADMIN_USER}"
-if [ "${COUCH_ADMIN_PASSWORD}" ] ; then
-    CURL_USERPASS_ARG+=":${COUCH_ADMIN_PASSWORD}"
-fi
-
-system_tables_exist () {
-    resource_exists $COUCH_BASE_LOCAL/_users
-}
-
-create_users_db () {
-    curl -su "${CURL_USERPASS_ARG}" -X PUT $COUCH_BASE_LOCAL/_users
-}
-
-create_replicator_db () {
-    curl -su "${CURL_USERPASS_ARG}" -X PUT $COUCH_BASE_LOCAL/_replicator
-}
-
-setup_system_tables () {
-    users_db_response=$(create_users_db)
-    if [ "{\"ok\":true}" == "${users_db_response}" ]; then
-        echo Successfully created users db
-        replicator_db_response=$(create_replicator_db)
-        if [ "{\"ok\":true}" == "${replicator_db_response}" ]; then
-            echo Successfully created replicator DB
-        else
-            echo Unable to create replicator DB
-        fi
-    else
-        echo Unable to create users db
+# Check if required environment variables have values, exit if not.
+check_env_var() {
+    if [ -z "$1" ]; then
+        echo "$2 has no value" 1>&2
+        exit 1
     fi
 }
 
-resource_exists () {
+check_env_var "${OPENMCT_DATABASE_NAME}" "OPENMCT_DATABASE_NAME"
+check_env_var "${COUCH_ADMIN_USER}" "COUCH_ADMIN_USER"
+check_env_var "${COUCH_BASE_LOCAL}" "COUCH_BASE_LOCAL"
+
+# Construct curl's -u option value based on COUCH_ADMIN_USER and COUCH_ADMIN_PASSWORD environment variables.
+CURL_USERPASS_ARG="${COUCH_ADMIN_USER}"
+if [ "${COUCH_ADMIN_PASSWORD}" ]; then
+    CURL_USERPASS_ARG+=":${COUCH_ADMIN_PASSWORD}"
+fi
+
+# Functions
+resource_exists() {
     response=$(curl -u "${CURL_USERPASS_ARG}" -s -o /dev/null -I -w "%{http_code}" $1);
     if [ "200" == "${response}" ]; then
         echo "TRUE"
@@ -60,16 +28,16 @@ resource_exists () {
     fi
 }
 
-db_exists () {
+db_exists() {
     resource_exists $COUCH_BASE_LOCAL/$OPENMCT_DATABASE_NAME
 }
 
-create_db () {
+create_db() {
     response=$(curl -su "${CURL_USERPASS_ARG}" -XPUT $COUCH_BASE_LOCAL/$OPENMCT_DATABASE_NAME);
     echo $response
 }
 
-admin_user_exists () {
+admin_user_exists() {
     response=$(curl -su "${CURL_USERPASS_ARG}" -o /dev/null -I -w "%{http_code}" $COUCH_BASE_LOCAL/_node/$COUCH_NODE_NAME/_config/admins/$COUCH_ADMIN_USER);
     if [ "200" == "${response}" ]; then
         echo "TRUE"
@@ -78,7 +46,7 @@ admin_user_exists () {
     fi
 }
 
-create_admin_user () {
+create_admin_user() {
     echo Creating admin user
     curl -X PUT $COUCH_BASE_LOCAL/_node/$COUCH_NODE_NAME/_config/admins/$COUCH_ADMIN_USER -d \'"$COUCH_ADMIN_PASSWORD"\'
 }
@@ -87,7 +55,7 @@ is_cors_enabled() {
     resource_exists $COUCH_BASE_LOCAL/_node/$COUCH_NODE_NAME/_config/httpd/enable_cors
 }
 
-enable_cors () {
+enable_cors() {
     curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT $COUCH_BASE_LOCAL/_node/$COUCH_NODE_NAME/_config/httpd/enable_cors -d '"true"'
     curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT $COUCH_BASE_LOCAL/_node/$COUCH_NODE_NAME/_config/cors/origins -d '"*"'
     curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT $COUCH_BASE_LOCAL/_node/$COUCH_NODE_NAME/_config/cors/credentials -d '"true"'
@@ -95,6 +63,36 @@ enable_cors () {
     curl -su "${CURL_USERPASS_ARG}" -o /dev/null -X PUT $COUCH_BASE_LOCAL/_node/$COUCH_NODE_NAME/_config/cors/headers -d '"accept, authorization, content-type, origin, referer, x-csrf-token"'
 }
 
+update_db_permissions() {
+    local db_name=$1
+    echo "Updating ${db_name} database permissions"
+    response=$(curl -su "${CURL_USERPASS_ARG}" --location \
+        --request PUT $COUCH_BASE_LOCAL/$db_name/_security \
+        --header 'Content-Type: application/json' \
+        --data-raw '{ "admins": {"roles": []},"members": {"roles": []}}')
+    if [ "{\"ok\":true}" == "${response}" ]; then
+        echo "Database permissions successfully updated"
+    else
+        echo "Database permissions not updated"
+    fi
+}
+
+create_system_tables() {
+    local system_tables=("_users" "_replicator")
+    for table in "${system_tables[@]}"; do
+        echo "Creating $table database"
+        response=$(curl -su "${CURL_USERPASS_ARG}" -X PUT $COUCH_BASE_LOCAL/$table)
+        if [ "{\"ok\":true}" == "${response}" ]; then
+            echo "Successfully created $table database"
+        else
+            echo "Unable to create $table database"
+        fi
+    done
+}
+
+# Main script execution
+
+# Check if the admin user exists; if not, create it.
 if [ "$(admin_user_exists)" == "FALSE" ]; then
     echo "Admin user does not exist, creating..."
     create_admin_user
@@ -102,40 +100,32 @@ else
     echo "Admin user exists"
 fi
 
-if [ "TRUE" == $(system_tables_exist) ]; then
-    echo System tables exist, skipping creation
+# Check if system tables exist; if not, create them.
+system_tables_exist=$(resource_exists $COUCH_BASE_LOCAL/_users)
+if [ "TRUE" == "${system_tables_exist}" ]; then
+    echo "System tables exist, skipping creation"
 else
-    echo Is fresh install, creating system tables
-    setup_system_tables
+    echo "Fresh install, creating system tables"
+    create_system_tables
 fi
 
+# Check if the database exists; if not, create it.
 if [ "FALSE" == $(db_exists) ]; then
     response=$(create_db)
     if [ "{\"ok\":true}" == "${response}" ]; then
-        echo Database successfully created
+        echo "Database successfully created"
     else
-        echo Database creation failed
+        echo "Database creation failed"
     fi
 else
-    echo Database already exists, nothing to do
+    echo "Database already exists, nothing to do"
 fi
 
-echo "Updating _replicator database permissions"
-response=$(curl -su "${CURL_USERPASS_ARG}" --location --request PUT $COUCH_BASE_LOCAL/_replicator/_security --header 'Content-Type: application/json' --data-raw '{ "admins": {"roles": []},"members": {"roles": []}}');
-if [ "{\"ok\":true}" == "${response}" ]; then
-    echo "Database permissions successfully updated"
-else
-    echo "Database permissions not updated"
-fi
-
-echo "Updating ${OPENMCT_DATABASE_NAME} database permissions"
-response=$(curl -su "${CURL_USERPASS_ARG}" --location --request PUT $COUCH_BASE_LOCAL/$OPENMCT_DATABASE_NAME/_security --header 'Content-Type: application/json' --data-raw '{ "admins": {"roles": []},"members": {"roles": []}}');
-if [ "{\"ok\":true}" == "${response}" ]; then
-    echo "Database permissions successfully updated"
-else
-    echo "Database permissions not updated"
-fi
+# Update _replicator and OPENMCT_DATABASE_NAME database permissions
+update_db_permissions "_replicator"
+update_db_permissions "${OPENMCT_DATABASE_NAME}"
 
+# Check if CORS is enabled; if not, enable it.
 if [ "FALSE" == $(is_cors_enabled) ]; then
     echo "Enabling CORS"
     enable_cors

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/components/ObjectView.vue

@@ -74,7 +74,7 @@ export default {
             return this.domainObject && (this.currentObjectPath || this.objectPath);
         },
         objectFontStyle() {
-            return this.domainObject && this.domainObject.configuration && this.domainObject.configuration.fontStyle;
+            return this.domainObject?.configuration?.fontStyle;
         },
         fontSize() {
             return this.objectFontStyle ? this.objectFontStyle.fontSize : this.layoutFontSize;
@@ -287,6 +287,8 @@ export default {
 
             this.$nextTick(() => {
                 this.updateStyle(this.styleRuleManager?.currentStyle);
+                this.setFontSize(this.fontSize);
+                this.setFont(this.font);
                 this.getActionCollection();
             });
         },
@@ -329,9 +331,9 @@ export default {
         },
         initObjectStyles() {
             if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration && this.domainObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this), true);
+                this.styleRuleManager = new StyleRuleManager((this.domainObject.configuration?.objectStyles), this.openmct, this.updateStyle.bind(this), true);
             } else {
-                this.styleRuleManager.updateObjectStyleConfig(this.domainObject.configuration && this.domainObject.configuration.objectStyles);
+                this.styleRuleManager.updateObjectStyleConfig(this.domainObject.configuration?.objectStyles);
             }
 
             if (this.stopListeningStyles) {
@@ -343,9 +345,6 @@ export default {
                 this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
             });
 
-            this.setFontSize(this.fontSize);
-            this.setFont(this.font);
-
             this.stopListeningFontStyles = this.openmct.objects.observe(this.domainObject, 'configuration.fontStyle', (newFontStyle) => {
                 this.setFontSize(newFontStyle.fontSize);
                 this.setFont(newFontStyle.font);

src/ui/layout/BrowseBar.vue

@@ -51,6 +51,7 @@
                 v-for="(item, index) in statusBarItems"
                 :key="index"
                 class="c-button"
+                :title="item.name"
                 :class="item.cssClass"
                 @click="item.onItemClicked"
             >
@@ -70,6 +71,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 +82,7 @@
                 <button
                     class="c-button--menu c-button--major icon-save"
                     title="Save"
+                    aria-label="Save"
                     @click.stop="toggleSaveMenu"
                 ></button>
                 <div

src/ui/layout/pane.vue

@@ -17,6 +17,7 @@
         <button
             v-if="isCollapsable"
             class="l-pane__collapse-button c-icon-button"
+            :title="collapseTitle"
             @click="toggleCollapse"
         ></button>
     </div>
@@ -69,6 +70,9 @@ export default {
         isCollapsable() {
             return this.hideParam?.length > 0;
         },
+        collapseTitle() {
+            return `Collapse ${this.label} Pane`;
+        },
         localStorageKey() {
             if (!this.label) {
                 return null;