test(e2e): Major refactor and stabilization of e2e tests (#7581)

* fix: update broken locator

* update eslint package

* first pass of lint fixes

* update package

* change ruleset

* update component tests to match linting rules

* driveby

* start to factor out bad locators

* update gauge component

* update notebook snapshot drop area

* Update plot aria

* add draggable true to tree items

* update package

* driveby to remove dead code

* unneeded

* unneeded

* tells a screenreader that this is a row and a cell

* adds an id for dragondrops

* this should be a button

* first pass at fixing tooltip selectors

* review comments

* Updating more tests

* update to remove expect expect given our use of check functions

* add expand component

* move role around

* update more locators

* force

* new local storage

* remove choochoo steps

* test: do `lint:fix` and also add back accidentally removed code

* test: add back more removed code

* test: remove `unstable` annotation from tests which are not unstable

* test: remove invalid test-- the "new" time conductor doesn't allow for millisecond changes in fixed time

* test: fix unstable gauge test

* test: remove useless asserts-- this was secretly non-functional. now that we've fixed it, it makes no sense and just fails

* test: add back accidentally removed changes

* test: revert changes that break test

* test: more fixes

* Remove all notion of the unstable/stable e2e tests

* test: eviscerate the flake with FACTS and LOGIC

* test: fix anotha one

* lint fixes

* test: no need to wait for save dialog

* test: fix more tests

* lint: fix more warnings

* test: fix anotha one

* test: use `toHaveLength` instead of `.length).toBe()`

* test: stabilize tabs view example imagery test

* fix: more tests be fixed

* test: more `toHaveCount()`s please

* test: revert more accidentally removed fixes

* test: fix selector

* test: fix anotha one

* update lint rules to clean up bad locators in shared fixtures

* update and remove bad appActions

* test: fix some restricted notebook tests

* test: mass find/replace to enforce `toHaveCount()` instead of `.count()).toBe()`

* Remove some bad appActions and update text

* test: fix da tree tests

* test: await not await await

* test: fix upload plan appAction and add a11y

* Updating externalFixtures with best practice locators and add missing appAction framework tests

* test: fix test

* test: fix appAction test for plans

* test: yum yum fix'em up and get rid of some dragon drops

* fix: alas, a `.only()` got my hopes up that i was done fixing tests

* test: add `setTimeConductorMode` test "suite" which covers most TC related appActions

* test: fix arg

* test(couchdb): fix some network tests via expect polling

* Stabalize visual test

* getCanasPixels

* test: stabilize tooltip telemetry table test, better a11y for tooltips

* chore: update to use `docker compose` instead of `docker-compose`

* New rules, new tests, new me

* fix sort order

* test: add `waitForPlotsToRender` framework test, passthru timeout override

* test: remove `clockOptions` test as we have `page.clock` now

* test: refactor out `overrideClock`

* test: use `clock.install` instead

* test: use `clock.install` instead

* time clock fix

* test: fix timer tests

* remove ever reference to old base fixture

* test: stabilize restricted notebook test

* lint fixes

* test: use clock.install

* update timelist

* test: update visual tests to use `page.clock()`, update snapshots

* test: stabilize tree renaming/reordering test

* a11y: add aria-label and role=region to object view

* refactor: use `dragTo`

* refactor: use `dragTo`, other small fixes

* test: use `page.clock()` to stabilize tooltip telemetry table test

* test: use web-first assertion to stabilize staleness test

* test: knock out a few more `page.click`s

* test: destroy all `page.click()`s

* refactor: consistently use `'Ok'` instead of `'OK'` and `'Ok'` mixed

* test: remove gauge aria label

* test: more test fixes

* test: more fixes and refactors

* docs: add comment

* test: refactor all instances of `dragAndDrop`

* test: remove redundant test (covered in previous test steps)

* test: stabilize imagery operations tests for display layout

* chore: remove bad unicorn rule

* chore(lint): remove unused disable directives

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>

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

@@ -75,6 +75,7 @@ test.describe('Example Imagery Object', () => {
     const backgroundImage = page.getByLabel('Focused Image Element');
     await backgroundImage.click({
       button: 'right',
+      // Need force option here due to annotation overlay which blocks playwright's click
       // eslint-disable-next-line playwright/no-force-option
       force: true
     });
@@ -351,8 +352,8 @@ test.describe('Example Imagery Object', () => {
   });
 
   test('Uses low fetch priority', async ({ page }) => {
-    const priority = await page.locator('.js-imageryView-image').getAttribute('fetchpriority');
-    expect(priority).toBe('low');
+    const priority = page.locator('.js-imageryView-image');
+    await expect(priority).toHaveAttribute('fetchpriority', 'low');
   });
 });
 
@@ -362,7 +363,7 @@ test.describe('Example Imagery in Display Layout @clock', () => {
   test.beforeEach(async ({ page }) => {
     // We mock the clock so that we don't need to wait for time driven events
     // to verify functionality.
-    await page.clock.setSystemTime(MISSION_TIME);
+    await page.clock.install({ time: MISSION_TIME });
     await page.clock.resume();
 
     // Go to baseURL
@@ -447,6 +448,8 @@ test.describe('Example Imagery in Display Layout @clock', () => {
     await page.locator('div[title="Resize object width"] > input').click();
     await page.locator('div[title="Resize object width"] > input').fill('50');
 
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
+
     await performImageryViewOperationsAndAssert(page, displayLayout);
   });
 
@@ -528,7 +531,7 @@ test.describe('Example Imagery in Flexible layout @clock', () => {
   test.beforeEach(async ({ page }) => {
     // We mock the clock so that we don't need to wait for time driven events
     // to verify functionality.
-    await page.clock.setSystemTime(MISSION_TIME);
+    await page.clock.install({ time: MISSION_TIME });
     await page.clock.resume();
 
     await page.goto('./', { waitUntil: 'domcontentloaded' });
@@ -543,6 +546,8 @@ test.describe('Example Imagery in Flexible layout @clock', () => {
 
     // Navigate back to Flexible Layout
     await page.goto(flexibleLayout.url);
+    // Wait for image thumbnail auto-scroll to complete
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
   });
 
   test('Can double-click on the image to view large image', async ({ page }) => {
@@ -573,7 +578,7 @@ test.describe('Example Imagery in Tabs View @clock', () => {
   test.beforeEach(async ({ page }) => {
     // We mock the clock so that we don't need to wait for time driven events
     // to verify functionality.
-    await page.clock.setSystemTime(MISSION_TIME);
+    await page.clock.install({ time: MISSION_TIME });
     await page.clock.resume();
 
     await page.goto('./', { waitUntil: 'domcontentloaded' });
@@ -586,25 +591,21 @@ test.describe('Example Imagery in Tabs View @clock', () => {
     await page.getByRole('button', { name: 'Create' }).click();
 
     // Click text=Example Imagery
-    await page.click('li[role="menuitem"]:has-text("Example Imagery")');
+    await page.getByRole('menuitem', { name: 'Example Imagery' }).click();
 
     // Clear and set Image load delay to minimum value
     await page.locator('input[type="number"]').clear();
     await page.locator('input[type="number"]').fill(`${IMAGE_LOAD_DELAY}`);
 
-    // Click text=OK
-    await Promise.all([
-      page.waitForNavigation({ waitUntil: 'networkidle' }),
-      page.click('button:has-text("OK")'),
-      //Wait for Save Banner to appear
-      page.waitForSelector('.c-message-banner__message')
-    ]);
+    await page.getByLabel('Save').click();
 
     await expect(page.locator('.l-browse-bar__object-name')).toContainText(
       'Unnamed Example Imagery'
     );
 
     await page.goto(tabsView.url);
+    // Wait for image thumbnail auto-scroll to complete
+    await expect(page.getByLabel('Image Thumbnail from').last()).toBeInViewport();
   });
   test('Imagery View operations @clock', async ({ page }) => {
     await performImageryViewOperationsAndAssert(page, tabsView);
@@ -836,8 +837,7 @@ async function assertBackgroundImageUrlFromBackgroundCss(page) {
  * @param {import('@playwright/test').Page} page
  */
 async function panZoomAndAssertImageProperties(page) {
-  const imageryHintsText = await page.locator('.c-imagery__hints').innerText();
-  expect(expectedAltText).toEqual(imageryHintsText);
+  await expect(page.locator('.c-imagery__hints')).toContainText(expectedAltText);
   const zoomedBoundingBox = await page.getByLabel('Focused Image Element').boundingBox();
   const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
   const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
@@ -1056,7 +1056,6 @@ async function createImageryViewWithShortDelay(page, { name, parent }) {
 /**
  * @param {import('@playwright/test').Page} page
  */
-// eslint-disable-next-line require-await
 async function waitForZoomAndPanTransitions(page) {
   // Wait for image to stabilize
   await page.getByLabel('Focused Image Element').hover({ trial: true });