chore(e2e): webdriverio 9 (#6559)

* webdriverio 9

packages/compass-e2e-tests/.depcheckrc

@@ -8,7 +8,5 @@ ignores:
   - '@mongodb-js/mocha-config-compass'
   - 'compass-e2e-tests'
   - '@mongodb-js/compass-web'
-# TODO(COMPASS-8312): depcheck doesn't count this dependency because it's a
-# types only import and the depcheck parser is resolving the @types/<name>
-# package as a dep instead
-  - 'puppeteer'
+# needed for getPuppeteer() to work
+  - 'puppeteer-core'

packages/compass-e2e-tests/helpers/commands/add-collection.ts

@@ -37,7 +37,7 @@ export async function addCollection(
   collectionOptions?: AddCollectionOptions,
   screenshotPath?: string
 ): Promise<void> {
-  const createModalElement = await browser.$(Selectors.CreateCollectionModal);
+  const createModalElement = browser.$(Selectors.CreateCollectionModal);
   await createModalElement.waitForDisplayed();
 
   await browser.setValueVisible(
@@ -141,7 +141,7 @@ export async function addCollection(
 
     // scroll to the locale one so the screenshot will include it.
     // (for debugging)
-    const localeButton = await browser.$(
+    const localeButton = browser.$(
       Selectors.createCollectionCustomCollationFieldButton('locale')
     );
     await localeButton.scrollIntoView();
@@ -168,13 +168,11 @@ export async function addCollection(
       await browser.clickVisible(
         Selectors.CreateCollectionTimeseriesGranularityButton
       );
-      const menu = await browser.$(
+      const menu = browser.$(
         Selectors.CreateCollectionTimeseriesGranularityMenu
       );
       await menu.waitForDisplayed();
-      const span = await menu.$(
-        `span=${collectionOptions.timeseries.granularity}`
-      );
+      const span = menu.$(`span=${collectionOptions.timeseries.granularity}`);
       await span.waitForDisplayed();
       await span.click();
     }

packages/compass-e2e-tests/helpers/commands/add-database.ts

@@ -10,14 +10,14 @@ export async function addDatabase(
   collectionOptions?: AddCollectionOptions,
   screenshotPath?: string
 ): Promise<void> {
-  const createModalElement = await browser.$(Selectors.CreateDatabaseModal);
+  const createModalElement = browser.$(Selectors.CreateDatabaseModal);
   await createModalElement.waitForDisplayed();
   await browser.setValueVisible(Selectors.CreateDatabaseDatabaseName, dbName);
   await browser.setValueVisible(
     Selectors.CreateDatabaseCollectionName,
     collectionName
   );
-  const createButton = await browser.$(Selectors.CreateDatabaseCreateButton);
+  const createButton = browser.$(Selectors.CreateDatabaseCreateButton);
   await createButton.waitForEnabled();
 
   if (screenshotPath) {

packages/compass-e2e-tests/helpers/commands/add-wizard.ts

@@ -9,8 +9,6 @@ export async function addWizard(
   await browser.toggleAggregationSidePanel('opened');
   await browser.clickVisible(Selectors.AggregationWizardUseCase(usecaseId));
 
-  const wizardCard = await browser.$(
-    Selectors.AggregationWizardCardAtIndex(index)
-  );
+  const wizardCard = browser.$(Selectors.AggregationWizardCardAtIndex(index));
   await wizardCard.waitForDisplayed();
 }

packages/compass-e2e-tests/helpers/commands/click-confirmation-action.ts

@@ -9,7 +9,7 @@ export async function clickConfirmationAction(
 ) {
   await browser.clickVisible(actionButtonSelector);
 
-  const confirmationModal = await browser.$(Selectors.ConfirmationModal);
+  const confirmationModal = browser.$(Selectors.ConfirmationModal);
   await confirmationModal.waitForDisplayed();
 
   if (confirmationText) {

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

@@ -4,7 +4,7 @@ export async function clickParent(
   browser: CompassBrowser,
   selector: string
 ): Promise<void> {
-  const element = await browser.$(selector).parentElement();
+  const element = browser.$(selector).parentElement();
   await element.waitForExist();
   await element.click();
 }

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

@@ -9,7 +9,7 @@ interface ClickOptions {
 
 export async function clickVisible(
   browser: CompassBrowser,
-  selector: string | ChainablePromiseElement<WebdriverIO.Element>,
+  selector: string | ChainablePromiseElement,
   options?: ClickOptions
 ): Promise<void> {
   const waitOptions = { timeout: options?.timeout };

packages/compass-e2e-tests/helpers/commands/close-connect-modal.ts

@@ -5,7 +5,7 @@ export async function closeConnectModal(
   browser: CompassBrowser
 ): Promise<void> {
   await browser.clickVisible(Selectors.CancelConnectionButton);
-  const connectionModalContentElement = await browser.$(
+  const connectionModalContentElement = browser.$(
     Selectors.ConnectionStatusModalContent
   );
   await connectionModalContentElement.waitForExist({

packages/compass-e2e-tests/helpers/commands/close-settings-modal.ts

@@ -8,7 +8,7 @@ export async function closeSettingsModal(
     return;
   }
 
-  const settingsModalElement = await browser.$(Selectors.SettingsModal);
+  const settingsModalElement = browser.$(Selectors.SettingsModal);
 
   await settingsModalElement.waitForDisplayed();
 

packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts

@@ -8,7 +8,7 @@ export async function closeWelcomeModal(
     return;
   }
 
-  const welcomeModalElement = await browser.$(Selectors.WelcomeModal);
+  const welcomeModalElement = browser.$(Selectors.WelcomeModal);
   await welcomeModalElement.waitForDisplayed();
 
   await browser.clickVisible(Selectors.CloseWelcomeModalButton);

packages/compass-e2e-tests/helpers/commands/collection-workspaces.ts

@@ -39,7 +39,7 @@ async function navigateToCollection(
     Selectors.SidebarFilterInput,
     `^(${dbName}|${collectionName})$`
   );
-  const collectionElement = await browser.$(collectionSelector);
+  const collectionElement = browser.$(collectionSelector);
 
   await collectionElement.waitForDisplayed();
 

packages/compass-e2e-tests/helpers/commands/connect-form.ts

@@ -26,7 +26,7 @@ export async function resetConnectForm(browser: CompassBrowser): Promise<void> {
 
   const connectionTitleSelector = Selectors.ConnectionModalTitle;
 
-  const connectionTitle = await browser.$(connectionTitleSelector);
+  const connectionTitle = browser.$(connectionTitleSelector);
   await connectionTitle.waitUntil(async () => {
     return (await connectionTitle.getText()) === 'New Connection';
   });
@@ -305,9 +305,7 @@ export async function getConnectFormState(
     await browser.clickVisible(Selectors.ConnectionFormAdvancedToggle);
 
     await browser.waitUntil(async () => {
-      const advancedButton = await browser.$(
-        Selectors.ConnectionFormAdvancedToggle
-      );
+      const advancedButton = browser.$(Selectors.ConnectionFormAdvancedToggle);
       return (await advancedButton.getAttribute('aria-expanded')) === 'false';
     });
   }
@@ -319,8 +317,8 @@ async function getCheckedRadioValue(
   browser: CompassBrowser,
   selector: string
 ): Promise<string | null> {
-  const elements = await browser.$$(selector);
-  for (const element of elements) {
+  const elements = browser.$$(selector);
+  for await (const element of elements) {
     if (await element.isSelected()) {
       return element.getValue();
     }
@@ -333,7 +331,7 @@ async function getCheckboxValue(
   browser: CompassBrowser,
   selector: string
 ): Promise<boolean | null> {
-  const element = await browser.$(selector);
+  const element = browser.$(selector);
   if (!(await element.isExisting())) {
     return null; // as opposed to true for checked and false for not
   }
@@ -345,7 +343,7 @@ async function getText(
   browser: CompassBrowser,
   selector: string
 ): Promise<string | null> {
-  const element = await browser.$(selector);
+  const element = browser.$(selector);
   if (!(await element.isExisting())) {
     return null;
   }
@@ -366,7 +364,7 @@ async function getValue(
   browser: CompassBrowser,
   selector: string
 ): Promise<string | null> {
-  const element = await browser.$(selector);
+  const element = browser.$(selector);
   if (!(await element.isExisting())) {
     return null;
   }
@@ -880,8 +878,8 @@ export async function setConnectFormState(
         // for whatever reasons sometimes the first one or two come through as empty strings
         await browser.waitUntil(async () => {
           allText = [];
-          const options = await browser.$$('#select-key-menu [role="option"]');
-          for (const option of options) {
+          const options = browser.$$('#select-key-menu [role="option"]');
+          for await (const option of options) {
             const _text = await option.getText();
             const text = _text.trim();
             allText.push(text);
@@ -904,7 +902,7 @@ export async function setConnectFormState(
         ).to.be.true;
 
         // make sure the menu goes away once we clicked on the option
-        const menu = await browser.$('#select-key-menu');
+        const menu = browser.$('#select-key-menu');
         await menu.waitForExist({ reverse: true });
 
         // value

packages/compass-e2e-tests/helpers/commands/connect.ts

@@ -19,7 +19,7 @@ export async function getConnectFormConnectionString(
   browser: CompassBrowser,
   shouldFocusInput = false
 ): Promise<string> {
-  const inputElem = await browser.$(Selectors.ConnectionFormStringInput);
+  const inputElem = browser.$(Selectors.ConnectionFormStringInput);
   await inputElem.waitForDisplayed();
   if (shouldFocusInput) {
     await browser.waitUntil(async () => {
@@ -168,7 +168,7 @@ export async function waitForConnectionResult(
     await browser
       .$(Selectors.ConnectionToastErrorText)
       .waitForDisplayed(waitOptions);
-    return await browser.$(Selectors.LGToastTitle).getText();
+    return browser.$(Selectors.LGToastTitle).getText();
   } else {
     const exhaustiveCheck: never = connectionStatus;
     throw new Error(`Unhandled connectionStatus case: ${exhaustiveCheck}`);

packages/compass-e2e-tests/helpers/commands/create-index.ts

@@ -51,7 +51,7 @@ export async function createIndex(
   } else {
     await browser.clickVisible(Selectors.CreateIndexButton);
   }
-  const createModal = await browser.$(Selectors.CreateIndexModal);
+  const createModal = browser.$(Selectors.CreateIndexModal);
   await createModal.waitForDisplayed();
 
   // Select / type field name
@@ -62,12 +62,12 @@ export async function createIndex(
   await browser.keys(['Enter']);
 
   // Select field type
-  const fieldTypeSelect = await browser.$(
+  const fieldTypeSelect = browser.$(
     Selectors.createIndexModalFieldTypeSelectButton(createRowIndex)
   );
   await fieldTypeSelect.waitForDisplayed();
   await fieldTypeSelect.click();
-  const fieldTypeSelectMenu = await browser.$(
+  const fieldTypeSelectMenu = browser.$(
     Selectors.createIndexModalFieldTypeSelectMenu(createRowIndex)
   );
   await fieldTypeSelectMenu.waitForDisplayed();
@@ -119,7 +119,7 @@ export async function createIndex(
 
   // Assert that index does come in table
   const indexComponentSelector = Selectors.indexComponent(indexName);
-  const indexComponent = await browser.$(indexComponentSelector);
+  const indexComponent = browser.$(indexComponentSelector);
   await indexComponent.waitForDisplayed();
 
   // Wait for index to get ready before proceeding

packages/compass-e2e-tests/helpers/commands/disconnect.ts

@@ -45,10 +45,10 @@ export async function disconnectAll(
   // The potential problem here is that the list is virtual, so it is possible
   // that not every connection is rendered. Collapsing them all helps a little
   // bit, though.
-  const connectionItems = await browser.$$(
+  const connectionItems = browser.$$(
     Selectors.Multiple.ConnectedConnectionItems
   );
-  for (const connectionItem of connectionItems) {
+  for await (const connectionItem of connectionItems) {
     const connectionName = await connectionItem.getAttribute(
       'data-connection-name'
     );

packages/compass-e2e-tests/helpers/commands/drop-collection-from-sidebar.ts

@@ -22,6 +22,6 @@ export async function dropCollectionFromSidebar(
     databaseName,
     collectionName
   );
-  const collectionElement = await browser.$(collectionSelector);
+  const collectionElement = browser.$(collectionSelector);
   await collectionElement.waitForExist({ reverse: true });
 }

packages/compass-e2e-tests/helpers/commands/drop-index.ts

@@ -7,15 +7,15 @@ export async function dropIndex(
   screenshotName?: string
 ) {
   const indexComponentSelector = Selectors.indexComponent(indexName);
-  const indexComponent = await browser.$(indexComponentSelector);
+  const indexComponent = browser.$(indexComponentSelector);
   await indexComponent.waitForDisplayed();
 
   await browser.hover(indexComponentSelector);
   await browser.clickVisible(
     `${indexComponentSelector} ${Selectors.IndexesTableDropIndexButton}`
   );
 
-  const dropModal = await browser.$(Selectors.DropIndexModal);
+  const dropModal = browser.$(Selectors.DropIndexModal);
   await dropModal.waitForDisplayed();
 
   await browser.setValueVisible(

packages/compass-e2e-tests/helpers/commands/drop-namespace.ts

@@ -5,13 +5,13 @@ export async function dropNamespace(
   browser: CompassBrowser,
   collectionName: string
 ): Promise<void> {
-  const dropModalElement = await browser.$(Selectors.DropNamespaceModal);
+  const dropModalElement = browser.$(Selectors.DropNamespaceModal);
   await dropModalElement.waitForDisplayed();
   await browser.setValueVisible(
     Selectors.DropNamespaceConfirmNameInput,
     collectionName
   );
-  const confirmButton = await browser.$(Selectors.DropNamespaceDropButton);
+  const confirmButton = browser.$(Selectors.DropNamespaceDropButton);
   await confirmButton.waitForEnabled();
 
   await confirmButton.click();

packages/compass-e2e-tests/helpers/commands/exists-eventually.ts

@@ -7,7 +7,7 @@ export async function existsEventually(
 ): Promise<boolean> {
   try {
     // return true if it exists before the timeout expires
-    const element = await browser.$(selector);
+    const element = browser.$(selector);
     await element.waitForDisplayed(
       typeof timeout !== 'undefined' ? { timeout } : undefined
     );

packages/compass-e2e-tests/helpers/commands/expand-accordion.ts

@@ -4,7 +4,7 @@ export async function expandAccordion(
   browser: CompassBrowser,
   selector: string
 ): Promise<boolean> {
-  const expandButton = await browser.$(selector);
+  const expandButton = browser.$(selector);
   await expandButton.waitForDisplayed();
 
   if ((await expandButton.getAttribute('aria-expanded')) === 'false') {

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

@@ -12,7 +12,7 @@ export async function exportToLanguage(
   language: string,
   options?: ExportToLanguageOptions
 ): Promise<string> {
-  const exportModal = await browser.$(Selectors.ExportToLanguageModal);
+  const exportModal = browser.$(Selectors.ExportToLanguageModal);
   await exportModal.waitForDisplayed();
 
   // pick the language
@@ -22,39 +22,37 @@ export async function exportToLanguage(
     return (await button.getAttribute('aria-expanded')) === 'true';
   });
 
-  const listBox = await browser.$(Selectors.ExportToLanguageLanguageListbox);
+  const listBox = browser.$(Selectors.ExportToLanguageLanguageListbox);
   await listBox.waitForDisplayed();
-  const languageElement = await listBox.$(`[value="${language}"]`);
+  const languageElement = listBox.$(`[value="${language}"]`);
   await languageElement.waitForDisplayed();
   await languageElement.click();
 
   if (options?.includeImportStatements === true) {
-    const importsCheckbox = await browser.$(
+    const importsCheckbox = browser.$(
       Selectors.ExportToLanguageImportsCheckbox
     );
-    const importsLabel = await importsCheckbox.parentElement();
+    const importsLabel = importsCheckbox.parentElement();
     if (!(await importsCheckbox.isSelected())) {
       await importsLabel.click();
     }
   }
 
   // not C#
   if (options?.includeDriverSyntax === true) {
-    const driverCheckbox = await browser.$(
-      Selectors.ExportToLanguageDriverCheckbox
-    );
-    const driverLabel = await driverCheckbox.parentElement();
+    const driverCheckbox = browser.$(Selectors.ExportToLanguageDriverCheckbox);
+    const driverLabel = driverCheckbox.parentElement();
     if (!(await driverCheckbox.isSelected())) {
       await driverLabel.click();
     }
   }
 
   // only Java, only when exporting from Documents tab
   if (options?.useBuilders === true) {
-    const buildersCheckbox = await browser.$(
+    const buildersCheckbox = browser.$(
       Selectors.ExportToLanguageBuildersCheckbox
     );
-    const buildersLabel = await buildersCheckbox.parentElement();
+    const buildersLabel = buildersCheckbox.parentElement();
     if (!(await buildersCheckbox.isSelected())) {
       await buildersLabel.click();
     }