fix(e2e): update appActions and tests to use a11y locators for ITC

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('.l-shell__time-conductor.c-compact-tc');
-  await timeConductorMode.click();
-  await timeConductorMode.locator('.js-mode-button').click();
-  const modeMenu = await page.locator('.c-conductor__mode-menu .c-super-menu__menu');
+  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 modeMenu.getByRole('menuitem').first().click();
+    await page.getByRole('menuitem', { name: /Fixed Timespan/ }).click();
   } else {
-    await modeMenu.getByRole('menuitem').nth(1).click();
+    await page.getByRole('menuitem', { name: /Real-Time/ }).click();
   }
 }
 
@@ -344,44 +342,44 @@ 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
  */
 
 /**
  * Set the values (hours, mins, secs) for the TimeConductor offsets when in realtime mode
  * @param {import('@playwright/test').Page} page
  * @param {OffsetValues} offset
- * @param {Boolean} end is it the end offset?
  * @param {import('@playwright/test').Locator} offsetButton
  */
-async function setTimeConductorOffset(page, { hours, mins, secs }, end) {
-  if (!end) {
-    if (hours) {
-      await page.locator('.pr-time-input__hrs').first().fill(hours);
+async function setTimeConductorOffset(page, { startHours, startMins, startSecs, endHours, endMins, endSecs }) {
+    if (startHours) {
+      await page.getByRole('spinbutton', { name: 'Start offset hours' }).fill(startHours);
     }
 
-    if (mins) {
-      await page.locator('.pr-time-input__mins').first().fill(mins);
+    if (startMins) {
+      await page.getByRole('spinbutton', { name: 'Start offset minutes' }).fill(startMins);
     }
 
-    if (secs) {
-      await page.locator('.pr-time-input__secs').first().fill(secs);
-    }
-  } else {
-    if (hours) {
-      await page.locator('.pr-time-input__hrs').nth(1).fill(hours);
+    if (startSecs) {
+      await page.getByRole('spinbutton', { name: 'Start offset seconds' }).fill(startSecs);
     }
 
-    if (mins) {
-      await page.locator('.pr-time-input__mins').nth(1).fill(mins);
+    if (endHours) {
+      await page.getByRole('spinbutton', { name: 'End offset hours' }).fill(endHours);
     }
 
-    if (secs) {
-      await page.locator('.pr-time-input__secs').nth(1).fill(secs);
+    if (endMins) {
+      await page.getByRole('spinbutton', { name: 'End offset minutes' }).fill(endMins);
+    }
+
+    if (endSecs) {
+      await page.getByRole('spinbutton', { name: 'End offset seconds' }).fill(endSecs);
     }
-  }
 
   // Click the check button
   await page.locator('.pr-time-input--buttons .icon-check').click();
@@ -394,8 +392,7 @@ async function setTimeConductorOffset(page, { hours, mins, secs }, end) {
  */
 async function setStartOffset(page, offset) {
   // Click 'mode' button
-  const timeConductorMode = await page.locator('.l-shell__time-conductor.c-compact-tc');
-  await timeConductorMode.click();
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
   await setTimeConductorOffset(page, offset, false);
 }
 
@@ -406,38 +403,27 @@ async function setStartOffset(page, offset) {
  */
 async function setEndOffset(page, offset) {
   // Click 'mode' button
-  const timeConductorMode = await page.locator('.l-shell__time-conductor.c-compact-tc');
-  await timeConductorMode.click();
+  await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
   await setTimeConductorOffset(page, offset, true);
 }
 
-async function setDateAndTime(page, startDate, endDate, independentTimeConductor) {
+async function setTimeConductorBounds(page, startDate, endDate, isIndepdendentTime) {
   // Bring up the time conductor popup
-  const timeConductorMode = independentTimeConductor
-    ? await page.locator('.c-conductor-holder--compact .c-compact-tc')
-    : await page.locator('.l-shell__time-conductor.c-compact-tc');
+  const timeConductorMode = isIndepdendentTime
+    ? await page.getByRole('button', { name: 'Independent Time Conductor Mode' })
+    : await page.getByRole('button', { name: 'Time Conductor Mode', exact: true });
   await timeConductorMode.click();
 
   if (startDate) {
-    const startDateLocator = page.locator('input[type="text"]').first();
-    const startTimeLocator = page.locator('input[type="text"]').nth(1);
-
-    // Click and fill start time
-    await startDateLocator.click();
-    await startDateLocator.fill(startDate.toString().substring(0, 10));
-    await startTimeLocator.click();
-    await startTimeLocator.fill(startDate.toString().substring(11, 19));
+    // Fill start time
+    page.getByRole('textbox', { name: 'Start date' }).fill(startDate.toString().substring(0, 10));
+    page.getByRole('textbox', { name: 'Start time' }).fill(startDate.toString().substring(11, 19));
   }
 
   if (endDate) {
-    const endDateLocator = page.locator('input[type="text"]').nth(2);
-    const endTimeLocator = page.locator('input[type="text"]').nth(3);
-
-    // Click and fill end time
-    await endDateLocator.click();
-    await endDateLocator.fill(endDate.toString().substring(0, 10));
-    await endTimeLocator.click();
-    await endTimeLocator.fill(endDate.toString().substring(11, 19));
+    // Fill end time
+    page.getByRole('textbox', { name: 'End date' }).fill(endDate.toString().substring(0, 10));
+    page.getByRole('textbox', { name: 'End time' }).fill(endDate.toString().substring(11, 19));
   }
 }
 
@@ -552,7 +538,7 @@ module.exports = {
   setRealTimeMode,
   setStartOffset,
   setEndOffset,
-  setDateAndTime,
+  setTimeConductorBounds,
   selectInspectorTab,
   waitForPlotsToRender
 };

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

@@ -26,7 +26,7 @@ const {
   setStartOffset,
   setFixedTimeMode,
   setRealTimeMode,
-  setDateAndTime
+  setTimeConductorBounds
 } = require('../../../../appActions');
 
 test.describe('Display Layout', () => {
@@ -249,7 +249,7 @@ test.describe('Display Layout', () => {
 
     const startDate = '2021-12-30 01:01:00.000Z';
     const endDate = '2021-12-30 01:11:00.000Z';
-    await setDateAndTime(page, startDate, endDate, true);
+    await setTimeConductorBounds(page, startDate, endDate, true);
     await page.locator('.pr-time-input--buttons .icon-check').click();
 
     // check image date

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, setDateAndTime } = require('../../../../appActions');
+const { selectInspectorTab, setTimeConductorBounds } = require('../../../../appActions');
 
 test.describe('Log plot tests', () => {
   test('Log Plot ticks are functionally correct in regular and log mode and after refresh', async ({
@@ -90,7 +90,7 @@ async function makeOverlayPlot(page, myItemsFolderName) {
   const start = '2022-03-29 22:00:00.000Z';
   const end = '2022-03-29 22:00:30.000Z';
 
-  await setDateAndTime(page, start, end);
+  await setTimeConductorBounds(page, start, end);
 
   // create overlay plot
 

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

@@ -26,7 +26,7 @@ const {
   setRealTimeMode,
   setStartOffset,
   setEndOffset,
-  setDateAndTime
+  setTimeConductorBounds
 } = require('../../../../appActions');
 
 test.describe('Time conductor operations', () => {
@@ -41,11 +41,11 @@ test.describe('Time conductor operations', () => {
     let endDate = 'xxxx-01-01 02:00:00.000Z';
     endDate = year + endDate.substring(4);
 
-    await setDateAndTime(page, startDate, endDate);
+    await setTimeConductorBounds(page, startDate, endDate);
 
     // invalid start date
     startDate = year + 1 + startDate.substring(4);
-    await setDateAndTime(page, startDate);
+    await setTimeConductorBounds(page, startDate);
 
     // Bring up the time conductor popup
     const timeConductorMode = await page.locator('.c-compact-tc');
@@ -62,11 +62,11 @@ test.describe('Time conductor operations', () => {
 
     // fix to valid start date
     startDate = year - 1 + startDate.substring(4);
-    await setDateAndTime(page, startDate);
+    await setTimeConductorBounds(page, startDate);
 
     // invalid end date
     endDate = year - 2 + endDate.substring(4);
-    await setDateAndTime(page, undefined, endDate);
+    await setTimeConductorBounds(page, undefined, endDate);
 
     await startDateLocator.click();
 
@@ -82,11 +82,11 @@ test.describe('Time conductor operations', () => {
 test.describe('Time conductor input fields real-time mode', () => {
   test('validate input fields in real-time mode', async ({ page }) => {
     const startOffset = {
-      secs: '23'
+      startSecs: '23'
     };
 
     const endOffset = {
-      secs: '31'
+      endSecs: '31'
     };
 
     // Go to baseURL
@@ -116,12 +116,12 @@ test.describe('Time conductor input fields real-time mode', () => {
     page
   }) => {
     const startOffset = {
-      mins: '30',
-      secs: '23'
+      startMins: '30',
+      startSecs: '23'
     };
 
     const endOffset = {
-      secs: '01'
+      endSecs: '01'
     };
 
     // Convert offsets to milliseconds
@@ -198,11 +198,11 @@ test.describe('Time Conductor History', () => {
     // with startBound at 2022-01-01 00:00:00.000Z
     // and endBound at 2022-01-01 00:00:00.200Z
     await page.goto(
-      './#/browse/mine?view=grid&tc.mode=fixed&tc.startBound=1640995200000&tc.endBound=1640995200200&tc.timeSystem=utc&hideInspector=true',
-      { waitUntil: 'networkidle' }
+      './#/browse/mine?view=grid&tc.mode=fixed&tc.startBound=1640995200000&tc.endBound=1640995200200&tc.timeSystem=utc&hideInspector=true'
     );
-    await page.locator("[aria-label='Time Conductor History']").hover({ trial: true });
-    await page.locator("[aria-label='Time Conductor History']").click();
+    await page.getByRole('button', { name: 'Time Conductor Settings' }).click();
+    await page.getByRole('button', { name: 'Time Conductor History' }).hover({ trial: true });
+    await page.getByRole('button', { name: 'Time Conductor History' }).click();
 
     // Validate history item format
     const historyItem = page.locator('text="2022-01-01 00:00:00 + 200ms"');