Fixes for e2e tests following the Vue 3 compat upgrade

e2e/appActions.js

@@ -314,15 +314,13 @@ async function _isInEditMode(page, identifier) {
  */
 async function setTimeConductorMode(page, isFixedTimespan = true) {
   // Click 'mode' button
-  const timeConductorMode = await page.locator('.c-compact-tc');
-  await timeConductorMode.click();
-  await timeConductorMode.locator('.js-mode-button').click();
-
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
+  await page.getByRole('button', { name: 'Time Conductor Mode Menu' }).click();
   // Switch time conductor mode
   if (isFixedTimespan) {
-    await page.locator('data-testid=conductor-modeOption-fixed').click();
+    await page.getByRole('menuitem', { name: /Fixed Timespan/ }).click();
   } else {
-    await page.locator('data-testid=conductor-modeOption-realtime').click();
+    await page.getByRole('menuitem', { name: /Real-Time/ }).click();
   }
 }
 
@@ -344,9 +342,12 @@ async function setRealTimeMode(page) {
 
 /**
  * @typedef {Object} OffsetValues
- * @property {string | undefined} hours
- * @property {string | undefined} mins
- * @property {string | undefined} secs
+ * @property {string | undefined} startHours
+ * @property {string | undefined} startMins
+ * @property {string | undefined} startSecs
+ * @property {string | undefined} endHours
+ * @property {string | undefined} endMins
+ * @property {string | undefined} endSecs
  */
 
 /**
@@ -355,19 +356,32 @@ async function setRealTimeMode(page) {
  * @param {OffsetValues} offset
  * @param {import('@playwright/test').Locator} offsetButton
  */
-async function setTimeConductorOffset(page, { hours, mins, secs }) {
-  // await offsetButton.click();
+async function setTimeConductorOffset(
+  page,
+  { startHours, startMins, startSecs, endHours, endMins, endSecs }
+) {
+  if (startHours) {
+    await page.getByRole('spinbutton', { name: 'Start offset hours' }).fill(startHours);
+  }
+
+  if (startMins) {
+    await page.getByRole('spinbutton', { name: 'Start offset minutes' }).fill(startMins);
+  }
+
+  if (startSecs) {
+    await page.getByRole('spinbutton', { name: 'Start offset seconds' }).fill(startSecs);
+  }
 
-  if (hours) {
-    await page.fill('.pr-time-input__hrs', hours);
+  if (endHours) {
+    await page.getByRole('spinbutton', { name: 'End offset hours' }).fill(endHours);
   }
 
-  if (mins) {
-    await page.fill('.pr-time-input__mins', mins);
+  if (endMins) {
+    await page.getByRole('spinbutton', { name: 'End offset minutes' }).fill(endMins);
   }
 
-  if (secs) {
-    await page.fill('.pr-time-input__secs', secs);
+  if (endSecs) {
+    await page.getByRole('spinbutton', { name: 'End offset seconds' }).fill(endSecs);
   }
 
   // Click the check button
@@ -381,8 +395,7 @@ async function setTimeConductorOffset(page, { hours, mins, secs }) {
  */
 async function setStartOffset(page, offset) {
   // Click 'mode' button
-  const timeConductorMode = await page.locator('.c-compact-tc');
-  await timeConductorMode.click();
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
   await setTimeConductorOffset(page, offset);
 }
 
@@ -393,11 +406,53 @@ async function setStartOffset(page, offset) {
  */
 async function setEndOffset(page, offset) {
   // Click 'mode' button
-  const timeConductorMode = await page.locator('.c-compact-tc');
-  await timeConductorMode.click();
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
   await setTimeConductorOffset(page, offset);
 }
 
+async function setTimeConductorBounds(page, startDate, endDate) {
+  // Bring up the time conductor popup
+  await page.click('.l-shell__time-conductor.c-compact-tc');
+
+  await setTimeBounds(page, startDate, endDate);
+
+  await page.keyboard.press('Enter');
+}
+
+async function setIndependentTimeConductorBounds(page, startDate, endDate) {
+  // Activate Independent Time Conductor in Fixed Time Mode
+  await page.getByRole('switch').click();
+
+  // Bring up the time conductor popup
+  await page.click('.c-conductor-holder--compact .c-compact-tc');
+
+  await expect(page.locator('.itc-popout')).toBeVisible();
+
+  await setTimeBounds(page, startDate, endDate);
+
+  await page.keyboard.press('Enter');
+}
+
+async function setTimeBounds(page, startDate, endDate) {
+  if (startDate) {
+    // Fill start time
+    await page
+      .getByRole('textbox', { name: 'Start date' })
+      .fill(startDate.toString().substring(0, 10));
+    await page
+      .getByRole('textbox', { name: 'Start time' })
+      .fill(startDate.toString().substring(11, 19));
+  }
+
+  if (endDate) {
+    // Fill end time
+    await page.getByRole('textbox', { name: 'End date' }).fill(endDate.toString().substring(0, 10));
+    await page
+      .getByRole('textbox', { name: 'End time' })
+      .fill(endDate.toString().substring(11, 19));
+  }
+}
+
 /**
  * Selects an inspector tab based on the provided tab name
  *
@@ -509,6 +564,8 @@ module.exports = {
   setRealTimeMode,
   setStartOffset,
   setEndOffset,
+  setTimeConductorBounds,
+  setIndependentTimeConductorBounds,
   selectInspectorTab,
   waitForPlotsToRender
 };

e2e/tests/functional/notification.e2e.spec.js

@@ -28,10 +28,10 @@ const { createDomainObjectWithDefaults, createNotification } = require('../../ap
 const { test, expect } = require('../../pluginFixtures');
 
 test.describe('Notifications List', () => {
-  test('Notifications can be dismissed individually', async ({ page }) => {
+  test.fixme('Notifications can be dismissed individually', async ({ page }) => {
     test.info().annotations.push({
       type: 'issue',
-      description: 'https://github.com/nasa/openmct/issues/6122'
+      description: 'https://github.com/nasa/openmct/issues/6820'
     });
 
     // Go to baseURL

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

@@ -110,7 +110,7 @@ test.describe('Time List', () => {
 
     await test.step('Does not show milliseconds in times', async () => {
       // Get the first activity
-      const row = await page.locator('.js-list-item').first();
+      const row = page.locator('.js-list-item').first();
       // Verify that none fo the times have milliseconds displayed.
       // Example: 2024-11-17T16:00:00Z is correct and 2024-11-17T16:00:00.000Z is wrong
 

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

@@ -21,7 +21,11 @@
  *****************************************************************************/
 
 const { test, expect } = require('../../../pluginFixtures');
-const { createDomainObjectWithDefaults, createPlanFromJSON } = require('../../../appActions');
+const {
+  createDomainObjectWithDefaults,
+  createPlanFromJSON,
+  setIndependentTimeConductorBounds
+} = require('../../../appActions');
 
 const testPlan = {
   TEST_GROUP: [
@@ -78,9 +82,6 @@ test.describe('Time Strip', () => {
     });
 
     // Constant locators
-    const independentTimeConductorInputs = page.locator(
-      '.l-shell__main-independent-time-conductor .c-input--datetime'
-    );
     const activityBounds = page.locator('.activity-bounds');
 
     // Goto baseURL
@@ -122,22 +123,15 @@ test.describe('Time Strip', () => {
     });
 
     await test.step('TimeStrip can use the Independent Time Conductor', async () => {
-      // Activate Independent Time Conductor in Fixed Time Mode
-      await page.click('.c-toggle-switch__slider');
-      expect(await activityBounds.count()).toEqual(0);
+      expect(await activityBounds.count()).toEqual(5);
 
       // Set the independent time bounds so that only one event is shown
       const startBound = testPlan.TEST_GROUP[0].start;
       const endBound = testPlan.TEST_GROUP[0].end;
       const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
       const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
 
-      await independentTimeConductorInputs.nth(0).fill('');
-      await independentTimeConductorInputs.nth(0).fill(startBoundString);
-      await page.keyboard.press('Enter');
-      await independentTimeConductorInputs.nth(1).fill('');
-      await independentTimeConductorInputs.nth(1).fill(endBoundString);
-      await page.keyboard.press('Enter');
+      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
       expect(await activityBounds.count()).toEqual(1);
     });
 
@@ -156,9 +150,6 @@ test.describe('Time Strip', () => {
       await page.click("button[title='Save']");
       await page.click("li[title='Save and Finish Editing']");
 
-      // Activate Independent Time Conductor in Fixed Time Mode
-      await page.click('.c-toggle-switch__slider');
-
       // All events should be displayed at this point because the
       // initial independent context bounds will match the global bounds
       expect(await activityBounds.count()).toEqual(5);
@@ -169,12 +160,7 @@ test.describe('Time Strip', () => {
       const startBoundString = new Date(startBound).toISOString().replace('T', ' ');
       const endBoundString = new Date(endBound).toISOString().replace('T', ' ');
 
-      await independentTimeConductorInputs.nth(0).fill('');
-      await independentTimeConductorInputs.nth(0).fill(startBoundString);
-      await page.keyboard.press('Enter');
-      await independentTimeConductorInputs.nth(1).fill('');
-      await independentTimeConductorInputs.nth(1).fill(endBoundString);
-      await page.keyboard.press('Enter');
+      await setIndependentTimeConductorBounds(page, startBoundString, endBoundString);
 
       // Verify that two events are displayed
       expect(await activityBounds.count()).toEqual(2);

e2e/tests/functional/plugins/clocks/clock.e2e.spec.js

@@ -41,7 +41,7 @@ test.describe('Clock Generator CRUD Operations', () => {
     await page.click('button:has-text("Create")');
 
     // Click Clock
-    await page.click('text=Clock');
+    await page.getByRole('menuitem').first().click();
 
     // Click .icon-arrow-down
     await page.locator('.icon-arrow-down').click();

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

@@ -25,7 +25,8 @@ const {
   createDomainObjectWithDefaults,
   setStartOffset,
   setFixedTimeMode,
-  setRealTimeMode
+  setRealTimeMode,
+  setIndependentTimeConductorBounds
 } = require('../../../../appActions');
 
 test.describe('Display Layout', () => {
@@ -231,20 +232,27 @@ test.describe('Display Layout', () => {
     let layoutGridHolder = page.locator('.l-layout__grid-holder');
     await exampleImageryTreeItem.dragTo(layoutGridHolder);
 
+    //adjust so that we can see the independent time conductor toggle
+    // Adjust object height
+    await page.locator('div[title="Resize object height"] > input').click();
+    await page.locator('div[title="Resize object height"] > input').fill('70');
+
+    // Adjust object width
+    await page.locator('div[title="Resize object width"] > input').click();
+    await page.locator('div[title="Resize object width"] > input').fill('70');
+
     await page.locator('button[title="Save"]').click();
     await page.locator('text=Save and Finish Editing').click();
 
-    // flip on independent time conductor
-    await page.getByTitle('Enable independent Time Conductor').first().locator('label').click();
-    await page.getByRole('textbox').nth(1).fill('2021-12-30 01:11:00.000Z');
-    await page.getByRole('textbox').nth(0).fill('2021-12-30 01:01:00.000Z');
-    await page.getByRole('textbox').nth(1).click();
+    const startDate = '2021-12-30 01:01:00.000Z';
+    const endDate = '2021-12-30 01:11:00.000Z';
+    await setIndependentTimeConductorBounds(page, startDate, endDate);
 
     // check image date
     await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
 
     // flip it off
-    await page.getByTitle('Disable independent Time Conductor').first().locator('label').click();
+    await page.getByRole('switch').click();
     // timestamp shouldn't be in the past anymore
     await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
   });

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

@@ -21,7 +21,10 @@
  *****************************************************************************/
 
 const { test, expect } = require('../../../../pluginFixtures');
-const { createDomainObjectWithDefaults } = require('../../../../appActions');
+const {
+  createDomainObjectWithDefaults,
+  setIndependentTimeConductorBounds
+} = require('../../../../appActions');
 
 test.describe('Flexible Layout', () => {
   let sineWaveObject;
@@ -187,16 +190,17 @@ test.describe('Flexible Layout', () => {
     await page.locator('text=Save and Finish Editing').click();
 
     // flip on independent time conductor
-    await page.getByTitle('Enable independent Time Conductor').first().locator('label').click();
-    await page.getByRole('textbox').nth(1).fill('2021-12-30 01:11:00.000Z');
-    await page.getByRole('textbox').nth(0).fill('2021-12-30 01:01:00.000Z');
-    await page.getByRole('textbox').nth(1).click();
+    await setIndependentTimeConductorBounds(
+      page,
+      '2021-12-30 01:01:00.000Z',
+      '2021-12-30 01:11:00.000Z'
+    );
 
     // check image date
     await expect(page.getByText('2021-12-30 01:11:00.000Z').first()).toBeVisible();
 
     // flip it off
-    await page.getByTitle('Disable independent Time Conductor').first().locator('label').click();
+    await page.getByRole('switch').click();
     // timestamp shouldn't be in the past anymore
     await expect(page.getByText('2021-12-30 01:11:00.000Z')).toBeHidden();
   });