🪟 🚦 E2E tests: clean up matchers (#20887)

* improve serviceTypeDropdownOption selector

* add test ids to PathPopout component(s)

* add unique id's to table dropdowns

* extend submitButtonClick to support optional click options

* update dropdown(pathPopout) matchers

* add test-id to Overlay component

* remove redundant function brackets

* revert changes onSubmit button click

* fix dropDown overlay issue

* move all duplicated intercepters to beforeEach

* add test id's to Connections, Sources and Destinations tables

* add table helper functions

* update source page actions

* intercepter fixes

* update createTestConnection function with optional replication settings

* remove extra Connection name check

* replace "cypress-postgres" with "pg-promise" npm package

* update cypress config

* Revert "update createTestConnection function with optional replication settings"

This reverts commit 8e47c78.

* Revert "remove extra Connection name check"

This reverts commit dfb19c7.

* replace openSourceDestinationFromGrid with specific selector

* replace openSourceDestinationFromGrid with specific selector

* turn on test

* add test-id's

* fix selectors

* update test

* update test snapshots

* fix lost data-testid after resolve merge conflicts

* remove extra check

* move clickOnCellInTable helper to common.ts file

* remove empty line and comments

* fix dropdownType

* replace partial string check with exact

* extract interceptors and waiters to separate file

* fix selector for predefined PK

* fix selector

* add comment regarding dropdown

airbyte-webapp-e2e-tests/cypress/commands/common.ts

@@ -31,3 +31,21 @@ export const appendRandomString = (string: string) => {
   const randomString = Math.random().toString(36).substring(2, 10);
   return `${string} _${randomString}`;
 };
+
+/**
+ * Click on specific cell found by column name in desired table
+ * @param tableSelector - table selector
+ * @param columnName - column name
+ * @param connectName - cell text
+ */
+export const clickOnCellInTable = (tableSelector: string, columnName: string, connectName: string) => {
+  cy.contains(`${tableSelector} th`, columnName)
+    .invoke("index")
+    .then((value) => {
+      cy.log(`${value}`);
+      return cy.wrap(value);
+    })
+    .then((columnIndex) => {
+      cy.contains("tbody tr", connectName).find("td").eq(columnIndex).click();
+    });
+};

airbyte-webapp-e2e-tests/cypress/commands/interceptors.ts

@@ -0,0 +1,6 @@
+export const interceptGetConnectionRequest = () => cy.intercept("/api/v1/web_backend/connections/get").as("getConnection")
+export const waitForGetConnectionRequest = () => cy.wait("@getConnection");
+
+export const interceptUpdateConnectionRequest = () =>
+  cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
+export const waitForUpdateConnectionRequest = () => cy.wait("@updateConnection", { timeout: 10000 });