chore: take screenshots of the modals encountered in E2E tests (#3614)

lerouxb · web-flow · commit 2fd9ff513512 · 2022-10-19T16:46:50.000+01:00
take screenshots of the modals encountered in E2E tests
diff --git a/packages/compass-e2e-tests/helpers/commands/add-collection.ts b/packages/compass-e2e-tests/helpers/commands/add-collection.ts
@@ -1,7 +1,7 @@
 import type { CompassBrowser } from '../compass-browser';
 import * as Selectors from '../selectors';
 
-type AddCollectionOptions = {
+export type AddCollectionOptions = {
   capped?: {
     size: number;
   };
@@ -32,7 +32,8 @@ type AddCollectionOptions = {
 export async function addCollection(
   browser: CompassBrowser,
   collectionName: string,
-  options?: AddCollectionOptions
+  collectionOptions?: AddCollectionOptions,
+  screenshotPath?: string
 ): Promise<void> {
   const createModalElement = await browser.$(Selectors.CreateCollectionModal);
   await createModalElement.waitForDisplayed();
@@ -42,28 +43,30 @@ export async function addCollection(
   );
   await collectionInput.setValue(collectionName);
 
-  if (options) {
+  if (collectionOptions) {
     await browser.clickVisible(
       Selectors.CreateCollectionCollectionOptionsAccordion
     );
   }
 
-  if (options && options.capped) {
+  if (collectionOptions && collectionOptions.capped) {
     await browser.clickVisible(Selectors.CreateCollectionCappedCheckboxLabel);
 
     const sizeElement = await browser.$(
       Selectors.CreateCollectionCappedSizeInput
     );
     await sizeElement.waitForDisplayed();
-    await sizeElement.setValue(options.capped.size.toString());
+    await sizeElement.setValue(collectionOptions.capped.size.toString());
   }
 
-  if (options && options.customCollation) {
+  if (collectionOptions && collectionOptions.customCollation) {
     await browser.clickVisible(
       Selectors.CreateCollectionCustomCollationCheckboxLabel
     );
 
-    for (const [key, value] of Object.entries(options.customCollation)) {
+    for (const [key, value] of Object.entries(
+      collectionOptions.customCollation
+    )) {
       await browser.clickVisible(
         Selectors.createCollectionCustomCollationFieldButton(key)
       );
@@ -84,7 +87,7 @@ export async function addCollection(
     await localeButton.scrollIntoView();
   }
 
-  if (options && options.timeseries) {
+  if (collectionOptions && collectionOptions.timeseries) {
     await browser.clickVisible(
       Selectors.CreateCollectionTimeseriesCheckboxLabel
     );
@@ -93,13 +96,13 @@ export async function addCollection(
       Selectors.CreateCollectionTimeseriesTimeField
     );
     await timeField.waitForDisplayed();
-    await timeField.setValue(options.timeseries.timeField);
+    await timeField.setValue(collectionOptions.timeseries.timeField);
 
     const metaField = await browser.$(
       Selectors.CreateCollectionTimeseriesMetaField
     );
     await metaField.waitForDisplayed();
-    await metaField.setValue(options.timeseries.metaField);
+    await metaField.setValue(collectionOptions.timeseries.metaField);
 
     await browser.clickVisible(
       Selectors.CreateCollectionTimeseriesGranularityButton
@@ -108,7 +111,9 @@ export async function addCollection(
       Selectors.CreateCollectionTimeseriesGranularityMenu
     );
     await menu.waitForDisplayed();
-    const span = await menu.$(`span=${options.timeseries.granularity}`);
+    const span = await menu.$(
+      `span=${collectionOptions.timeseries.granularity}`
+    );
     await span.waitForDisplayed();
     await span.click();
 
@@ -117,11 +122,11 @@ export async function addCollection(
     );
     await expireField.waitForDisplayed();
     await expireField.setValue(
-      options.timeseries.expireAfterSeconds.toString()
+      collectionOptions.timeseries.expireAfterSeconds.toString()
     );
   }
 
-  if (options && options.clustered) {
+  if (collectionOptions && collectionOptions.clustered) {
     await browser.clickVisible(
       Selectors.CreateCollectionClusteredCheckboxLabel
     );
@@ -130,23 +135,29 @@ export async function addCollection(
       Selectors.CreateCollectionClusteredNameField
     );
     await nameField.waitForDisplayed();
-    await nameField.setValue(options.clustered.name);
+    await nameField.setValue(collectionOptions.clustered.name);
 
     const expireField = await browser.$(
       Selectors.CreateCollectionClusteredExpireAfterSeconds
     );
     await expireField.waitForDisplayed();
-    await expireField.setValue(options.clustered.expireAfterSeconds.toString());
+    await expireField.setValue(
+      collectionOptions.clustered.expireAfterSeconds.toString()
+    );
   }
 
-  if (options && options.encryptedFields) {
+  if (collectionOptions && collectionOptions.encryptedFields) {
     await browser.clickVisible(Selectors.CreateCollectionFLE2CheckboxLabel);
     await browser.setAceValue(
       Selectors.CreateCollectionFLE2,
-      options.encryptedFields
+      collectionOptions.encryptedFields
     );
   }
 
+  if (screenshotPath) {
+    await browser.screenshot(screenshotPath);
+  }
+
   await browser.clickVisible(Selectors.CreateCollectionCreateButton);
   await createModalElement.waitForDisplayed({ reverse: true });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/add-database.ts b/packages/compass-e2e-tests/helpers/commands/add-database.ts
@@ -1,11 +1,14 @@
 import type { CompassBrowser } from '../compass-browser';
 import * as Selectors from '../selectors';
 
+import type { AddCollectionOptions } from './add-collection';
+
 export async function addDatabase(
   browser: CompassBrowser,
   dbName: string,
-  collectionName: string
-  // TODO: options for capped collection, use custom collation and time-series
+  collectionName: string,
+  collectionOptions?: AddCollectionOptions,
+  screenshotPath?: string
 ): Promise<void> {
   const createModalElement = await browser.$(Selectors.CreateDatabaseModal);
   await createModalElement.waitForDisplayed();
@@ -17,6 +20,11 @@ export async function addDatabase(
   await collectionInput.setValue(collectionName);
   const createButton = await browser.$(Selectors.CreateDatabaseCreateButton);
   await createButton.waitForEnabled();
+
+  if (screenshotPath) {
+    await browser.screenshot(screenshotPath);
+  }
+
   await createButton.click();
   await createModalElement.waitForDisplayed({ reverse: true });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/close-settings-modal.ts b/packages/compass-e2e-tests/helpers/commands/close-settings-modal.ts
@@ -11,6 +11,8 @@ export async function closeSettingsModal(
   const settingsModalElement = await browser.$(Selectors.SettingsModal);
 
   await settingsModalElement.waitForDisplayed();
+  await browser.screenshot('settings-modal.png');
+
   await browser.clickVisible(Selectors.CloseSettingsModalButton);
   await settingsModalElement.waitForDisplayed({
     reverse: true,
diff --git a/packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts b/packages/compass-e2e-tests/helpers/commands/close-welcome-modal.ts
@@ -9,6 +9,7 @@ export async function closeWelcomeModal(
   }
 
   const welcomeModalElement = await browser.$(Selectors.WelcomeModal);
+  await browser.screenshot('welcome-modal.png');
 
   await welcomeModalElement.waitForDisplayed();
   await browser.clickVisible(Selectors.CloseWelcomeModalButton);
diff --git a/packages/compass-e2e-tests/helpers/commands/drop-collection.ts b/packages/compass-e2e-tests/helpers/commands/drop-collection.ts
@@ -11,6 +11,9 @@ export async function dropCollection(
   await confirmInput.setValue(collectionName);
   const confirmButton = await browser.$(Selectors.DropCollectionDropButton);
   await confirmButton.waitForEnabled();
+
+  await browser.screenshot('drop-collection-modal.png');
+
   await confirmButton.click();
   await dropModalElement.waitForDisplayed({ reverse: true });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/drop-database.ts b/packages/compass-e2e-tests/helpers/commands/drop-database.ts
@@ -11,6 +11,9 @@ export async function dropDatabase(
   await confirmInput.setValue(dbName);
   const confirmButton = await browser.$(Selectors.DropDatabaseDropButton);
   await confirmButton.waitForEnabled();
+
+  await browser.screenshot('drop-database-modal.png');
+
   await confirmButton.click();
   await dropModalElement.waitForDisplayed({ reverse: true });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/export-to-language.ts b/packages/compass-e2e-tests/helpers/commands/export-to-language.ts
@@ -76,6 +76,8 @@ export async function exportToLanguage(
     text = await clipboard.read();
   }
 
+  await browser.screenshot('export-to-language-modal.png');
+
   // close the modal again
   await browser.clickVisible(Selectors.ExportToLanguageCloseButton);
   await exportModal.waitForDisplayed({ reverse: true });
diff --git a/packages/compass-e2e-tests/helpers/commands/index.ts b/packages/compass-e2e-tests/helpers/commands/index.ts
@@ -45,3 +45,4 @@ export * from './select-favorite';
 export * from './select-connection-menu-item';
 export * from './open-settings-modal';
 export * from './wait-for-connection-result';
+export * from './screenshot';
diff --git a/packages/compass-e2e-tests/helpers/commands/save-favorite.ts b/packages/compass-e2e-tests/helpers/commands/save-favorite.ts
@@ -17,6 +17,9 @@ export async function saveFavorite(
   expect(await browser.$(Selectors.FavoriteSaveButton).getText()).to.equal(
     'Save'
   );
+
+  await browser.screenshot('save-favorite-modal.png');
+
   await browser.clickVisible(Selectors.FavoriteSaveButton);
   await browser.$(Selectors.FavoriteModal).waitForExist({ reverse: true });
 }
diff --git a/packages/compass-e2e-tests/helpers/commands/screenshot.ts b/packages/compass-e2e-tests/helpers/commands/screenshot.ts
@@ -0,0 +1,13 @@
+import path from 'path';
+import type { CompassBrowser } from '../compass-browser';
+import { LOG_PATH } from '../compass';
+
+export async function screenshot(
+  browser: CompassBrowser,
+  filename: string
+): Promise<void> {
+  // 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));
+}
diff --git a/packages/compass-e2e-tests/helpers/compass.ts b/packages/compass-e2e-tests/helpers/compass.ts
@@ -35,6 +35,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');
 const COVERAGE_PATH = path.join(LOG_PATH, 'coverage');
 
 // mongodb-runner defaults to stable if the env var isn't there
@@ -363,6 +364,7 @@ async function startCompass(opts: StartCompassOptions = {}): Promise<Compass> {
   await fs.mkdir(path.dirname(chromedriverLogPath), { recursive: true });
   await fs.mkdir(webdriverLogPath, { recursive: true });
   await fs.mkdir(OUTPUT_PATH, { recursive: true });
+  await fs.mkdir(SCREENSHOTS_PATH, { recursive: true });
   await fs.mkdir(COVERAGE_PATH, { recursive: true });
 
   const chromeArgs = [];
diff --git a/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts b/packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts
@@ -83,6 +83,9 @@ describe('Collection aggregations tab', function () {
     await browser.clickVisible(Selectors.CreateNewEmptyPipelineAction);
     const modalElement = await browser.$(Selectors.ConfirmNewPipelineModal);
     await modalElement.waitForDisplayed();
+
+    await browser.screenshot('confirm-new-pipeline-modal.png');
+
     await browser.clickVisible(Selectors.ConfirmNewPipelineModalConfirmButton);
     await modalElement.waitForDisplayed({ reverse: true });
   });
@@ -330,6 +333,8 @@ describe('Collection aggregations tab', function () {
     const viewNameInput = await browser.$(Selectors.CreateViewNameInput);
     await viewNameInput.setValue('my-view-from-pipeline');
 
+    await browser.screenshot('create-view-modal.png');
+
     // click create button
     const createButton = await browser
       .$(Selectors.CreateViewModal)
@@ -348,6 +353,10 @@ describe('Collection aggregations tab', function () {
           'Expected `test.my-view-from-pipeline` namespace tab to be visible',
       }
     );
+
+    // TODO: modify view
+    // TODO: duplicate view
+    // TODO: drop view
   });
 
   it('supports maxTimeMS', async function () {
@@ -542,12 +551,18 @@ describe('Collection aggregations tab', function () {
       Selectors.NewPipelineFromTextConfirmButton
     );
     await confirmButton.waitForEnabled();
+
+    await browser.screenshot('new-pipeline-from-text-modal.png');
+
     await confirmButton.click();
 
     await createModal.waitForDisplayed({ reverse: true });
 
     const confirmModal = await browser.$(Selectors.ConfirmImportPipelineModal);
     await confirmModal.waitForDisplayed();
+
+    await browser.screenshot('confirm-import-pipeline-modal.png');
+
     await browser.clickVisible(
       Selectors.ConfirmImportPipelineModalConfirmButton
     );
@@ -721,6 +736,8 @@ describe('Collection aggregations tab', function () {
     );
     await exportModalShowFileButtonElement.waitForDisplayed();
 
+    await browser.screenshot('export-modal.png');
+
     // Close modal
     await browser.clickVisible(Selectors.ExportModalCloseButton);
     const exportModalElement = await browser.$(Selectors.ExportModal);
@@ -746,6 +763,8 @@ describe('Collection aggregations tab', function () {
 
     expect(await modal.getText()).to.contain('Query Performance Summary');
 
+    await browser.screenshot('aggregation-explain-modal.png');
+
     await browser.clickVisible(Selectors.AggregationExplainModalCloseButton);
     await modal.waitForDisplayed({ reverse: true });
   });
diff --git a/packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts b/packages/compass-e2e-tests/tests/collection-indexes-tab.test.ts
@@ -79,6 +79,8 @@ describe('Collection indexes tab', function () {
     await fieldTypeSelectSpan.waitForDisplayed();
     await fieldTypeSelectSpan.click();
 
+    await browser.screenshot('create-index-modal-basic.png');
+
     await browser.clickVisible(Selectors.CreateIndexConfirmButton);
 
     await createModal.waitForDisplayed({ reverse: true });
@@ -100,6 +102,8 @@ describe('Collection indexes tab', function () {
     await confirmInput.waitForDisplayed();
     await confirmInput.setValue('i_text');
 
+    await browser.screenshot('drop-index-modal.png');
+
     await browser.clickVisible(Selectors.DropIndexModalConfirmButton);
 
     await dropModal.waitForDisplayed({ reverse: true });
@@ -160,6 +164,8 @@ describe('Collection indexes tab', function () {
         '{ "fieldA": 1, "fieldB.fieldC": 1 }'
       );
 
+      await browser.screenshot('create-index-modal-wildcard.png');
+
       await browser.clickVisible(Selectors.CreateIndexConfirmButton);
 
       await createModal.waitForDisplayed({ reverse: true });
@@ -214,6 +220,8 @@ describe('Collection indexes tab', function () {
       await fieldTypeSelectSpan.waitForDisplayed();
       await fieldTypeSelectSpan.click();
 
+      await browser.screenshot('create-index-modal-columnstore.png');
+
       await browser.clickVisible(Selectors.CreateIndexConfirmButton);
 
       await createModal.waitForDisplayed({ reverse: true });
diff --git a/packages/compass-e2e-tests/tests/connection-form.test.ts b/packages/compass-e2e-tests/tests/connection-form.test.ts
@@ -583,6 +583,9 @@ describe('Connection form', function () {
     );
 
     await browser.$(Selectors.FavoriteSaveButton).waitForEnabled();
+
+    await browser.screenshot('save-favorite-modal-new.png');
+
     await browser.clickVisible(Selectors.FavoriteSaveButton);
     await browser.$(Selectors.FavoriteModal).waitForExist({ reverse: true });
 
diff --git a/packages/compass-e2e-tests/tests/connection.test.ts b/packages/compass-e2e-tests/tests/connection.test.ts
@@ -197,6 +197,8 @@ async function assertCannotCreateDb(
     `not authorized on ${dbName} to execute command`
   );
 
+  await browser.screenshot('create-database-modal-error.png');
+
   // cancel and wait for the modal to go away
   await browser.clickVisible(Selectors.CreateDatabaseCancelButton);
   await createModalElement.waitForDisplayed({ reverse: true });
@@ -234,6 +236,8 @@ async function assertCannotCreateCollection(
     `not authorized on ${dbName} to execute command`
   );
 
+  await browser.screenshot('create-collection-modal-error.png');
+
   // cancel and wait for the modal to go away
   await browser.clickVisible(Selectors.CreateCollectionCancelButton);
   await createModalElement.waitForDisplayed({ reverse: true });
diff --git a/packages/compass-e2e-tests/tests/database-collections-tab.test.ts b/packages/compass-e2e-tests/tests/database-collections-tab.test.ts
diff --git a/packages/compass-e2e-tests/tests/in-use-encryption.test.ts b/packages/compass-e2e-tests/tests/in-use-encryption.test.ts
diff --git a/packages/compass-e2e-tests/tests/instance-databases-tab.test.ts b/packages/compass-e2e-tests/tests/instance-databases-tab.test.ts
diff --git a/packages/compass-e2e-tests/tests/instance-my-queries-tab.test.ts b/packages/compass-e2e-tests/tests/instance-my-queries-tab.test.ts
diff --git a/packages/compass-e2e-tests/tests/instance-sidebar.test.ts b/packages/compass-e2e-tests/tests/instance-sidebar.test.ts

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@ export async function closeWelcomeModal(`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`const welcomeModalElement = await browser.$(Selectors.WelcomeModal);`
	`12`	`+ await browser.screenshot('welcome-modal.png');`
`12`	`13`
`13`	`14`	`await welcomeModalElement.waitForDisplayed();`
`14`	`15`	`await browser.clickVisible(Selectors.CloseWelcomeModalButton);`
Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,8 @@ export async function exportToLanguage(`
`76`	`76`	`text = await clipboard.read();`
`77`	`77`	`}`
`78`	`78`
	`79`	`+ await browser.screenshot('export-to-language-modal.png');`
	`80`	`+`
`79`	`81`	`// close the modal again`
`80`	`82`	`await browser.clickVisible(Selectors.ExportToLanguageCloseButton);`
`81`	`83`	`await exportModal.waitForDisplayed({ reverse: true });`