chore: screenshot the moment before clicking the add database button in the sidebar COMPASS-7086 (#4904)

* screenshot the moment before clicking the add database button in the sidebar

* attempt to fix another flake while at it

* wait for the button to become enabled

Author: lerouxb

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

@@ -6,7 +6,7 @@ import type { Telemetry } from '../helpers/telemetry';
 import { beforeTests, afterTests, afterTest } from '../helpers/compass';
 import type { Compass } from '../helpers/compass';
 import * as Selectors from '../helpers/selectors';
-import type { Element } from 'webdriverio';
+import type { Element, ElementArray } from 'webdriverio';
 import { createNumbersCollection } from '../helpers/insert-data';
 
 const { expect } = chai;
@@ -16,19 +16,31 @@ interface RecentQuery {
 }
 
 async function getRecentQueries(
-  browser: CompassBrowser
+  browser: CompassBrowser,
+  expectQueries = false
 ): Promise<RecentQuery[]> {
   const history = await browser.$(Selectors.QueryBarHistory);
   if (!(await history.isDisplayed())) {
     await browser.clickVisible(Selectors.QueryBarHistoryButton);
     await history.waitForDisplayed();
   }
 
-  const queryTags = await browser.$$(
-    '[data-testid="query-history-query-attributes"]'
-  );
+  let queryTags;
+  await browser.waitUntil(async () => {
+    queryTags = await browser.$$(
+      '[data-testid="query-history-query-attributes"]'
+    );
+    // Usually we expect to find some recents and the most common failure is
+    // that we read out the queries before they are rendered.
+    if (expectQueries) {
+      // Keep going until we find something or timeout if we never do
+      return queryTags.length > 0;
+    }
+    return true;
+  });
+
   return Promise.all(
-    queryTags.map(async (queryTag) => {
+    (queryTags as unknown as ElementArray).map(async (queryTag) => {
       const attributeTags = await queryTag.$$(
         '[data-testid="query-history-query-attribute"]'
       );
@@ -138,7 +150,7 @@ describe('Collection documents tab', function () {
       used_regex: false,
     });
 
-    const queries = await getRecentQueries(browser);
+    const queries = await getRecentQueries(browser, true);
     expect(queries).to.deep.include.members([{ Filter: '{\n i: 5\n}' }]);
   });
 
@@ -168,7 +180,7 @@ describe('Collection documents tab', function () {
       used_regex: false,
     });
 
-    const queries = await getRecentQueries(browser);
+    const queries = await getRecentQueries(browser, true);
     expect(queries).to.deep.include.members([
       {
         Filter: '{\n i: {\n  $gt: 5\n }\n}',
@@ -215,7 +227,7 @@ describe('Collection documents tab', function () {
     const displayText = await documentListActionBarMessageElement.getText();
     expect(displayText).to.equal('1 – 1 of 1');
 
-    const queries = await getRecentQueries(browser);
+    const queries = await getRecentQueries(browser, true);
     expect(queries).to.deep.include.members([
       {
         Filter: "{\n $where: 'function() { return sleep(10000) || true; }'\n}",

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

@@ -1177,6 +1177,10 @@ describe('Collection import', function () {
       const importModal = await browser.$(Selectors.ImportModal);
       await importModal.waitForDisplayed();
 
+      // Wait for the import button to become available because detect can take
+      // a while
+      await browser.$(Selectors.ImportConfirm).waitForEnabled();
+
       // Confirm import.
       await browser.clickVisible(Selectors.ImportConfirm);
 

packages/compass-e2e-tests/tests/instance-sidebar.test.ts

@@ -121,7 +121,9 @@ describe('Instance sidebar', function () {
     const collectionName = 'my-collection';
 
     // open the create database modal from the sidebar
-    await browser.clickVisible(Selectors.SidebarCreateDatabaseButton);
+    await browser.clickVisible(Selectors.SidebarCreateDatabaseButton, {
+      screenshot: 'before-can-create-a-database-and-drop-it-click.png',
+    });
 
     await browser.addDatabase(dbName, collectionName);