chore(e2e): ignore stale element reference errors (#5623)

* ignore stale element reference errors

* don't allow WebdriverIO.Element to be passed in - only ChainablePromiseElement or selectors and don't await it

* screenshot before looking up the element again

* bump some pauses in disconnect helper

* pause after saving the favourite

* saving the connection automatically selects it

* pause before selecting favourite

* screenshots

* include the name in the screenshots

* get rid of one more Element

* click in one step, no checking if the element is enabled first

Author: lerouxb

packages/compass-e2e-tests/helpers/commands/click-visible.ts

@@ -8,38 +8,29 @@ interface ClickOptions {
 
 export async function clickVisible(
   browser: CompassBrowser,
-  selector:
-    | string
-    | ChainablePromiseElement<WebdriverIO.Element>
-    | WebdriverIO.Element,
+  selector: string | ChainablePromiseElement<WebdriverIO.Element>,
   options?: ClickOptions
 ): Promise<void> {
-  async function getElement() {
-    return typeof selector === 'string' ? await browser.$(selector) : selector;
+  function getElement() {
+    return typeof selector === 'string' ? browser.$(selector) : selector;
   }
 
-  const displayElement = await getElement();
+  const displayElement = getElement();
 
   await displayElement.waitForDisplayed();
 
   // Clicking a thing that's still animating is unreliable at best.
   await browser.waitForAnimations(selector);
 
   if (options?.scroll) {
-    const scrollElement = await getElement();
+    const scrollElement = getElement();
     await scrollElement.scrollIntoView();
     await browser.pause(1000);
   }
 
-  const clickElement = await getElement();
   if (options?.screenshot) {
     await browser.screenshot(options.screenshot);
   }
-  if (await clickElement.isEnabled()) {
-    await clickElement.click();
-  } else {
-    throw new Error(
-      `Trying to click ${selector}, but the element is not enabled`
-    );
-  }
+  const clickElement = getElement();
+  await clickElement.click();
 }

packages/compass-e2e-tests/helpers/commands/export-to-language.ts

@@ -17,7 +17,7 @@ export async function exportToLanguage(
 
   // pick the language
   await browser.waitUntil(async () => {
-    const button = await browser.$(Selectors.ExportToLanguageLanguageField);
+    const button = browser.$(Selectors.ExportToLanguageLanguageField);
     await browser.clickVisible(button);
     return (await button.getAttribute('aria-expanded')) === 'true';
   });

packages/compass-e2e-tests/helpers/commands/save-connection-string-as-favorite.ts

@@ -14,5 +14,6 @@ export async function saveConnectionStringAsFavorite(
     connectionString
   );
   await browser.saveFavorite(favoriteName, color);
+
   return favoriteName;
 }

packages/compass-e2e-tests/helpers/commands/select-favorite.ts

@@ -5,7 +5,14 @@ export async function selectFavorite(
   browser: CompassBrowser,
   favoriteName: string
 ): Promise<void> {
-  await browser.clickVisible(Selectors.sidebarFavoriteButton(favoriteName));
+  // Usually we use this after disconnecting. I'm just trying to see where the
+  // race condition is - are we clicking too quickly or is the act of clicking
+  // causing something to re-render and the element to go stale?
+  await browser.pause(1000);
+
+  await browser.clickVisible(Selectors.sidebarFavoriteButton(favoriteName), {
+    screenshot: `selecting-favourite-${favoriteName}.png`,
+  });
   await browser.waitUntil(async () => {
     const text = await browser.$(Selectors.ConnectionTitle).getText();
     return text === favoriteName;

packages/compass-e2e-tests/helpers/commands/set-value-visible.ts

@@ -4,18 +4,15 @@ import type { ChainablePromiseElement } from 'webdriverio';
 
 export async function setValueVisible(
   browser: CompassBrowser,
-  selector:
-    | string
-    | ChainablePromiseElement<WebdriverIO.Element>
-    | WebdriverIO.Element,
+  selector: string | ChainablePromiseElement<WebdriverIO.Element>,
   value: string
 ): Promise<void> {
   // The hardest thing in computer science? Reliably setting a text form field's
   // value in an E2E test.
-  async function getElement() {
-    return typeof selector === 'string' ? await browser.$(selector) : selector;
+  function getElement() {
+    return typeof selector === 'string' ? browser.$(selector) : selector;
   }
-  const element = await getElement();
+  const element = getElement();
 
   await browser.waitForAnimations(element);
 

packages/compass-e2e-tests/helpers/commands/wait-for-animations.ts

@@ -4,34 +4,37 @@ import type { CompassBrowser } from '../compass-browser';
 
 export async function waitForAnimations(
   browser: CompassBrowser,
-  selector:
-    | string
-    | ChainablePromiseElement<WebdriverIO.Element>
-    | WebdriverIO.Element
+  selector: string | ChainablePromiseElement<WebdriverIO.Element>
 ): Promise<void> {
-  async function getElement() {
-    return typeof selector === 'string' ? await browser.$(selector) : selector;
+  function getElement() {
+    return typeof selector === 'string' ? browser.$(selector) : selector;
   }
 
-  const initialElement = await getElement();
+  try {
+    const initialElement = getElement();
 
-  let previousResult = {
-    ...(await initialElement.getLocation()),
-    ...(await initialElement.getSize()),
-  };
-  await browser.waitUntil(async function () {
-    // small delay to make sure that if it is busy animating it had time to move
-    // before the first check and between each two checks
-    await browser.pause(50);
+    let previousResult = {
+      location: await initialElement.getLocation(),
+      size: await initialElement.getSize(),
+    };
+    await browser.waitUntil(async function () {
+      // small delay to make sure that if it is busy animating it had time to move
+      // before the first check and between each two checks
+      await browser.pause(50);
 
-    const currentElement = await getElement();
+      const currentElement = getElement();
 
-    const result = {
-      ...(await currentElement.getLocation()),
-      ...(await currentElement.getSize()),
-    };
-    const stopped = _.isEqual(result, previousResult);
-    previousResult = result;
-    return stopped;
-  });
+      const result = {
+        location: await currentElement.getLocation(),
+        size: await currentElement.getSize(),
+      };
+      const stopped = _.isEqual(result, previousResult);
+      previousResult = result;
+      return stopped;
+    });
+  } catch (err: any) {
+    if (err.name !== 'stale element reference') {
+      throw err;
+    }
+  }
 }

packages/compass-e2e-tests/tests/collection-documents-tab.test.ts

@@ -382,7 +382,7 @@ FindIterable<Document> result = collection.find(filter);`);
     );
     await value.doubleClick();
 
-    const input = await document.$(
+    const input = document.$(
       `${Selectors.HadronDocumentElement}:last-child ${Selectors.HadronDocumentValueEditor}`
     );
     await browser.setValueVisible(input, '42');
@@ -518,7 +518,7 @@ FindIterable<Document> result = collection.find(filter);`);
     const value = await document.$('[col-id="j"] .element-value');
     await value.doubleClick();
 
-    const input = await document.$(
+    const input = document.$(
       '[col-id="j"] [data-testid="table-view-cell-editor-value-input"]'
     );
     await browser.setValueVisible(input, '-100');

packages/compass-e2e-tests/tests/collection-import.test.ts

@@ -1224,7 +1224,7 @@ describe('Collection import', function () {
       await toastElement.waitForDisplayed();
       // Click the toast element. This focuses the toast, and clicking the cancel
       // button isn't consistent without it.
-      await browser.clickVisible(toastElement);
+      await browser.clickVisible(Selectors.ImportToast);
 
       const importAbortButton = await browser.$(Selectors.ImportToastAbort);
       await importAbortButton.waitForDisplayed();
@@ -1295,7 +1295,7 @@ describe('Collection import', function () {
       await toastElement.waitForDisplayed();
       // Click the toast element. This focuses the toast, and clicking the cancel
       // button isn't consistent without it.
-      await browser.clickVisible(toastElement);
+      await browser.clickVisible(Selectors.ImportToast);
 
       const importAbortButton = await browser.$(Selectors.ImportToastAbort);
       await importAbortButton.waitForDisplayed();

packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts

@@ -123,7 +123,7 @@ describe('Collection indexes tab', function () {
       await createModal.waitForDisplayed();
 
       // Select i filed name from Combobox.
-      const fieldNameSelect = await browser.$(
+      const fieldNameSelect = browser.$(
         Selectors.createIndexModalFieldNameSelectInput(0)
       );
 

packages/compass-e2e-tests/tests/in-use-encryption.test.ts

@@ -487,7 +487,7 @@ describe('CSFLE / QE', function () {
           );
           await value.doubleClick();
 
-          const input = await document.$(
+          const input = document.$(
             `${Selectors.HadronDocumentElement}[data-field="${field}"] ${Selectors.HadronDocumentValueEditor}`
           );
           await browser.setValueVisible(
@@ -639,7 +639,7 @@ describe('CSFLE / QE', function () {
         const isCopiedDocumentPhoneNumberEditorExisting =
           await copiedDocumentPhoneNumberEditor.isExisting();
         expect(isCopiedDocumentPhoneNumberEditorExisting).to.be.equal(true);
-        const copiedDocumentFaxNumberEditor = await copiedDocument.$(
+        const copiedDocumentFaxNumberEditor = copiedDocument.$(
           `${Selectors.HadronDocumentElement}[data-field="faxNumber"] ${Selectors.HadronDocumentValueEditor}`
         );
         const isCopiedDocumentFaxNumberEditorExisting =