chore(e2e): scroll to the custom collation field option before clicking and take a screenshot, fix css selector COMPASS-7569 (#5342)

* scroll to the custom collation field option before clicking and take a screenshot

* hopefully better css that will continue to work when the button is not focused

* fix screenshot path

* consistent screenshotting

* disambiguate param name

* remove capturePage

Author: lerouxb

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

@@ -78,6 +78,10 @@ export async function addCollection(
       await menu.waitForDisplayed();
       const span = await menu.$(`span=${value.toString()}`);
       await span.waitForDisplayed();
+      await span.scrollIntoView();
+      await browser.screenshot(
+        `custom-collation-${key}-${value.toString()}.png`
+      );
       await span.click();
 
       // make sure the menu disappears before moving on to the next thing

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

@@ -30,7 +30,7 @@ export async function clickVisible(
 
   const clickElement = await getElement();
   if (options?.screenshot) {
-    await browser.saveScreenshot(options.screenshot);
+    await browser.screenshot(options.screenshot);
   }
   if (await clickElement.isEnabled()) {
     await clickElement.click();

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

@@ -1,6 +1,6 @@
 import path from 'path';
 import type { CompassBrowser } from '../compass-browser';
-import { LOG_PATH } from '../compass';
+import { SCREENSHOTS_PATH } from '../compass';
 
 export async function screenshot(
   browser: CompassBrowser,
@@ -9,5 +9,5 @@ export async function screenshot(
   // Give animations a second. Hard to have a generic way to know if animations
   // are still in progress or not.
   await browser.pause(1000);
-  await browser.saveScreenshot(path.join(LOG_PATH, 'screenshots', filename));
+  await browser.saveScreenshot(path.join(SCREENSHOTS_PATH, filename));
 }

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

@@ -39,7 +39,7 @@ export const COMPASS_PATH = path.dirname(
 );
 export const LOG_PATH = path.resolve(__dirname, '..', '.log');
 const OUTPUT_PATH = path.join(LOG_PATH, 'output');
-const SCREENSHOTS_PATH = path.join(LOG_PATH, 'screenshots');
+export const SCREENSHOTS_PATH = path.join(LOG_PATH, 'screenshots');
 const COVERAGE_PATH = path.join(LOG_PATH, 'coverage');
 
 let MONGODB_VERSION = '';
@@ -106,8 +106,6 @@ export const serverSatisfies = (
 
 // For the user data dirs
 let i = 0;
-// For the screenshots
-let j = 0;
 
 interface Coverage {
   main?: string;
@@ -377,18 +375,6 @@ export class Compass {
     await fs.writeFile(compassLogPath, compassLog.raw);
     this.logs = compassLog.structured;
   }
-
-  async capturePage(
-    imgPathName = `screenshot-${formattedDate()}-${++j}.png`
-  ): Promise<boolean> {
-    try {
-      await this.browser.saveScreenshot(path.join(LOG_PATH, imgPathName));
-      return true;
-    } catch (err) {
-      console.warn((err as Error).stack);
-      return false;
-    }
-  }
 }
 
 interface StartCompassOptions {
@@ -987,9 +973,11 @@ export async function screenshotIfFailed(
   if (test) {
     if (test.state === undefined) {
       // if there's no state, then it is probably because the before() hook failed
-      await compass.capturePage(screenshotPathName(`${test.fullTitle()}-hook`));
+      await compass.browser.screenshot(
+        screenshotPathName(`${test.fullTitle()}-hook`)
+      );
     } else if (test.state === 'failed') {
-      await compass.capturePage(screenshotPathName(test.fullTitle()));
+      await compass.browser.screenshot(screenshotPathName(test.fullTitle()));
     }
   }
 }

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

@@ -10,12 +10,9 @@ import type { Compass } from '../helpers/compass';
 import * as Selectors from '../helpers/selectors';
 import { getFirstListDocument } from '../helpers/read-first-document-content';
 import { MongoClient } from 'mongodb';
-import path from 'path';
 
 import delay from '../helpers/delay';
 
-import { LOG_PATH } from '../helpers/compass';
-
 const CONNECTION_HOSTS = 'localhost:27091';
 const CONNECTION_STRING = `mongodb://${CONNECTION_HOSTS}/`;
 
@@ -120,9 +117,7 @@ describe('CSFLE / QE', function () {
       }
 
       await delay(10000);
-      await browser.saveScreenshot(
-        path.join(LOG_PATH, 'saved-connections-after-disconnect.png')
-      );
+      await browser.screenshot('saved-connections-after-disconnect.png');
 
       await browser.clickVisible(Selectors.sidebarFavoriteButton(favoriteName));
       await browser.waitUntil(async () => {

packages/compass-e2e-tests/tests/instance-databases-tab.test.ts

@@ -1,9 +1,7 @@
 import { expect } from 'chai';
-import path from 'path';
 import type { CompassBrowser } from '../helpers/compass-browser';
 import { init, cleanup, screenshotIfFailed } from '../helpers/compass';
 import type { Compass } from '../helpers/compass';
-import { LOG_PATH } from '../helpers/compass';
 import * as Selectors from '../helpers/selectors';
 import {
   createDummyCollections,
@@ -64,7 +62,7 @@ describe('Instance databases tab', function () {
     // even after scrolling it into view.
     await browser.clickVisible(Selectors.databaseCardClickable('test'), {
       scroll: true,
-      screenshot: path.join(LOG_PATH, 'database-card.png'),
+      screenshot: 'database-card.png',
     });
 
     const collectionSelectors = ['json-array', 'json-file', 'numbers'].map(

packages/databases-collections/src/components/collation-fields/collation-fields.jsx

@@ -11,7 +11,7 @@ import { css } from '@mongodb-js/compass-components';
 
 const optionsSelectDropdownStyles = css({
   zIndex: 1,
-  'button:focus, button:focus-within': {
+  'button[aria-expanded=true]': {
     zIndex: 20,
   },
 });