[CI] Stabilize visual tests, remove appAction, and update pane buttons (#7033)

* Add a VISUAL_URL constant and remove all vestiges of hide inspector and tree

* hide timer and add concurrency

* turn off concurrency

* factor out old appAction

* Add expand button to panes

* remove old slow annotations

* fix fault

* update domcontentloaded

* missed refactor

* driveby: setTimeBounds private

* add comments to the percyCSS

* suggest MISSION_TIME

* more notes

* regen

* clean up test

* driveby: clean up order

* restructure

* add new suite now that i'ts hidden

* use mission time everywhere possible

* driveby

* rerun generatedata

* comments

* lintfix

e2e/.percy.ci.yml

@@ -3,15 +3,22 @@ snapshot:
   widths: [1024]
   min-height: 1440 # px
   percyCSS: |
+    /* Clock indicator... your days are numbered  */
     .t-indicator-clock > .label {
       opacity: 0 !important;
     }
     .c-input--datetime {
       opacity: 0 !important;
     }
+    /* Timer object text */
+    .c-ne__time-and-creator {
+      opacity: 0 !important;
+    }
+    /* Time Conductor ticks */
     div.c-conductor-axis.c-conductor__ticks > svg {
       opacity: 0 !important;
     }
-    div.c-inspector__properties.c-inspect-properties > ul > li:nth-child(3) {
+    /* Embedded timestamp in notebooks */
-      display: none !important;
+    .c-ne__embed__time{
-    }
+      opacity: 0 !important;
+    }

e2e/.percy.nightly.yml

@@ -3,15 +3,22 @@ snapshot:
   widths: [1024, 2000]
   min-height: 1440 # px
   percyCSS: |
+    /* Clock indicator... your days are numbered  */
     .t-indicator-clock > .label {
       opacity: 0 !important;
     }
     .c-input--datetime {
       opacity: 0 !important;
     }
+    /* Timer object text */
+    .c-ne__time-and-creator {
+      opacity: 0 !important;
+    }
+    /* Time Conductor ticks */
     div.c-conductor-axis.c-conductor__ticks > svg {
       opacity: 0 !important;
     }
-    div.c-inspector__properties.c-inspect-properties > ul > li:nth-child(3) {
+    /* Embedded timestamp in notebooks */
-      display: none !important;
+    .c-ne__embed__time{
-    }
+      opacity: 0 !important;
+    }

e2e/README.md

@@ -373,7 +373,7 @@ By adhering to this principle, we can create tests that are both robust and refl
 
 4. **Control Variability**: Account for variations inherent in working with time-based telemetry and clocks.
   - Utilize `percyCSS` to ignore time-based elements. For more details, consult our [percyCSS file](./.percy.ci.yml).
-  - Use Open MCT's fixed-time mode.
+  - Use Open MCT's fixed-time mode unless explicitly testing realtime clock
   - Employ the `createExampleTelemetryObject` appAction to source telemetry and specify a `name` to avoid autogenerated names.
 
 5. **Hide the Tree and Inspector**: Generally, your test will not require comparisons involving the tree and inspector. These aspects are covered in component-specific tests (explained below). To exclude them from the comparison by default, navigate to the root of the main view with the tree and inspector hidden:
@@ -387,6 +387,16 @@ By adhering to this principle, we can create tests that are both robust and refl
     ```
     - Note: The `scope` variable can be any valid CSS selector.
 
+7. **Write many `percySnapshot` commands in a single test**: In line with our approach to longer functional tests, we recommend that many test percySnapshots are taken in a single test. For instance:
+    ```js
+    //<Some interesting state>
+    await percySnapshot(page, `Before object expanded (theme: ${theme})`);
+    //<Click on object>
+    await percySnapshot(page, `object expanded (theme: ${theme})`);
+    //Select from object
+    await percySnapshot(page, `object selected (theme: ${theme})`)
+    ```
+
 #### How to write a great network test
 
 - Where possible, it is best to mock out third-party network activity to ensure we are testing application behavior of Open MCT.

e2e/appActions.js

@@ -228,9 +228,6 @@ async function createPlanFromJSON(page, { name, json, parent = 'mine' }) {
  */
 async function createExampleTelemetryObject(page, parent = 'mine') {
   const parentUrl = await getHashUrlToDomainObject(page, parent);
-  // TODO: Make this field even more accessible
-  const name = 'VIPER Rover Heading';
-  const nameInputLocator = page.getByRole('dialog').locator('input[type="text"]');
 
   await page.goto(`${parentUrl}`);
 
@@ -238,7 +235,8 @@ async function createExampleTelemetryObject(page, parent = 'mine') {
 
   await page.locator('li:has-text("Sine Wave Generator")').click();
 
-  await nameInputLocator.fill(name);
+  const name = 'VIPER Rover Heading';
+  await page.getByRole('dialog').locator('input[type="text"]').fill(name);
 
   // Fill out the fields with default values
   await page.getByRole('spinbutton', { name: 'Period' }).fill('10');
@@ -520,6 +518,7 @@ async function setIndependentTimeConductorBounds(page, startDate, endDate) {
 
 /**
  * Set the bounds of the visible conductor in fixed time mode
+ * @private
  * @param {import('@playwright/test').Page} page
  * @param {string} startDate
  * @param {string} endDate
@@ -544,18 +543,6 @@ async function setTimeBounds(page, startDate, endDate) {
   }
 }
 
-/**
- * Selects an inspector tab based on the provided tab name
- *
- * @param {import('@playwright/test').Page} page
- * @param {String} name the name of the tab
- */
-async function selectInspectorTab(page, name) {
-  const inspectorTabs = page.getByRole('tablist');
-  const inspectorTab = inspectorTabs.getByTitle(name);
-  await inspectorTab.click();
-}
-
 /**
  * Waits and asserts that all plot series data on the page
  * is loaded and drawn.
@@ -674,7 +661,6 @@ module.exports = {
   setEndOffset,
   setTimeConductorBounds,
   setIndependentTimeConductorBounds,
-  selectInspectorTab,
   waitForPlotsToRender,
   renameObjectFromContextMenu
 };

e2e/baseFixtures.js

@@ -81,7 +81,7 @@ exports.test = base.test.extend({
    * ```js
    * test.use({
    *   clockOptions: {
-   *       now: 0,
+   *       now: MISSION_TIME,
    *       shouldAdvanceTime: true
    * ```
    * If clockOptions are provided, will override the default clock with fake timers provided by SinonJS.

e2e/constants.js

@@ -1,3 +1,4 @@
+/* eslint-disable prettier/prettier */
 /**
  * Constants which may be used across all e2e tests.
  */
@@ -7,3 +8,11 @@
  * - Used for overriding the browser clock in tests.
  */
 export const MISSION_TIME = 1732413600000; // Saturday, November 23, 2024 6:00:00 PM GMT-08:00 (Thanksgiving Dinner Time)
+
+/**
+ * URL Constants
+ * - This is the URL that the browser will be directed to when running visual tests. This URL 
+ *    - hides the tree and inspector to prevent visual noise
+ *    - sets the time bounds to a fixed range
+ */
+export const VISUAL_URL = './#/browse/mine?tc.mode=fixed&tc.startBound=1693592063607&tc.endBound=1693593893607&tc.timeSystem=utc&view=grid&hideInspector=true&hideTree=true';

e2e/helper/notebookUtils.js

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-const { selectInspectorTab, createDomainObjectWithDefaults } = require('../appActions');
+const { createDomainObjectWithDefaults } = require('../appActions');
 
 const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area';
 const CUSTOM_NAME = 'CUSTOM_NAME';
@@ -111,7 +111,7 @@ async function createNotebookAndEntry(page, iterations = 1) {
  */
 async function createNotebookEntryAndTags(page, iterations = 1) {
   const notebook = await createNotebookAndEntry(page, iterations);
-  await selectInspectorTab(page, 'Annotations');
+  await page.getByRole('tab', { name: 'Annotations' }).click();
 
   for (let iteration = 0; iteration < iterations; iteration++) {
     // Hover and click "Add Tag" button

e2e/helper/planningUtils.js

@@ -99,3 +99,14 @@ export async function setBoundsToSpanAllActivities(page, planJson, planObjectUrl
     `${planObjectUrl}?tc.mode=fixed&tc.startBound=${start}&tc.endBound=${end}&tc.timeSystem=utc&view=plan.view`
   );
 }
+
+/**
+ * Uses the Open MCT API to set the status of a plan to 'draft'.
+ * @param {import('@playwright/test').Page} page
+ * @param {import('../../appActions').CreatedObjectInfo} plan
+ */
+export async function setDraftStatusForPlan(page, plan) {
+  await page.evaluate(async (planObject) => {
+    await window.openmct.status.set(planObject.uuid, 'draft');
+  }, plan);
+}

e2e/test-data/overlay_plot_storage.json

@@ -6,21 +6,17 @@
       "localStorage": [
         {
           "name": "mct",
-          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557},\"8c863964-4640-4db1-8a98-0e546c3c271d\":{\"identifier\":{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1678741862011,\"location\":\"mine\",\"created\":1678741839461,\"persisted\":1678741862011},\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\":{\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"identifier\":{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"},\"telemetry\":{\"period\":\"1\",\"amplitude\":\"1\",\"offset\":\"0\",\"dataRateInHz\":\"1\",\"phase\":\"0\",\"randomness\":\"0\",\"loadDelay\":\"0\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741852553,\"location\":\"mine\",\"created\":1678741852553,\"persisted\":1678741852553}}"
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"namespace\":\"\"},{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602540,\"created\":1732413600760,\"persisted\":1732413602540},\"20e7d5fe-9cf8-4099-8957-9453a8954c67\":{\"identifier\":{\"key\":\"20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1732413603960,\"location\":\"mine\",\"created\":1732413601820,\"persisted\":1732413603960},\"2db521a9-996d-4d04-a171-93f4c5c220af\":{\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"identifier\":{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"staleness\":false},\"modified\":1732413602540,\"location\":\"mine\",\"created\":1732413602540,\"persisted\":1732413602540}}"
+        },
+        {
+          "name": "mct-recent-objects",
+          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"staleness\":false},\"modified\":1732413602540,\"location\":\"mine\",\"created\":1732413602540,\"persisted\":1732413602540},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"namespace\":\"\"},{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602540,\"created\":1732413600760,\"persisted\":1732413602540},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/2db521a9-996d-4d04-a171-93f4c5c220af\",\"domainObject\":{\"identifier\":{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":0,\"infinityValues\":false,\"staleness\":false},\"modified\":1732413602540,\"location\":\"mine\",\"created\":1732413602540,\"persisted\":1732413602540}},{\"objectPath\":[{\"identifier\":{\"key\":\"20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1732413603960,\"location\":\"mine\",\"created\":1732413601820,\"persisted\":1732413603960},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"namespace\":\"\"},{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602540,\"created\":1732413600760,\"persisted\":1732413602540},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"domainObject\":{\"identifier\":{\"key\":\"20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1732413603960,\"location\":\"mine\",\"created\":1732413601820,\"persisted\":1732413603960}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"namespace\":\"\"},{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602540,\"created\":1732413600760,\"persisted\":1732413602540},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"20e7d5fe-9cf8-4099-8957-9453a8954c67\",\"namespace\":\"\"},{\"key\":\"2db521a9-996d-4d04-a171-93f4c5c220af\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413602540,\"created\":1732413600760,\"persisted\":1732413602540}}]"
         },
         {
           "name": "mct-tree-expanded",
           "value": "[]"
-        },
-        {
-          "name": "tcHistory",
-          "value": "{\"utc\":[{\"start\":1678740030748,\"end\":1678741830748}]}"
-        },
-        {
-          "name": "mct-recent-objects",
-          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1678741860389,\"location\":\"mine\",\"created\":1678741839461,\"persisted\":1678741860389},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/8c863964-4640-4db1-8a98-0e546c3c271d\",\"domainObject\":{\"identifier\":{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with Telemetry Object\\nchrome\",\"modified\":1678741860389,\"location\":\"mine\",\"created\":1678741839461,\"persisted\":1678741860389}},{\"objectPath\":[{\"identifier\":{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":\"1\",\"amplitude\":\"1\",\"offset\":\"0\",\"dataRateInHz\":\"1\",\"phase\":\"0\",\"randomness\":\"0\",\"loadDelay\":\"0\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741852553,\"location\":\"mine\",\"created\":1678741852553,\"persisted\":1678741852553},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"domainObject\":{\"identifier\":{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":\"1\",\"amplitude\":\"1\",\"offset\":\"0\",\"dataRateInHz\":\"1\",\"phase\":\"0\",\"randomness\":\"0\",\"loadDelay\":\"0\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741852553,\"location\":\"mine\",\"created\":1678741852553,\"persisted\":1678741852553}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"8c863964-4640-4db1-8a98-0e546c3c271d\",\"namespace\":\"\"},{\"key\":\"f5c7e86c-a5b4-4c6c-9038-9cf03cd9a99e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741852556,\"created\":1678741830859,\"persisted\":1678741852557}}]"
         }
       ]
     }
   ]
-}
+}

e2e/test-data/overlay_plot_with_delay_storage.json

@@ -6,21 +6,13 @@
       "localStorage": [
         {
           "name": "mct",
-          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987},\"db9fb115-7a72-4c45-81a4-1f6021156b4e\":{\"identifier\":{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1678741904378,\"location\":\"mine\",\"created\":1678741890983,\"persisted\":1678741904385},\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\":{\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"identifier\":{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"},\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741896800,\"location\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"created\":1678741896800,\"persisted\":1678741896800}}"
+          "value": "{\"mine\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"98161570-a735-4a50-9c75-11b346ad3789\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1732413601340,\"created\":1732413600580,\"persisted\":1732413601340},\"98161570-a735-4a50-9c75-11b346ad3789\":{\"identifier\":{\"key\":\"98161570-a735-4a50-9c75-11b346ad3789\",\"namespace\":\"\"},\"name\":\"Overlay Plot with 5s Delay\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"477e60bb-4cba-4603-b4c9-2281ccf7e054\",\"namespace\":\"\"}],\"configuration\":{\"series\":[{\"identifier\":{\"key\":\"477e60bb-4cba-4603-b4c9-2281ccf7e054\",\"namespace\":\"\"}}]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1732413602660,\"location\":\"mine\",\"created\":1732413601340,\"persisted\":1732413602660},\"477e60bb-4cba-4603-b4c9-2281ccf7e054\":{\"identifier\":{\"key\":\"477e60bb-4cba-4603-b4c9-2281ccf7e054\",\"namespace\":\"\"},\"name\":\"VIPER Rover Heading\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":5000,\"infinityValues\":false,\"staleness\":false},\"modified\":1732413602520,\"location\":\"98161570-a735-4a50-9c75-11b346ad3789\",\"created\":1732413602040,\"persisted\":1732413602520}}"
         },
         {
           "name": "mct-tree-expanded",
           "value": "[]"
-        },
-        {
-          "name": "tcHistory",
-          "value": "{\"utc\":[{\"start\":1678740085436,\"end\":1678741885436}]}"
-        },
-        {
-          "name": "mct-recent-objects",
-          "value": "[{\"objectPath\":[{\"identifier\":{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1678741896803,\"location\":\"mine\",\"created\":1678741890983,\"persisted\":1678741896803},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"domainObject\":{\"identifier\":{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1678741896803,\"location\":\"mine\",\"created\":1678741890983,\"persisted\":1678741896803}},{\"objectPath\":[{\"identifier\":{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"},\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741896800,\"location\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"created\":1678741896800,\"persisted\":1678741896800},{\"identifier\":{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"},\"name\":\"Overlay Plot with Telemetry Object\",\"type\":\"telemetry.plot.overlay\",\"composition\":[{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"}],\"configuration\":{\"series\":[]},\"notes\":\"framework/generateLocalStorageData.e2e.spec.js\\nGenerate Visual Test Data @localStorage @generatedata\\nGenerate Overlay Plot with 5s Delay\\nchrome\",\"modified\":1678741896803,\"location\":\"mine\",\"created\":1678741890983,\"persisted\":1678741896803},{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine/db9fb115-7a72-4c45-81a4-1f6021156b4e/4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"domainObject\":{\"identifier\":{\"key\":\"4c0b2c16-5f28-4906-abd3-befd16e5a77e\",\"namespace\":\"\"},\"name\":\"Unnamed Sine Wave Generator\",\"type\":\"generator\",\"telemetry\":{\"period\":10,\"amplitude\":1,\"offset\":0,\"dataRateInHz\":1,\"phase\":0,\"randomness\":0,\"loadDelay\":\"5000\",\"infinityValues\":false,\"staleness\":false},\"modified\":1678741896800,\"location\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"created\":1678741896800,\"persisted\":1678741896800}},{\"objectPath\":[{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987},{\"identifier\":{\"key\":\"ROOT\",\"namespace\":\"\"},\"name\":\"Open MCT\",\"type\":\"root\",\"composition\":[{\"key\":\"mine\",\"namespace\":\"\"}]}],\"navigationPath\":\"/browse/mine\",\"domainObject\":{\"identifier\":{\"key\":\"mine\",\"namespace\":\"\"},\"name\":\"My Items\",\"type\":\"folder\",\"composition\":[{\"key\":\"db9fb115-7a72-4c45-81a4-1f6021156b4e\",\"namespace\":\"\"}],\"location\":\"ROOT\",\"modified\":1678741890986,\"created\":1678741885545,\"persisted\":1678741890987}}]"
         }
       ]
     }
   ]
-}
+}

e2e/tests/framework/generateLocalStorageData.e2e.spec.js

@@ -35,8 +35,7 @@
 const { test, expect } = require('../../pluginFixtures.js');
 const {
   createDomainObjectWithDefaults,
-  createExampleTelemetryObject,
+  createExampleTelemetryObject
-  selectInspectorTab
 } = require('../../appActions.js');
 const { MISSION_TIME } = require('../../constants.js');
 const path = require('path');
@@ -91,7 +90,7 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
 
     // TODO: Flesh Out Assertions against created Objects
     await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlotName);
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
     await page
       .getByRole('list', { name: 'Plot Series Properties' })
       .locator('span')
@@ -122,7 +121,7 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
     ).toBeVisible();
 
     await page.goto(exampleTelemetry.url);
-    await selectInspectorTab(page, 'Properties');
+    await page.getByRole('tab', { name: 'Properties' }).click();
 
     // TODO: assert Example Telemetry property values
     // await page.goto(exampleTelemetry.url);
@@ -181,7 +180,7 @@ test.describe('Validate Overlay Plot with Telemetry Object @localStorage @genera
     await page.locator('a').filter({ hasText: overlayPlotName }).click();
     // TODO: Flesh Out Assertions against created Objects
     await expect(page.locator('.l-browse-bar__object-name')).toContainText(overlayPlotName);
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
     await page
       .getByRole('list', { name: 'Plot Series Properties' })
       .locator('span')
@@ -227,7 +226,7 @@ test.describe('Validate Overlay Plot with 5s Delay Telemetry Object @localStorag
     await page.locator('a').filter({ hasText: plotName }).click();
     // TODO: Flesh Out Assertions against created Objects
     await expect(page.locator('.l-browse-bar__object-name')).toContainText(plotName);
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
     await page
       .getByRole('list', { name: 'Plot Series Properties' })
       .locator('span')

e2e/tests/functional/planning/ganttChart.e2e.spec.js

@@ -20,11 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 const { test, expect } = require('../../../pluginFixtures');
-const {
+const { createPlanFromJSON, createDomainObjectWithDefaults } = require('../../../appActions');
-  createPlanFromJSON,
-  createDomainObjectWithDefaults,
-  selectInspectorTab
-} = require('../../../appActions');
 const testPlan1 = require('../../../test-data/examplePlans/ExamplePlan_Small1.json');
 const testPlan2 = require('../../../test-data/examplePlans/ExamplePlan_Small2.json');
 const {
@@ -80,7 +76,7 @@ test.describe('Gantt Chart', () => {
       .locator('g')
       .filter({ hasText: new RegExp(activity.name) })
       .click();
-    await selectInspectorTab(page, 'Activity');
+    await page.getByRole('tab', { name: 'Activity' }).click();
 
     const startDateTime = await page
       .locator(

e2e/tests/functional/plugins/faultManagement/faultManagement.e2e.spec.js

@@ -22,7 +22,6 @@
 
 const { test, expect } = require('../../../../pluginFixtures');
 const utils = require('../../../../helper/faultUtils');
-const { selectInspectorTab } = require('../../../../appActions');
 
 test.describe('The Fault Management Plugin using example faults', () => {
   test.beforeEach(async ({ page }) => {
@@ -41,7 +40,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
   }) => {
     await utils.selectFaultItem(page, 1);
 
-    await selectInspectorTab(page, 'Fault Management Configuration');
+    await page.getByRole('tab', { name: 'Fault Management Configuration' }).click();
     const selectedFaultName = await page
       .locator('.c-fault-mgmt__list.is-selected .c-fault-mgmt__list-faultname')
       .textContent();
@@ -66,7 +65,7 @@ test.describe('The Fault Management Plugin using example faults', () => {
     );
     expect.soft(await selectedRows.count()).toEqual(2);
 
-    await selectInspectorTab(page, 'Fault Management Configuration');
+    await page.getByRole('tab', { name: 'Fault Management Configuration' }).click();
     const firstSelectedFaultName = await selectedRows.nth(0).textContent();
     const secondSelectedFaultName = await selectedRows.nth(1).textContent();
     const firstNameInInspectorCount = await page

e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js

@@ -233,7 +233,6 @@ test.describe('Example Imagery Object', () => {
   });
 
   test('Can use the reset button to reset the image @unstable', async ({ page }, testInfo) => {
-    test.slow(testInfo.project === 'chrome-beta', 'This test is slow in chrome-beta');
     // Get initial image dimensions
     const initialBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
 

e2e/tests/functional/plugins/lad/lad.e2e.spec.js

@@ -25,8 +25,7 @@ const {
   createDomainObjectWithDefaults,
   setStartOffset,
   setFixedTimeMode,
-  setRealTimeMode,
+  setRealTimeMode
-  selectInspectorTab
 } = require('../../../../appActions');
 
 test.describe('Testing LAD table configuration', () => {
@@ -57,7 +56,7 @@ test.describe('Testing LAD table configuration', () => {
     // // Add the Sine Wave Generator to the LAD table and save changes
     // await page.dragAndDrop('role=treeitem[name=/Test Sine Wave Generator/]', '.c-lad-table-wrapper');
     // select configuration tab in inspector
-    await selectInspectorTab(page, 'LAD Table Configuration');
+    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // make sure headers are visible initially
     await expect(page.getByRole('cell', { name: 'Timestamp' })).toBeVisible();
@@ -87,7 +86,7 @@ test.describe('Testing LAD table configuration', () => {
 
     // Edit LAD table
     await page.locator('[title="Edit"]').click();
-    await selectInspectorTab(page, 'LAD Table Configuration');
+    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // show timestamp column
     await page.getByLabel('Timestamp').check();
@@ -105,7 +104,7 @@ test.describe('Testing LAD table configuration', () => {
 
     // Edit LAD table
     await page.locator('[title="Edit"]').click();
-    await selectInspectorTab(page, 'LAD Table Configuration');
+    await page.getByRole('tab', { name: 'LAD Table Configuration' }).click();
 
     // show units and type columns
     await page.getByLabel('Units').check();

e2e/tests/functional/plugins/notebook/tags.e2e.spec.js

@@ -25,7 +25,7 @@ This test suite is dedicated to tests which verify notebook tag functionality.
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
 const {
   enterTextEntry,
   createNotebookAndEntry,
@@ -40,7 +40,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
   test('Can load tags', async ({ page }) => {
     await createNotebookAndEntry(page);
 
-    await selectInspectorTab(page, 'Annotations');
+    await page.getByRole('tab', { name: 'Annotations' }).click();
 
     await page.locator('button:has-text("Add Tag")').click();
 
@@ -65,7 +65,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
   });
   test('Can add tags with blank entry', async ({ page }) => {
     await createDomainObjectWithDefaults(page, { type: 'Notebook' });
-    await selectInspectorTab(page, 'Annotations');
+    await page.getByRole('tab', { name: 'Annotations' }).click();
 
     await enterTextEntry(page, '');
     await page.hover(`button:has-text("Add Tag")`);
@@ -81,7 +81,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
   test('Can cancel adding tags', async ({ page }) => {
     await createNotebookAndEntry(page);
 
-    await selectInspectorTab(page, 'Annotations');
+    await page.getByRole('tab', { name: 'Annotations' }).click();
 
     // Test canceling adding a tag after we click "Type to select tag"
     await page.locator('button:has-text("Add Tag")').click();
@@ -210,7 +210,7 @@ test.describe('Tagging in Notebooks @addInit', () => {
   test('Can cancel adding a tag', async ({ page }) => {
     await createNotebookAndEntry(page);
 
-    await selectInspectorTab(page, 'Annotations');
+    await page.getByRole('tab', { name: 'Annotations' }).click();
 
     // Click on the "Add Tag" button
     await page.locator('button:has-text("Add Tag")').click();

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

@@ -24,7 +24,7 @@
 Testsuite for plot autoscale.
 */
 
-const { selectInspectorTab, createDomainObjectWithDefaults } = require('../../../../appActions');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
 const { test, expect } = require('../../../../pluginFixtures');
 test.use({
   viewport: {
@@ -60,7 +60,7 @@ test.describe('Autoscale', () => {
     // enter edit mode
     await page.click('button[title="Edit"]');
 
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
     await turnOffAutoscale(page);
 
     await setUserDefinedMinAndMax(page, '-2', '2');

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

@@ -26,7 +26,7 @@ necessarily be used for reference when writing new tests in this area.
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { selectInspectorTab, setTimeConductorBounds } = require('../../../../appActions');
+const { setTimeConductorBounds } = require('../../../../appActions');
 
 test.describe('Log plot tests', () => {
   test('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({
@@ -34,14 +34,13 @@ test.describe('Log plot tests', () => {
     openmctConfig
   }) => {
     const { myItemsFolderName } = openmctConfig;
-
+    //Test is slow and should be split in the future
-    //Test.slow decorator is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
     test.slow();
 
     await makeOverlayPlot(page, myItemsFolderName);
     await testRegularTicks(page);
     await enableEditMode(page);
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
     await enableLogMode(page);
     await testLogTicks(page);
     await disableLogMode(page);

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

@@ -29,7 +29,6 @@ const { test, expect } = require('../../../../pluginFixtures');
 const {
   createDomainObjectWithDefaults,
   getCanvasPixels,
-  selectInspectorTab,
   waitForPlotsToRender
 } = require('../../../../appActions');
 
@@ -50,7 +49,7 @@ test.describe('Overlay Plot', () => {
 
     await page.goto(overlayPlot.url);
 
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
 
     // navigate to plot series color palette
     await page.click('.l-browse-bar__actions__edit');
@@ -91,7 +90,7 @@ test.describe('Overlay Plot', () => {
     await page.click('button[title="Edit"]');
 
     // Expand the "Sine Wave Generator" plot series options and enable limit lines
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
     await page
       .getByRole('list', { name: 'Plot Series Properties' })
       .locator('span')
@@ -117,7 +116,7 @@ test.describe('Overlay Plot', () => {
     // Enter edit mode
     await page.click('button[title="Edit"]');
 
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
 
     // Drag Sine Wave Generator series from Y Axis 1 into Y Axis 2
     await page
@@ -168,7 +167,7 @@ test.describe('Overlay Plot', () => {
     await page.goto(overlayPlot.url);
     await page.click('button[title="Edit"]');
 
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
 
     // Drag swg a, c, e into Y Axis 2
     await page
@@ -182,7 +181,7 @@ test.describe('Overlay Plot', () => {
       .dragTo(page.locator('[aria-label="Element Item Group Y Axis 2"]'));
 
     // Assert that Y Axis 1 and Y Axis 2 property groups are visible only
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
 
     const yAxis1PropertyGroup = page.locator('[aria-label="Y Axis Properties"]');
     const yAxis2PropertyGroup = page.locator('[aria-label="Y Axis 2 Properties"]');
@@ -196,7 +195,7 @@ test.describe('Overlay Plot', () => {
     const yAxis2Group = page.getByLabel('Y Axis 2');
     const yAxis3Group = page.getByLabel('Y Axis 3');
 
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
 
     // Drag swg b into Y Axis 3
     await page
@@ -204,14 +203,14 @@ test.describe('Overlay Plot', () => {
       .dragTo(page.locator('[aria-label="Element Item Group Y Axis 3"]'));
 
     // Assert that all Y Axis property groups are visible
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
 
     await expect(yAxis1PropertyGroup).toBeVisible();
     await expect(yAxis2PropertyGroup).toBeVisible();
     await expect(yAxis3PropertyGroup).toBeVisible();
 
     // Verify that the elements are in the correct buckets and in the correct order
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
 
     expect(yAxis1Group.getByRole('listitem', { name: swgD.name })).toBeTruthy();
     expect(yAxis1Group.getByRole('listitem').nth(0).getByText(swgD.name)).toBeTruthy();
@@ -242,7 +241,7 @@ test.describe('Overlay Plot', () => {
     await waitForPlotsToRender(page);
     await page.click('button[title="Edit"]');
 
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
 
     await page.locator(`#inspector-elements-tree >> text=${swgA.name}`).click();
 

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

@@ -25,7 +25,7 @@
  */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../../../appActions');
+const { createDomainObjectWithDefaults } = require('../../../../appActions');
 const uuid = require('uuid').v4;
 
 test.describe('Scatter Plot', () => {
@@ -54,7 +54,7 @@ test.describe('Scatter Plot', () => {
     // the SWG appears in the elements pool
     await page.goto(scatterPlot.url);
     await editButton.click();
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
     await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg1.name}`)).toBeVisible();
     await saveButton.click();
     await page.locator('li[title="Save and Finish Editing"]').click();
@@ -82,7 +82,7 @@ test.describe('Scatter Plot', () => {
     await editButton.click();
 
     // Click the "Elements" tab
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
     await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg1.name}`)).toBeHidden();
     await expect.soft(page.locator(`#inspector-elements-tree >> text=${swg2.name}`)).toBeVisible();
     await saveButton.click();

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

@@ -26,11 +26,7 @@ necessarily be used for reference when writing new tests in this area.
 */
 
 const { test, expect } = require('../../../../pluginFixtures');
-const {
+const { createDomainObjectWithDefaults, waitForPlotsToRender } = require('../../../../appActions');
-  createDomainObjectWithDefaults,
-  selectInspectorTab,
-  waitForPlotsToRender
-} = require('../../../../appActions');
 
 test.describe('Stacked Plot', () => {
   let stackedPlot;
@@ -75,7 +71,7 @@ test.describe('Stacked Plot', () => {
 
     await page.click('button[title="Edit"]');
 
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
 
     await swgBElementsPoolItem.click({ button: 'right' });
     await page
@@ -107,7 +103,7 @@ test.describe('Stacked Plot', () => {
 
     await page.click('button[title="Edit"]');
 
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
 
     const stackedPlotItem1 = page.locator('.c-plot--stacked-container').nth(0);
     const stackedPlotItem2 = page.locator('.c-plot--stacked-container').nth(1);
@@ -152,7 +148,7 @@ test.describe('Stacked Plot', () => {
   }) => {
     await page.goto(stackedPlot.url);
 
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
 
     // Click on the 1st plot
     await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"] canvas`).nth(1).click();
@@ -193,7 +189,7 @@ test.describe('Stacked Plot', () => {
     // Go into edit mode
     await page.click('button[title="Edit"]');
 
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
 
     // Click on canvas for the 1st plot
     await page.locator(`[aria-label="Stacked Plot Item ${swgA.name}"]`).click();
@@ -238,7 +234,7 @@ test.describe('Stacked Plot', () => {
     // Go into edit mode
     await page.click('button[title="Edit"]');
 
-    await selectInspectorTab(page, 'Config');
+    await page.getByRole('tab', { name: 'Config' }).click();
 
     let legendProperties = await page.locator('[aria-label="Legend Properties"]');
     await legendProperties.locator('[title="Display legends per sub plot."]~div input').uncheck();

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

@@ -29,8 +29,7 @@ const {
   createDomainObjectWithDefaults,
   setRealTimeMode,
   setFixedTimeMode,
-  waitForPlotsToRender,
+  waitForPlotsToRender
-  selectInspectorTab
 } = require('../../../../appActions');
 
 test.describe('Plot Tagging', () => {
@@ -150,7 +149,7 @@ test.describe('Plot Tagging', () => {
     await waitForPlotsToRender(page);
 
     await expect(page.getByRole('tab', { name: 'Annotations' })).not.toHaveClass(/is-current/);
-    await selectInspectorTab(page, 'Annotations');
+    await page.getByRole('tab', { name: 'Annotations' }).click();
     await expect(page.getByRole('tab', { name: 'Annotations' })).toHaveClass(/is-current/);
 
     await expect(page.getByText('No tags to display for this item')).toBeVisible();

e2e/tests/functional/search.e2e.spec.js

@@ -24,7 +24,7 @@
  */
 
 const { test, expect } = require('../../pluginFixtures');
-const { createDomainObjectWithDefaults, selectInspectorTab } = require('../../appActions');
+const { createDomainObjectWithDefaults } = require('../../appActions');
 const { v4: uuid } = require('uuid');
 
 test.describe('Grand Search', () => {
@@ -61,7 +61,7 @@ test.describe('Grand Search', () => {
       `Clock D ${myItemsFolderName} Red Folder Blue Folder`
     );
     // Click the Elements pool to dismiss the search menu
-    await selectInspectorTab(page, 'Elements');
+    await page.getByRole('tab', { name: 'Elements' }).click();
     await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toBeHidden();
 
     await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();

e2e/tests/functional/smoke.e2e.spec.js

@@ -50,8 +50,6 @@ test('Verify that the create button appears and that the Folder Domain Object is
 
 test('Verify that My Items Tree appears @ipad', async ({ page, openmctConfig }) => {
   const { myItemsFolderName } = openmctConfig;
-  //Test.slow annotation is currently broken. Needs to be fixed in https://github.com/nasa/openmct/issues/5374
-  test.slow();
   //Go to baseURL
   await page.goto('./');
 

e2e/tests/visual/components/about.visual.spec.js

@@ -26,11 +26,12 @@ Tests the branding associated with the default deployment. At least the about mo
 
 const { test, expect } = require('../../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
+const VISUAL_URL = require('../../../constants').VISUAL_URL;
 
 test.describe('Visual - Branding', () => {
   test.beforeEach(async ({ page }) => {
     //Go to baseURL and Hide Tree
-    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
   test('Visual - About Modal', async ({ page, theme }) => {

e2e/tests/visual/components/inspector.visual.spec.js

@@ -0,0 +1,56 @@
+/*****************************************************************************
+ * 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 { test } = require('../../../pluginFixtures.js');
+const { VISUAL_URL, MISSION_TIME } = require('../../../constants.js');
+const percySnapshot = require('@percy/playwright');
+
+//Declare the scope of the visual test
+const inspectorPane = '.l-shell__pane-inspector';
+
+test.describe('Visual - Controlled Clock', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  });
+  test.use({
+    storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
+    clockOptions: {
+      now: MISSION_TIME,
+      shouldAdvanceTime: true
+    }
+  });
+
+  test('Inspector from overlay_plot_with_delay_storage @localStorage', async ({ page, theme }) => {
+    //Expand the Inspector Pane
+    await page.getByRole('button', { name: 'Inspect' }).click();
+
+    await percySnapshot(page, `Inspector view of overlayPlot (theme: ${theme})`, {
+      scope: inspectorPane
+    });
+    //Open Annotations Tab
+    await page.getByRole('tab', { name: 'Annotations' }).click();
+
+    await percySnapshot(page, `Inspector view of Annotations Tab (theme: ${theme})`, {
+      scope: inspectorPane
+    });
+  });
+});

e2e/tests/visual/components/tree.visual.spec.js

@@ -25,14 +25,21 @@ const {
   expandTreePaneItemByName,
   createDomainObjectWithDefaults
 } = require('../../../appActions.js');
-
+const VISUAL_URL = require('../../../constants.js').VISUAL_URL;
 const percySnapshot = require('@percy/playwright');
 
-test.describe('Visual - Tree Pane', () => {
+//Declare the scope of the visual test
-  test('Tree pane in various states @unstable', async ({ page, theme, openmctConfig }) => {
+const treePane = "[role=tree][aria-label='Main Tree']";
-    const { myItemsFolderName } = openmctConfig;
-    await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
 
+test.describe('Visual - Tree Pane', () => {
+  test('Tree pane in various states', async ({ page, theme, openmctConfig }) => {
+    const { myItemsFolderName } = openmctConfig;
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
+    //Open Tree
+    await page.getByRole('button', { name: 'Browse' }).click();
+
+    //Create a Folder Structure
     const foo = await createDomainObjectWithDefaults(page, {
       type: 'Folder',
       name: 'Foo Folder'
@@ -60,8 +67,6 @@ test.describe('Visual - Tree Pane', () => {
       name: 'Z Clock'
     });
 
-    const treePane = "[role=tree][aria-label='Main Tree']";
-
     await percySnapshot(page, `Tree Pane w/ collapsed tree (theme: ${theme})`, {
       scope: treePane
     });

e2e/tests/visual/controlledClock.visual.spec.js

@@ -25,35 +25,31 @@ Collection of Visual Tests set to run with browser clock manipulate made possibl
 clockOptions plugin fixture.
 */
 
+const { VISUAL_URL, MISSION_TIME } = require('../../constants');
 const { test, expect } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 
 test.describe('Visual - Controlled Clock', () => {
   test.beforeEach(async ({ page }) => {
-    //Go to baseURL and Hide Tree
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
-    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
   });
   test.use({
     storageState: './e2e/test-data/overlay_plot_with_delay_storage.json',
     clockOptions: {
+      now: MISSION_TIME,
       shouldAdvanceTime: false //Don't advance the clock
     }
   });
 
   test('Overlay Plot Loading Indicator @localStorage', async ({ page, theme }) => {
-    // Go to baseURL
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
-    await page.goto('./#/browse/mine', { waitUntil: 'networkidle' });
+    await page.locator('a').filter({ hasText: 'Overlay Plot with 5s Delay' }).click();
-    await page.getByTitle('Collapse Browse Pane').click();
-    await page
-      .locator('a')
-      .filter({ hasText: 'Overlay Plot with Telemetry Object Overlay Plot' })
-      .click();
     //Ensure that we're on the Unnamed Overlay Plot object
     await expect(page.locator('.l-browse-bar__object-name')).toContainText(
-      'Overlay Plot with Telemetry Object'
+      'Overlay Plot with 5s Delay'
     );
 
-    //Wait for canvas to be rendered and stop animating
+    //Wait for canvas to be rendered and stop animating, but plot should not be loaded. Cannot use waitForPlotsToRender
     await page.locator('canvas >> nth=1').hover({ trial: true });
 
     //Take snapshot of Sine Wave Generator within Overlay Plot

e2e/tests/visual/defaultPlugins.visual.spec.js

@@ -29,11 +29,11 @@ are only meant to run against openmct's app.js started by `npm run start` within
 const { test, expect } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 const { createDomainObjectWithDefaults } = require('../../appActions');
+const { VISUAL_URL } = require('../../constants');
 
 test.describe('Visual - Default', () => {
   test.beforeEach(async ({ page }) => {
-    //Go to baseURL and Hide Tree
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
-    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
   });
 
   test('Visual - Default Dashboard', async ({ page, theme }) => {

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

@@ -23,13 +23,15 @@
 const { expect, test } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 const { createDomainObjectWithDefaults } = require('../../appActions');
+const VISUAL_URL = require('../../constants').VISUAL_URL;
 
 test.describe('Visual - LAD Table', () => {
   /** @type {import('@playwright/test').Locator} */
   let ladTable;
 
   test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+
     // Create LAD Table
     ladTable = await createDomainObjectWithDefaults(page, {
       type: 'LAD Table',
@@ -55,9 +57,6 @@ test.describe('Visual - LAD Table', () => {
   });
   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();
 

e2e/tests/visual/notebook.visual.spec.js

@@ -22,15 +22,12 @@
 
 const { test } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
-const {
+const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../appActions');
-  selectInspectorTab,
-  expandTreePaneItemByName,
-  createDomainObjectWithDefaults
-} = require('../../appActions');
 const {
   startAndAddRestrictedNotebookObject,
   enterTextEntry
 } = require('../../helper/notebookUtils');
+const { VISUAL_URL } = require('../../constants');
 
 test.describe('Visual - Restricted Notebook', () => {
   test.beforeEach(async ({ page }) => {
@@ -44,23 +41,26 @@ test.describe('Visual - Restricted Notebook', () => {
 });
 
 test.describe('Visual - Notebook', () => {
+  let notebook;
   test.beforeEach(async ({ page }) => {
-    //Go to baseURL and Hide Tree
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
-    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
+    notebook = await createDomainObjectWithDefaults(page, {
+      type: 'Notebook',
+      name: 'Test Notebook'
+    });
   });
-  test('Accepts dropped objects as embeds @unstable', async ({ page, theme, openmctConfig }) => {
+  test('Accepts dropped objects as embeds', async ({ page, theme, openmctConfig }) => {
     const { myItemsFolderName } = openmctConfig;
 
-    const notebook = await createDomainObjectWithDefaults(page, {
-      type: 'Notebook',
-      name: 'Embed Test Notebook'
-    });
     // Create Overlay Plot
     await createDomainObjectWithDefaults(page, {
       type: 'Overlay Plot',
       name: 'Dropped Overlay Plot'
     });
 
+    //Open Tree
+    await page.getByRole('button', { name: 'Browse' }).click();
+
     await expandTreePaneItemByName(page, myItemsFolderName);
 
     await page.goto(notebook.url);
@@ -70,18 +70,19 @@ test.describe('Visual - Notebook', () => {
     await percySnapshot(page, `Notebook w/ dropped embed (theme: ${theme})`);
   });
   test("Blur 'Add tag' on Notebook", async ({ page, theme }) => {
-    await createDomainObjectWithDefaults(page, {
-      type: 'Notebook',
-      name: 'Add Tag Test Notebook'
-    });
     await enterTextEntry(page, 'Entry 0');
 
-    // Click on Annotations tab
+    await percySnapshot(page, `Notebook Entry (theme: '${theme}')`);
-    await selectInspectorTab(page, 'Annotations');
+
+    // Open the Inspector
+    await page.getByRole('button', { name: 'Inspect' }).click();
+    // Open the Annotations tab
+    await page.getByRole('tab', { name: 'Annotations' }).click();
 
     // Take snapshot of the notebook with the Annotations tab opened
     await percySnapshot(page, `Notebook Annotation (theme: '${theme}')`);
 
+    // Add annotation
     await page.locator('button:has-text("Add Tag")').click();
 
     // Take snapshot of the notebook with the AutoComplete field visible

e2e/tests/visual/notification.visual.spec.js

@@ -27,11 +27,11 @@
 const { test, expect } = require('../../pluginFixtures');
 const percySnapshot = require('@percy/playwright');
 const { createDomainObjectWithDefaults } = require('../../appActions');
+const VISUAL_URL = require('../../constants').VISUAL_URL;
 
 test.describe("Visual - Check Notification Info Banner of 'Save successful'", () => {
   test.beforeEach(async ({ page }) => {
-    // Go to baseURL and Hide Tree
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
-    await page.goto('./', { waitUntil: 'networkidle' });
   });
 
   test("Create a clock, click on 'Save successful' banner and dismiss it", async ({
@@ -43,12 +43,6 @@ test.describe("Visual - Check Notification Info Banner of 'Save successful'", ()
       type: 'Clock',
       name: 'Default Clock'
     });
-    // Verify there is a button with aria-label="Review 1 Notification"
-    expect(await page.locator('button[aria-label="Review 1 Notification"]').isVisible()).toBe(true);
-    // Verify there is a button with aria-label="Clear all notifications"
-    expect(await page.locator('button[aria-label="Clear all notifications"]').isVisible()).toBe(
-      true
-    );
     // Click on the div with role="alert" that has "Save successful" text
     await page.locator('div[role="alert"]:has-text("Save successful")').click();
     // Verify there is a div with role="dialog"

e2e/tests/visual/planning.visual.spec.js

@@ -21,16 +21,20 @@
  *****************************************************************************/
 
 const { test } = require('../../pluginFixtures');
-const { setBoundsToSpanAllActivities } = require('../../helper/planningUtils');
+const {
+  setBoundsToSpanAllActivities,
+  setDraftStatusForPlan
+} = require('../../helper/planningUtils');
 const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../appActions');
 const percySnapshot = require('@percy/playwright');
+const VISUAL_URL = require('../../constants').VISUAL_URL;
 const examplePlanSmall = require('../../test-data/examplePlans/ExamplePlan_Small2.json');
 
 const snapshotScope = '.l-shell__pane-main .l-pane__contents';
 
 test.describe('Visual - Planning', () => {
   test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
   });
 
   test('Plan View', async ({ page, theme }) => {
@@ -50,8 +54,7 @@ test.describe('Visual - Planning', () => {
       name: 'Plan Visual Test (Draft)',
       json: examplePlanSmall
     });
-    await page.goto('./#/browse/mine');
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
-
     await setDraftStatusForPlan(page, plan);
 
     await setBoundsToSpanAllActivities(page, examplePlanSmall, plan.url);
@@ -87,7 +90,7 @@ test.describe('Visual - Planning', () => {
 
     await setDraftStatusForPlan(page, plan);
 
-    await page.goto('./#/browse/mine');
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
 
     await setBoundsToSpanAllActivities(page, examplePlanSmall, ganttChart.url);
     await percySnapshot(page, `Gantt Chart View w/ draft status (theme: ${theme})`, {
@@ -95,14 +98,3 @@ test.describe('Visual - Planning', () => {
     });
   });
 });
-
-/**
- * Uses the Open MCT API to set the status of a plan to 'draft'.
- * @param {import('@playwright/test').Page} page
- * @param {import('../../appActions').CreatedObjectInfo} plan
- */
-async function setDraftStatusForPlan(page, plan) {
-  await page.evaluate(async (planObject) => {
-    await window.openmct.status.set(planObject.uuid, 'draft');
-  }, plan);
-}

e2e/tests/visual/search.visual.spec.js

@@ -26,15 +26,15 @@ This test suite is dedicated to tests which verify search functionality.
 
 const { test, expect } = require('../../pluginFixtures');
 const { createDomainObjectWithDefaults } = require('../../appActions');
+const { VISUAL_URL } = require('../../constants');
 
 const percySnapshot = require('@percy/playwright');
 
 test.describe('Grand Search', () => {
   let clock;
   let displayLayout;
-  test.beforeEach(async ({ page, theme }) => {
+  test.beforeEach(async ({ page }) => {
-    await page.goto('./', { waitUntil: 'domcontentloaded' });
+    await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
-    await page.getByTitle('Collapse Browse Pane').click();
 
     displayLayout = await createDomainObjectWithDefaults(page, {
       type: 'Display Layout',

src/ui/layout/pane.vue

@@ -28,11 +28,17 @@
       <button
         v-if="isCollapsable"
         class="l-pane__collapse-button c-icon-button"
+        :name="collapseTitle"
         :title="collapseTitle"
         @click="toggleCollapse"
       ></button>
     </div>
-    <button class="l-pane__expand-button" @click="toggleCollapse">
+    <button
+      class="l-pane__expand-button"
+      :name="expandTitle"
+      :title="expandTitle"
+      @click="toggleCollapse"
+    >
       <span class="l-pane__expand-button__label">{{ label }}</span>
     </button>
     <div class="l-pane__contents">
@@ -81,6 +87,9 @@ export default {
     collapseTitle() {
       return `Collapse ${this.label} Pane`;
     },
+    expandTitle() {
+      return `Expand ${this.label} Pane`;
+    },
     localStorageKey() {
       if (!this.label) {
         return null;