From e94cf27c9ad42adb6060bf76705d9d1503df2d72 Mon Sep 17 00:00:00 2001 From: Jesse Mazzella Date: Thu, 20 Jul 2023 12:41:55 -0700 Subject: [PATCH] fix(e2e): update appActions and tests to use a11y locators for ITC --- e2e/appActions.js | 90 ++++++++----------- .../displayLayout/displayLayout.e2e.spec.js | 4 +- .../plugins/plot/logPlot.e2e.spec.js | 4 +- .../timeConductor/timeConductor.e2e.spec.js | 28 +++--- 4 files changed, 56 insertions(+), 70 deletions(-) diff --git a/e2e/appActions.js b/e2e/appActions.js index 5f156d91d9..91a05698a0 100644 --- a/e2e/appActions.js +++ b/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 }; diff --git a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js b/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js index 1422a217ea..b5225c1a83 100644 --- a/e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js +++ b/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 diff --git a/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js index 1be5a3a04c..e7c3a7b081 100644 --- a/e2e/tests/functional/plugins/plot/logPlot.e2e.spec.js +++ b/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 diff --git a/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js b/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js index cf78f337df..5dba7ef998 100644 --- a/e2e/tests/functional/plugins/timeConductor/timeConductor.e2e.spec.js +++ b/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"');