chore(e2e): refactor e2e tests to use page object pattern for UI access

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

@@ -21,7 +21,9 @@ async function navigateToCollection(
   // state of Schema, and Validation tabs without re-connecting.
   closeExistingTabs = true
 ): Promise<void> {
-  const connectionId = await browser.getConnectionIdByName(connectionName);
+  const connectionId = await browser.pages.sidebar.getConnectionIdByName(
+    connectionName
+  );
 
   const collectionSelector = Selectors.sidebarCollection(
     connectionId,
@@ -34,9 +36,9 @@ async function navigateToCollection(
   }
 
   // search for the collection and wait for the collection to be there and visible
-  await browser.clickVisible(Selectors.SidebarFilterInput);
+  await browser.clickVisible(browser.pages.sidebar.$filterInput);
   await browser.setValueVisible(
-    Selectors.SidebarFilterInput,
+    browser.pages.sidebar.$filterInput,
     `${dbName}.${collectionName}`
   );
   const collectionElement = browser.$(collectionSelector);
@@ -71,15 +73,15 @@ export async function navigateToCollectionTab(
   );
 
   // wait for the tooltip to be gone
-  await browser.clickVisible(Selectors.SidebarFilterInput);
+  await browser.clickVisible(browser.pages.sidebar.$filterInput);
   await browser
     .$(Selectors.WorkspaceTabTooltip)
     .waitForDisplayed({ reverse: true });
 
   await navigateWithinCurrentCollectionTabs(browser, tabName);
 
   // I don't know why, but sometimes the tooltip is shown at this point again
-  await browser.clickVisible(Selectors.SidebarFilterInput);
+  await browser.clickVisible(browser.pages.sidebar.$filterInput);
   await browser
     .$(Selectors.WorkspaceTabTooltip)
     .waitForDisplayed({ reverse: true });

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

@@ -17,7 +17,7 @@ export async function resetConnectForm(browser: CompassBrowser): Promise<void> {
   }
 
   await browser.waitForOpenModal(Selectors.ConnectionModal, { reverse: true });
-  await browser.clickVisible(Selectors.SidebarNewConnectionButton);
+  await browser.clickVisible(browser.pages.sidebar.$newConnectionButton);
 
   const connectionTitleSelector = Selectors.ConnectionModalTitle;
 
@@ -965,7 +965,7 @@ export async function setupDefaultConnections(browser: CompassBrowser) {
   try {
     for (const connectionInfo of DEFAULT_CONNECTIONS) {
       const connectionName = getConnectionTitle(connectionInfo);
-      if (await browser.removeConnection(connectionName)) {
+      if (await browser.pages.sidebar.removeConnection(connectionName)) {
         debug('Removing existing connection so we do not create a duplicate', {
           connectionName,
         });

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

@@ -68,13 +68,13 @@ export async function connectWithConnectionString(
   // if a connection with this name already exists, remove it otherwise we'll
   // add a duplicate and things will get complicated fast
   const connectionName = connectionNameFromString(connectionStringOrName);
-  if (await browser.removeConnection(connectionName)) {
+  if (await browser.pages.sidebar.removeConnection(connectionName)) {
     debug('Removing existing connection so we do not create a duplicate', {
       connectionName,
     });
   }
 
-  await browser.clickVisible(Selectors.SidebarNewConnectionButton);
+  await browser.clickVisible(browser.pages.sidebar.$newConnectionButton);
   await browser.waitForOpenModal(Selectors.ConnectionModal);
 
   await browser.setValueVisible(
@@ -98,7 +98,7 @@ export async function connectWithConnectionForm(
   // name, make sure we don't add a duplicate so that tests can always address
   // this new connection.
   if (state.connectionName) {
-    if (await browser.removeConnection(state.connectionName)) {
+    if (await browser.pages.sidebar.removeConnection(state.connectionName)) {
       debug('Removing existing connection so we do not create a duplicate', {
         connectionName: state.connectionName,
       });
@@ -133,36 +133,32 @@ export async function waitForConnectionResult(
   const waitOptions = typeof timeout !== 'undefined' ? { timeout } : undefined;
 
   if (
-    (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) &&
-    (await browser
-      .$(Selectors.SidebarFilterInput)
-      .getAttribute('aria-disabled')) !== 'true'
+    (await browser.pages.sidebar.$filterInput.isDisplayed()) &&
+    (await browser.pages.sidebar.$filterInput.getAttribute('aria-disabled')) !==
+      'true'
   ) {
     // Clear the filter to make sure every connection shows
-    await browser.clickVisible(Selectors.SidebarFilterInput);
-    await browser.setValueVisible(Selectors.SidebarFilterInput, '');
+    await browser.clickVisible(browser.pages.sidebar.$filterInput);
+    await browser.setValueVisible(browser.pages.sidebar.$filterInput, '');
   }
 
   if (connectionStatus === 'either') {
     // For the very rare cases where we don't care whether it fails or succeeds.
     // Usually because the exact result is a race condition.
-    const successSelector = Selectors.connectionItemByName(connectionName, {
-      connected: true,
-    });
-    const failureSelector = Selectors.ConnectionToastErrorText;
-    await browser
-      .$(`${successSelector},${failureSelector}`)
-      .waitForDisplayed(waitOptions);
+    await Promise.race([
+      browser.pages.sidebar
+        .$connectionItem(connectionName, { connected: true })
+        .waitForDisplayed(waitOptions),
+      browser
+        .$(Selectors.ConnectionToastErrorText)
+        .waitForDisplayed(waitOptions),
+    ]);
   } else if (connectionStatus === 'success') {
     // Wait for the first meaningful thing on the screen after being connected
     // and assume that's a good enough indicator that we are connected to the
     // server
-    await browser
-      .$(
-        Selectors.connectionItemByName(connectionName, {
-          connected: true,
-        })
-      )
+    await browser.pages.sidebar
+      .$connectionItem(connectionName, { connected: true })
       .waitForDisplayed();
   } else if (connectionStatus === 'failure') {
     await browser
@@ -175,9 +171,9 @@ export async function waitForConnectionResult(
   }
 
   // make sure the placeholders for databases & collections that are loading are all gone
-  await browser
-    .$(Selectors.DatabaseCollectionPlaceholder)
-    .waitForDisplayed({ reverse: true });
+  await browser.pages.sidebar.$databaseCollectionPlaceholder.waitForDisplayed({
+    reverse: true,
+  });
 }
 
 export async function connectByName(
@@ -186,19 +182,19 @@ export async function connectByName(
   options: ConnectionResultOptions = {}
 ) {
   // make sure the connection shows up before we try and hover over it
-  await browser
-    .$(Selectors.sidebarConnection(connectionName))
-    .waitForDisplayed();
+  await browser.pages.sidebar.$connection(connectionName).waitForDisplayed();
 
   // focus the filter input so that we can be sure the window is focused and the
   // mouse pointer is away from the connection itself
-  await browser.clickVisible(Selectors.SidebarFilterInput);
+  await browser.clickVisible(browser.pages.sidebar.$filterInput);
 
   // hover over the connection and hope the connect button shows up
-  await browser.hover(Selectors.sidebarConnection(connectionName));
+  await browser.hover(browser.pages.sidebar.$connection(connectionName));
 
   // hopefully the connect button showed up on hover and we can click it
-  await browser.clickVisible(Selectors.sidebarConnectionButton(connectionName));
+  await browser.clickVisible(
+    browser.pages.sidebar.$connectButton(connectionName)
+  );
 
   await browser.waitForConnectionResult(connectionName, options);
 }

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

@@ -8,9 +8,11 @@ export async function navigateToConnectionTab(
   tabType: 'Performance' | 'Databases'
 ): Promise<void> {
   if (tabType === 'Databases') {
-    await browser.clickVisible(Selectors.sidebarConnection(connectionName));
+    await browser.clickVisible(
+      browser.pages.sidebar.$connection(connectionName)
+    );
   } else {
-    await browser.selectConnectionMenuItem(
+    await browser.pages.sidebar.selectConnectionMenuItem(
       connectionName,
       Selectors.ViewPerformanceItem
     );

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

@@ -13,17 +13,16 @@ async function resetForDisconnect(
 
   // Collapse all the connections so that they will all hopefully fit on screen
   // and therefore be rendered.
-  await browser.clickVisible(Selectors.CollapseConnectionsButton);
+  await browser.pages.sidebar.collapseAllConnections();
 
   if (
-    (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) &&
-    (await browser
-      .$(Selectors.SidebarFilterInput)
-      .getAttribute('aria-disabled')) !== 'true'
+    (await browser.pages.sidebar.$filterInput.isDisplayed()) &&
+    (await browser.pages.sidebar.$filterInput.getAttribute('aria-disabled')) !==
+      'true'
   ) {
     // Clear the filter to make sure every connection shows
-    await browser.clickVisible(Selectors.SidebarFilterInput);
-    await browser.setValueVisible(Selectors.SidebarFilterInput, '');
+    await browser.clickVisible(browser.pages.sidebar.$filterInput);
+    await browser.setValueVisible(browser.pages.sidebar.$filterInput, '');
   }
 
   if (closeToasts) {
@@ -50,7 +49,8 @@ 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 = browser.$$(Selectors.ConnectedConnectionItems);
+  const connectionItems = browser.pages.sidebar.$$connectedConnections;
+
   for await (const connectionItem of connectionItems) {
     const connectionName = await connectionItem.getAttribute(
       'data-connection-name'
@@ -82,16 +82,12 @@ export async function disconnectByName(
 ) {
   await resetForDisconnect(browser, { closeToasts: false });
 
-  await browser.selectConnectionMenuItem(
+  await browser.pages.sidebar.selectConnectionMenuItem(
     connectionName,
     Selectors.DisconnectConnectionItem
   );
 
-  await browser
-    .$(
-      Selectors.connectionItemByName(connectionName, {
-        connected: false,
-      })
-    )
+  await browser.pages.sidebar
+    .$connectionItem(connectionName, { connected: false })
     .waitForDisplayed();
 }

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

@@ -14,7 +14,9 @@ export async function dropCollectionFromSidebar(
     'drop-collection'
   );
 
-  const connectionId = await browser.getConnectionIdByName(connectionName);
+  const connectionId = await browser.pages.sidebar.getConnectionIdByName(
+    connectionName
+  );
   const collectionSelector = Selectors.sidebarCollection(
     connectionId,
     databaseName,

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

@@ -6,11 +6,13 @@ export async function dropDatabaseFromSidebar(
   connectionName: string,
   dbName: string
 ): Promise<void> {
-  const connectionId = await browser.getConnectionIdByName(connectionName);
+  const connectionId = await browser.pages.sidebar.getConnectionIdByName(
+    connectionName
+  );
 
   // search for the database in the sidebar filter
-  await browser.clickVisible(Selectors.SidebarFilterInput);
-  await browser.setValueVisible(Selectors.SidebarFilterInput, dbName);
+  await browser.clickVisible(browser.pages.sidebar.$filterInput);
+  await browser.setValueVisible(browser.pages.sidebar.$filterInput, dbName);
   await browser
     .$(Selectors.sidebarDatabase(connectionId, dbName))
     .waitForDisplayed();

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

@@ -1,8 +1,10 @@
+import type { ChainablePromiseElement } from 'webdriverio';
 import type { CompassBrowser } from '../compass-browser.ts';
+import { resolveElement } from '../utils.ts';
 
 export async function hover(
   browser: CompassBrowser,
-  selector: string
+  selector: string | ChainablePromiseElement
 ): Promise<void> {
-  await browser.$(selector).moveTo();
+  await resolveElement(browser, selector).moveTo();
 }

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

@@ -36,8 +36,6 @@ export * from './preferences.ts';
 export * from './set-env.ts';
 export * from './save-favorite.ts';
 export * from './save-connection-string-as-favorite.ts';
-export * from './sidebar-connection.ts';
-export * from './select-connections-menu-item.ts';
 export * from './open-settings-modal.ts';
 export * from './screenshot.ts';
 export * from './open-shell.ts';

packages/compass-e2e-tests/helpers/commands/open-shell.ts

@@ -23,7 +23,7 @@ export async function openShellFromSidebar(
   browser: CompassBrowser,
   connectionName: string
 ): Promise<void> {
-  await browser.selectConnectionMenuItem(
+  await browser.pages.sidebar.selectConnectionMenuItem(
     connectionName,
     Selectors.OpenShellItem,
     false // the item is not contained in the three-dot menu

packages/compass-e2e-tests/helpers/commands/remove-connections.ts

@@ -6,17 +6,16 @@ async function resetForRemove(browser: CompassBrowser) {
 
   // Collapse all the connections so that they will all hopefully fit on screen
   // and therefore be rendered.
-  await browser.clickVisible(Selectors.CollapseConnectionsButton);
+  await browser.clickVisible(browser.pages.sidebar.$connectionsTitle);
 
   if (
-    (await browser.$(Selectors.SidebarFilterInput).isDisplayed()) &&
-    (await browser
-      .$(Selectors.SidebarFilterInput)
-      .getAttribute('aria-disabled')) !== 'true'
+    (await browser.pages.sidebar.$filterInput.isDisplayed()) &&
+    (await browser.pages.sidebar.$filterInput.getAttribute('aria-disabled')) !==
+      'true'
   ) {
     // Clear the filter to make sure every connection shows
-    await browser.clickVisible(Selectors.SidebarFilterInput);
-    await browser.setValueVisible(Selectors.SidebarFilterInput, '');
+    await browser.clickVisible(browser.pages.sidebar.$filterInput);
+    await browser.setValueVisible(browser.pages.sidebar.$filterInput, '');
   }
 }
 
@@ -34,7 +33,7 @@ export async function removeAllConnections(
   // 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 = browser.$$(Selectors.ConnectionItems);
+  const connectionItems = browser.pages.sidebar.$$connections;
   for await (const connectionItem of connectionItems) {
     console.log(connectionItem);
     const connectionName = await connectionItem.getAttribute(
@@ -55,12 +54,12 @@ export async function removeConnectionByName(
 ) {
   await resetForRemove(browser);
 
-  await browser.selectConnectionMenuItem(
+  await browser.pages.sidebar.selectConnectionMenuItem(
     connectionName,
     Selectors.RemoveConnectionItem
   );
 
-  await browser
-    .$(Selectors.connectionItemByName(connectionName))
+  await browser.pages.sidebar
+    .$connectionItem(connectionName)
     .waitForDisplayed({ reverse: true });
 }

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

@@ -11,7 +11,7 @@ export async function saveConnectionStringAsFavorite(
   color = 'Green'
 ): Promise<string> {
   // open the connection modal so we can fill in the connection string
-  await browser.clickVisible(Selectors.SidebarNewConnectionButton);
+  await browser.clickVisible(browser.pages.sidebar.$newConnectionButton);
   favoriteName ??= new UUID().toHexString();
   await browser.setValueVisible(
     Selectors.ConnectionFormStringInput,