From b9e2af398a814f24944f38dee687125bd8c3f064 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Mon, 26 Dec 2022 19:45:52 +0200
Subject: [PATCH 01/37] improve serviceTypeDropdownOption selector

---
 .../cypress/pages/createConnectorPage.ts               | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/createConnectorPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/createConnectorPage.ts
index f2ae7a529c4c..44bee2632352 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/createConnectorPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/createConnectorPage.ts
@@ -1,4 +1,5 @@
 const selectTypeDropdown = "div[data-testid='serviceType']";
+const getServiceTypeDropdownOption = (serviceName: string) => `div[data-testid='${serviceName}']`;
 const nameInput = "input[name=name]";
 const hostInput = "input[name='connectionConfiguration.host']";
 const portInput = "input[name='connectionConfiguration.port']";
@@ -9,10 +10,11 @@ const pokemonNameInput = "input[name='connectionConfiguration.pokemon_name']";
 const schemaInput = "[data-testid='tag-input'] input";
 const destinationPathInput = "input[name='connectionConfiguration.destination_path']";
 
-export const selectServiceType = (type: string) => {
-  cy.get(selectTypeDropdown).click();
-  cy.get("div").contains(type).click();
-};
+export const selectServiceType = (type: string) =>
+  cy
+    .get(selectTypeDropdown)
+    .click()
+    .within(() => cy.get(getServiceTypeDropdownOption(type)).click());
 
 export const enterName = (name: string) => {
   cy.get(nameInput).clear().type(name);

From 1d465f097a6dbe501b2e6add909ce5e77f835d4f Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 27 Dec 2022 15:34:14 +0200
Subject: [PATCH 02/37] add test ids to PathPopout component(s)

---
 .../connection/CatalogTree/PathPopout.tsx     | 19 +++++++++++++++++--
 .../CatalogTree/PathPopoutButton.tsx          |  4 +++-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/PathPopout.tsx b/airbyte-webapp/src/components/connection/CatalogTree/PathPopout.tsx
index 3e1bae6df130..dfb6ffbdfbab 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/PathPopout.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/PathPopout.tsx
@@ -19,6 +19,7 @@ interface PathPopoutBaseProps {
   paths: Path[];
   pathType: "required" | "sourceDefined";
   placeholder?: React.ReactNode;
+  id?: string;
 }
 
 interface PathMultiProps {
@@ -36,12 +37,21 @@ interface PathProps {
 type PathPopoutProps = PathPopoutBaseProps & (PathMultiProps | PathProps);
 
 export const PathPopout: React.FC<PathPopoutProps> = (props) => {
+  const pathPopoutId = `${props.id}_pathPopout`;
+
   if (props.pathType === "sourceDefined") {
     if (props.path && props.path.length > 0) {
       const text = props.isMulti ? props.path.map(pathDisplayName).join(", ") : pathDisplayName(props.path);
 
       return (
-        <Tooltip placement="bottom-start" control={<div className={styles.text}>{text}</div>}>
+        <Tooltip
+          placement="bottom-start"
+          control={
+            <div className={styles.text} data-testid={`${pathPopoutId}_text`}>
+              {text}
+            </div>
+          }
+        >
           {text}
         </Tooltip>
       );
@@ -74,8 +84,13 @@ export const PathPopout: React.FC<PathPopoutProps> = (props) => {
       }}
       placeholder={props.placeholder}
       components={props.isMulti ? { MultiValue: () => null } : undefined}
+      id={pathPopoutId}
       targetComponent={({ onOpen }) => (
-        <PathPopoutButton items={props.isMulti ? props.path?.map(pathDisplayName) : props.path} onClick={onOpen}>
+        <PathPopoutButton
+          items={props.isMulti ? props.path?.map(pathDisplayName) : props.path}
+          onClick={onOpen}
+          testId={pathPopoutId}
+        >
           {text}
         </PathPopoutButton>
       )}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.tsx b/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.tsx
index b7c685c5870b..1af6d7af3e1c 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/PathPopoutButton.tsx
@@ -10,16 +10,18 @@ import styles from "./PathPopoutButton.module.scss";
 interface PathPopoutButtonProps {
   items?: string[];
   onClick: React.MouseEventHandler;
+  testId?: string;
 }
 
 export const PathPopoutButton: React.FC<React.PropsWithChildren<PathPopoutButtonProps>> = ({
   items = [],
   onClick,
   children,
+  testId,
 }) => (
   <Tooltip
     control={
-      <button className={styles.button} onClick={onClick}>
+      <button className={styles.button} onClick={onClick} data-testid={testId}>
         <Text size="sm" className={styles.text}>
           {children}
         </Text>

From 56cb9ecfcae31429a8b0327f45589c131872b591 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 27 Dec 2022 15:42:50 +0200
Subject: [PATCH 03/37] add unique id's to table dropdowns

---
 .../src/components/connection/CatalogTree/StreamHeader.tsx      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
index 9a1690c118b2..62f3b72988e2 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
@@ -152,6 +152,7 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
               path={cursorType === "sourceDefined" ? defaultCursorField : cursorField}
               placeholder={<FormattedMessage id="connectionForm.cursor.searchPlaceholder" />}
               onPathChange={onCursorChange}
+              id={`${stream.stream?.name}_cursor`}
             />
           )}
         </HeaderCell>
@@ -164,6 +165,7 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
               isMulti
               placeholder={<FormattedMessage id="connectionForm.primaryKey.searchPlaceholder" />}
               onPathChange={onPrimaryKeyChange}
+              id={`${stream.stream?.name}_primaryKey`}
             />
           )}
         </HeaderCell>

From 18e5af6d2b6aa9eb62ba767c94300cdbee7b9bdd Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 27 Dec 2022 15:43:33 +0200
Subject: [PATCH 04/37] extend submitButtonClick to support optional click
 options

---
 airbyte-webapp-e2e-tests/cypress/commands/common.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/commands/common.ts b/airbyte-webapp-e2e-tests/cypress/commands/common.ts
index 030e4e924f5f..6041ab298f58 100644
--- a/airbyte-webapp-e2e-tests/cypress/commands/common.ts
+++ b/airbyte-webapp-e2e-tests/cypress/commands/common.ts
@@ -1,5 +1,5 @@
-export const submitButtonClick = () => {
-  cy.get("button[type=submit]").click();
+export const submitButtonClick = (options?: Partial<Cypress.ClickOptions> | undefined) => {
+  cy.get("button[type=submit]").click(options);
 };
 
 export const updateField = (field: string, value: string) => {

From 7d211d3791598c7d5e6ee5122a728213f91c9f1c Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 27 Dec 2022 15:45:52 +0200
Subject: [PATCH 05/37] update dropdown(pathPopout) matchers

---
 .../cypress/integration/connection.spec.ts    |  39 +++---
 .../cypress/pages/replicationPage.ts          | 132 ++++++++++++------
 2 files changed, 113 insertions(+), 58 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 7fea0fa55d2c..b034799b214d 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -23,11 +23,11 @@ import {
   selectPrimaryKeyField,
   checkPreFilledPrimaryKeyField,
   checkStreamFields,
-  expandStreamDetails
+  expandStreamDetails,
 } from "pages/replicationPage";
 import { openSourceDestinationFromGrid, goToSourcePage } from "pages/sourcePage";
 import { goToSettingsPage } from "pages/settingsConnectionPage";
-import { cleanDBSource, makeChangesInDBSource, populateDBSource } from "../commands/db";
+import { cleanDBSource, makeChangesInDBSource, populateDBSource } from "commands/db";
 import {
   catalogDiffModal,
   newFieldsTable,
@@ -35,8 +35,8 @@ import {
   removedFieldsTable,
   removedStreamsTable,
   toggleStreamWithChangesAccordion,
-} from "../pages/modals/catalogDiffModal";
-import { updateSchemaModalConfirmBtnClick } from "../pages/modals/updateSchemaModal";
+} from "pages/modals/catalogDiffModal";
+import { updateSchemaModalConfirmBtnClick } from "pages/modals/updateSchemaModal";
 
 describe("Connection - main actions", () => {
   beforeEach(() => {
@@ -408,6 +408,7 @@ describe("Connection sync modes", () => {
   it("Connection sync mode Incremental Append", () => {
     const sourceName = appendRandomString("Test connection Postgres source cypress");
     const destName = appendRandomString("Test connection Postgres destination cypress");
+    const streamName = "users";
 
     cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
 
@@ -419,11 +420,11 @@ describe("Connection sync modes", () => {
 
     goToReplicationTab();
 
-    searchStream("users");
+    searchStream(streamName);
     selectSyncMode("Incremental", "Append");
-    selectCursorField("col1");
+    selectCursorField(streamName, "col1");
 
-    submitButtonClick();
+    submitButtonClick({force: true});
     confirmStreamConfigurationChangedPopup();
 
     cy.wait("@updateConnection", { timeout: 5000 }).then((interception) => {
@@ -439,7 +440,7 @@ describe("Connection sync modes", () => {
     goToReplicationTab();
 
     searchStream("users");
-    checkCursorField("col1");
+    checkCursorField(streamName, "col1");
 
     deleteSource(sourceName);
     deleteDestination(destName);
@@ -448,6 +449,7 @@ describe("Connection sync modes", () => {
   it("Connection sync mode Incremental Deduped History - PK is defined", () => {
     const sourceName = appendRandomString("Test connection Postgres source cypress");
     const destName = appendRandomString("Test connection Postgres destination cypress");
+    const streamName = "users";
 
     cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
 
@@ -459,9 +461,9 @@ describe("Connection sync modes", () => {
 
     goToReplicationTab();
 
-    searchStream("users");
+    searchStream(streamName);
     selectSyncMode("Incremental", "Deduped + history");
-    selectCursorField("col1");
+    selectCursorField(streamName, "col1");
     checkPreFilledPrimaryKeyField("id");
 
     submitButtonClick();
@@ -479,9 +481,9 @@ describe("Connection sync modes", () => {
 
     goToReplicationTab();
 
-    searchStream("users");
+    searchStream(streamName);
 
-    checkCursorField("col1");
+    checkCursorField(streamName, "col1");
     checkPreFilledPrimaryKeyField("id");
 
     deleteSource(sourceName);
@@ -491,6 +493,7 @@ describe("Connection sync modes", () => {
   it("Connection sync mode Incremental Deduped History - PK is not defined", () => {
     const sourceName = appendRandomString("Test connection Postgres source cypress");
     const destName = appendRandomString("Test connection Postgres destination cypress");
+    const streamName = "cities";
 
     cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
 
@@ -502,11 +505,11 @@ describe("Connection sync modes", () => {
 
     goToReplicationTab();
 
-    searchStream("cities");
+    searchStream(streamName);
     selectSyncMode("Incremental", "Deduped + history");
-    selectCursorField("city");
+    selectCursorField(streamName, "city");
     isPrimaryKeyNonExist();
-    selectPrimaryKeyField("city_code");
+    selectPrimaryKeyField(streamName, ["city_code"]);
 
     submitButtonClick();
     confirmStreamConfigurationChangedPopup();
@@ -523,10 +526,10 @@ describe("Connection sync modes", () => {
 
     goToReplicationTab();
 
-    searchStream("cities");
+    searchStream(streamName);
 
-    checkCursorField("city");
-    checkPrimaryKey("city_code");
+    checkCursorField(streamName, "city");
+    checkPrimaryKey(streamName, ["city", "city_code"]);
 
     deleteSource(sourceName);
     deleteDestination(destName);
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index cd7bcab3e15e..16fabb86bbb5 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -8,20 +8,24 @@ const destinationNamespaceDefault = "div[data-testid='namespaceDefinition-destin
 const destinationNamespaceSource = "div[data-testid='namespaceDefinition-source']";
 const destinationNamespaceCustomInput = "input[data-testid='input']";
 const syncModeDropdown = "div[data-testid='syncSettingsDropdown'] input";
-const cursorFieldDropdown = "button[class^='PathPopoutButton_button']";
+// Table dropdown (pathPopout)
+const getFieldDropdownContainer = (streamName: string, type: string) => `div[id='${streamName}_${type}_pathPopout']`;
+const getFieldDropdownButton = (streamName: string, type: string) =>
+  `button[data-testid='${streamName}_${type}_pathPopout']`;
+const getFieldDropdownOption = (value: string) => `div[data-testid='${value}']`;
+
 const streamFieldNames = "[class^='TreeRowWrapper_rowWrapper'] span";
 const streamDataTypes = "[class^='TreeRowWrapper_rowWrapper'] div:nth-child(2)";
 const ExpandStreamDetailsTableBtn = "[class^='Arrow_container__']";
-const cursorFieldText = "[class^='PathPopoutButton_button__']";
-const primaryKeyText = "[class^='PathPopoutButton_button__']";
 const preFilledPrimaryKeyText = "div[class^='PathPopout_text']";
-const primaryKeyDropdown = "button[class^='PathPopoutButton_button']";
+
 const successResult = "div[data-id='success-result']";
 const saveStreamChangesButton = "button[data-testid='resetModal-save']";
 const connectionNameInput = "input[data-testid='connectionName']";
 const refreshSourceSchemaButton = "button[data-testid='refresh-source-schema-btn']";
 const streamSyncEnabledSwitch = (streamName: string) => `[data-testid='${streamName}-stream-sync-switch']`;
 const streamNameInput = "input[data-testid='input']";
+const resetModalSaveButton = "[data-testid='resetModal-save']";
 
 export const goToReplicationTab = () => {
   cy.get(replicationTab).click();
@@ -55,13 +59,9 @@ export const setupDestinationNamespaceSourceFormat = () => {
   cy.get(destinationNamespaceSource).click();
 };
 
-export const refreshSourceSchemaBtnClick = () => {
-  cy.get(refreshSourceSchemaButton).click();
-};
+export const refreshSourceSchemaBtnClick = () => cy.get(refreshSourceSchemaButton).click();
 
-export const resetModalSaveBtnClick = () => {
-  cy.get("[data-testid='resetModal-save']").click();
-};
+export const resetModalSaveBtnClick = () => cy.get(resetModalSaveButton).click();
 
 export const setupDestinationNamespaceDefaultFormat = () => {
   cy.get(destinationNamespace).click();
@@ -74,30 +74,88 @@ export const selectSyncMode = (source: string, dest: string) => {
   cy.get(`.react-select__option`).contains(`Source:${source}|Dest:${dest}`).click();
 };
 
-export const selectCursorField = (value: string) => {
-  cy.get(cursorFieldDropdown).first().click({ force: true });
-
-  cy.get(`.react-select__option`).contains(value).click();
-};
-
-export const checkStreamFields = (listNames: Array<String>, listTypes: Array<String>,) => {
-  cy.get(streamFieldNames)
-   .each(($span, i) => {
-        expect($span.text()).to.equal(listNames[i]);
-   });
-
-   cy.get(streamDataTypes)
-   .each(($span, i) => {
-        expect($span.text()).to.equal(listTypes[i]);
-   });
-};
-
-export const checkCursorField = (expectedValue: string) => {
-  cy.get(cursorFieldText).first().contains(expectedValue);
-};
-
-export const checkPrimaryKey = (expectedValue: string) => {
-  cy.get(primaryKeyText).last().contains(expectedValue);
+type Dropdown = "cursor" | "primaryKey";
+/**
+ * General function - select dropdown option(s)
+ * @param streamName
+ * @param dropdownType
+ * @param value
+ */
+const selectFieldDropdownOption = (streamName: string, dropdownType: Dropdown, value: string | string[]) => {
+  const container = getFieldDropdownContainer(streamName, dropdownType);
+  const button = getFieldDropdownButton(streamName, dropdownType);
+
+  cy.get(container).within(() => {
+    cy.get(button).click();
+
+    if (Array.isArray(value)) {
+      // in case if checkboxes
+      value.forEach((v) => cy.get(getFieldDropdownOption(v)).click());
+    } else {
+      // in case if radiobutton
+      cy.get(getFieldDropdownOption(value)).click();
+    }
+  });
+  // click outside(close dropdown)
+  cy.get("body").click(0, 0);
+};
+
+/**
+ * Select cursor value from cursor dropdown(pathPopout) in desired stream
+ * @param streamName
+ * @param cursorValue
+ */
+export const selectCursorField = (streamName: string, cursorValue: string) =>
+  selectFieldDropdownOption(streamName, "cursor", cursorValue);
+
+/**
+ * Select primary key value(s) from primary key dropdown(pathPopout) in desired stream
+ * @param streamName
+ * @param primaryKeyValues
+ */
+export const selectPrimaryKeyField = (streamName: string, primaryKeyValues: string[]) => {
+  selectFieldDropdownOption(streamName, "primaryKey", primaryKeyValues);
+};
+
+export const checkStreamFields = (listNames: Array<String>, listTypes: Array<String>) => {
+  cy.get(streamFieldNames).each(($span, i) => {
+    expect($span.text()).to.equal(listNames[i]);
+  });
+
+  cy.get(streamDataTypes).each(($span, i) => {
+    expect($span.text()).to.equal(listTypes[i]);
+  });
+};
+
+/**
+ * General function - check selected field dropdown option or options
+ * @param streamName
+ * @param dropdownType
+ * @param expectedValue
+ */
+const checkDropdownField = (streamName: string, dropdownType: Dropdown, expectedValue: string | string[]) => {
+  const button = getFieldDropdownButton(streamName, dropdownType);
+  return Array.isArray(expectedValue)
+    ? expectedValue.forEach((v) => cy.get(button).contains(v))
+    : cy.get(button).contains(expectedValue);
+};
+
+/**
+ * Check selected value in cursor dropdown
+ * @param streamName
+ * @param expectedValue
+ */
+export const checkCursorField = (streamName: string, expectedValue: string) => {
+  checkDropdownField(streamName, "cursor", expectedValue);
+};
+
+/**
+ * Check selected value(s) in primary key dropdown
+ * @param streamName
+ * @param expectedValues
+ */
+export const checkPrimaryKey = (streamName: string, expectedValues: string[]) => {
+  checkDropdownField(streamName, "primaryKey", expectedValues);
 };
 
 export const checkPreFilledPrimaryKeyField = (expectedValue: string) => {
@@ -108,12 +166,6 @@ export const isPrimaryKeyNonExist = () => {
   cy.get(preFilledPrimaryKeyText).should("not.exist");
 };
 
-export const selectPrimaryKeyField = (value: string) => {
-  cy.get(primaryKeyDropdown).last().click({ force: true });
-
-  cy.get(`.react-select__option`).contains(value).click();
-};
-
 export const searchStream = (value: string) => {
   cy.get(streamNameInput).type(value);
 };

From 22a92fdae1b813491eee8ec2243f2ee085510bb6 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 27 Dec 2022 17:19:31 +0200
Subject: [PATCH 06/37] add test-id to Overlay component

---
 airbyte-webapp/src/components/ui/Overlay/Overlay.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/airbyte-webapp/src/components/ui/Overlay/Overlay.tsx b/airbyte-webapp/src/components/ui/Overlay/Overlay.tsx
index 78508382c510..b4c7c8a84716 100644
--- a/airbyte-webapp/src/components/ui/Overlay/Overlay.tsx
+++ b/airbyte-webapp/src/components/ui/Overlay/Overlay.tsx
@@ -15,5 +15,6 @@ export const Overlay: React.FC<OverlayProps> = ({ variant = "dark", onClick }) =
     role={onClick ? "button" : undefined}
     onClick={onClick}
     aria-hidden="true"
+    data-test-id="overlayContainer"
   />
 );

From 9ed2cd6973eaaadc1658efb671c99dad47327ea8 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 27 Dec 2022 17:21:03 +0200
Subject: [PATCH 07/37] remove redundant function brackets

---
 .../cypress/pages/replicationPage.ts                     | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index 16fabb86bbb5..4eb063680b23 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -113,9 +113,8 @@ export const selectCursorField = (streamName: string, cursorValue: string) =>
  * @param streamName
  * @param primaryKeyValues
  */
-export const selectPrimaryKeyField = (streamName: string, primaryKeyValues: string[]) => {
+export const selectPrimaryKeyField = (streamName: string, primaryKeyValues: string[]) =>
   selectFieldDropdownOption(streamName, "primaryKey", primaryKeyValues);
-};
 
 export const checkStreamFields = (listNames: Array<String>, listTypes: Array<String>) => {
   cy.get(streamFieldNames).each(($span, i) => {
@@ -145,18 +144,16 @@ const checkDropdownField = (streamName: string, dropdownType: Dropdown, expected
  * @param streamName
  * @param expectedValue
  */
-export const checkCursorField = (streamName: string, expectedValue: string) => {
+export const checkCursorField = (streamName: string, expectedValue: string) =>
   checkDropdownField(streamName, "cursor", expectedValue);
-};
 
 /**
  * Check selected value(s) in primary key dropdown
  * @param streamName
  * @param expectedValues
  */
-export const checkPrimaryKey = (streamName: string, expectedValues: string[]) => {
+export const checkPrimaryKey = (streamName: string, expectedValues: string[]) =>
   checkDropdownField(streamName, "primaryKey", expectedValues);
-};
 
 export const checkPreFilledPrimaryKeyField = (expectedValue: string) => {
   cy.get(preFilledPrimaryKeyText).contains(expectedValue);

From 5d32f6eeea8b5f94e923c6d6a63fca38ed35c410 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 27 Dec 2022 17:32:49 +0200
Subject: [PATCH 08/37] revert changes onSubmit button click

---
 airbyte-webapp-e2e-tests/cypress/commands/common.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/commands/common.ts b/airbyte-webapp-e2e-tests/cypress/commands/common.ts
index 6041ab298f58..030e4e924f5f 100644
--- a/airbyte-webapp-e2e-tests/cypress/commands/common.ts
+++ b/airbyte-webapp-e2e-tests/cypress/commands/common.ts
@@ -1,5 +1,5 @@
-export const submitButtonClick = (options?: Partial<Cypress.ClickOptions> | undefined) => {
-  cy.get("button[type=submit]").click(options);
+export const submitButtonClick = () => {
+  cy.get("button[type=submit]").click();
 };
 
 export const updateField = (field: string, value: string) => {

From 5b8af847814a187211f827fb9bd02f1f48e7d324 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 27 Dec 2022 17:33:50 +0200
Subject: [PATCH 09/37] fix dropDown overlay issue

---
 .../cypress/integration/connection.spec.ts          |  2 +-
 .../cypress/pages/replicationPage.ts                | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index b034799b214d..a94eae2c48ad 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -424,7 +424,7 @@ describe("Connection sync modes", () => {
     selectSyncMode("Incremental", "Append");
     selectCursorField(streamName, "col1");
 
-    submitButtonClick({force: true});
+    submitButtonClick();
     confirmStreamConfigurationChangedPopup();
 
     cy.wait("@updateConnection", { timeout: 5000 }).then((interception) => {
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index 4eb063680b23..72ac1fe9e347 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -13,6 +13,7 @@ const getFieldDropdownContainer = (streamName: string, type: string) => `div[id=
 const getFieldDropdownButton = (streamName: string, type: string) =>
   `button[data-testid='${streamName}_${type}_pathPopout']`;
 const getFieldDropdownOption = (value: string) => `div[data-testid='${value}']`;
+const dropDownOverlayContainer = "div[data-testid='overlayContainer']"
 
 const streamFieldNames = "[class^='TreeRowWrapper_rowWrapper'] span";
 const streamDataTypes = "[class^='TreeRowWrapper_rowWrapper'] div:nth-child(2)";
@@ -89,15 +90,19 @@ const selectFieldDropdownOption = (streamName: string, dropdownType: Dropdown, v
     cy.get(button).click();
 
     if (Array.isArray(value)) {
-      // in case if checkboxes
+      // in case if multiple options need to be selected
       value.forEach((v) => cy.get(getFieldDropdownOption(v)).click());
     } else {
-      // in case if radiobutton
+      // in case if one option need to be selected
       cy.get(getFieldDropdownOption(value)).click();
     }
   });
-  // click outside(close dropdown)
-  cy.get("body").click(0, 0);
+  // close dropdown - click on dropdown overlay if exist
+  cy.get("body").then(($body) => {
+    if ($body.find(dropDownOverlayContainer).length > 0) {
+      cy.get(dropDownOverlayContainer).click();
+    }
+  });
 };
 
 /**

From 0152c380643be371d3744bf6455fc1f9d5cde8b1 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 15:16:19 +0200
Subject: [PATCH 10/37] move all duplicated intercepters to beforeEach

---
 .../cypress/integration/connection.spec.ts    | 26 +++++--------------
 1 file changed, 7 insertions(+), 19 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index a94eae2c48ad..6078eb9bb746 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -41,6 +41,9 @@ import { updateSchemaModalConfirmBtnClick } from "pages/modals/updateSchemaModal
 describe("Connection - main actions", () => {
   beforeEach(() => {
     initialSetupCompleted();
+
+    cy.intercept("/api/v1/web_backend/connections/get").as("getConnection");
+    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
   });
 
   it("Create new connection", () => {
@@ -86,8 +89,6 @@ describe("Connection - main actions", () => {
   });
 
   it("Update connection (pokeAPI)", () => {
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     const sourceName = appendRandomString("Test update connection PokeAPI source cypress");
     const destName = appendRandomString("Test update connection Local JSON destination cypress");
 
@@ -179,9 +180,6 @@ describe("Connection - main actions", () => {
   });
 
   it("Saving a connection's schedule type only changes expected values", () => {
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-    cy.intercept("/api/v1/web_backend/connections/get").as("getConnection");
-
     const sourceName = appendRandomString("Test update connection PokeAPI source cypress");
     const destName = appendRandomString("Test update connection Local JSON destination cypress");
 
@@ -245,8 +243,6 @@ describe("Connection - main actions", () => {
   });
 
   it("Saving a connection's destination namespace with 'Custom format' option", () => {
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     const sourceName = appendRandomString("Test update connection PokeAPI source cypress");
     const destName = appendRandomString("Test update connection Local JSON destination cypress");
 
@@ -291,8 +287,6 @@ describe("Connection - main actions", () => {
   });
 
   it("Saving a connection's destination namespace with 'Mirror source structure' option", () => {
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     const sourceName = appendRandomString("Test update connection PokeAPI source cypress");
     const destName = appendRandomString("Test update connection Local JSON destination cypress");
 
@@ -314,8 +308,6 @@ describe("Connection - main actions", () => {
   });
 
   it("Saving a connection's destination namespace with 'Destination default' option", () => {
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     const sourceName = appendRandomString("Test update connection PokeAPI source cypress");
     const destName = appendRandomString("Test update connection Local JSON destination cypress");
 
@@ -399,6 +391,8 @@ describe("Connection sync modes", () => {
   beforeEach(() => {
     initialSetupCompleted();
     populateDBSource();
+
+    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
   });
 
   afterEach(() => {
@@ -410,8 +404,6 @@ describe("Connection sync modes", () => {
     const destName = appendRandomString("Test connection Postgres destination cypress");
     const streamName = "users";
 
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
@@ -451,8 +443,6 @@ describe("Connection sync modes", () => {
     const destName = appendRandomString("Test connection Postgres destination cypress");
     const streamName = "users";
 
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
@@ -495,8 +485,6 @@ describe("Connection sync modes", () => {
     const destName = appendRandomString("Test connection Postgres destination cypress");
     const streamName = "cities";
 
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
@@ -540,6 +528,8 @@ describe("Connection - detect changes in source", () => {
   beforeEach(() => {
     initialSetupCompleted();
     populateDBSource();
+
+    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
   });
 
   afterEach(() => {
@@ -547,8 +537,6 @@ describe("Connection - detect changes in source", () => {
   });
 
   it("Create a connection, update data in source, show diff modal, reset streams", () => {
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     const sourceName = appendRandomString(
       "Test refresh source schema with changed data - connection Postgres source cypress"
     );

From bab5eb82b309d734e4105c5ea9cb314eb4751dc3 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 19:05:11 +0200
Subject: [PATCH 11/37] add test id's to Connections, Sources and Destinations
 tables

---
 .../src/components/EntityTable/ConnectionTable.tsx           | 2 +-
 .../src/components/EntityTable/ImplementationTable.tsx       | 2 +-
 airbyte-webapp/src/components/ui/Table/Table.tsx             | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx
index e57b1e15bc05..9285818c30ce 100644
--- a/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx
+++ b/airbyte-webapp/src/components/EntityTable/ConnectionTable.tsx
@@ -178,7 +178,7 @@ const ConnectionTable: React.FC<IProps> = ({ data, entity, onClickRow, onSync })
     [sortBy, sortOrder, entity, onSortClick, onSync, allowSync, allowAutoDetectSchema]
   );
 
-  return <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows />;
+  return <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows testId="connectionsTable" />;
 };
 
 export default ConnectionTable;
diff --git a/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx b/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx
index 6c06dee979a6..ab55ba515206 100644
--- a/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx
+++ b/airbyte-webapp/src/components/EntityTable/ImplementationTable.tsx
@@ -132,7 +132,7 @@ const ImplementationTable: React.FC<IProps> = ({ data, entity, onClickRow }) =>
 
   return (
     <div className={styles.content}>
-      <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows />
+      <Table columns={columns} data={sortingData} onClickRow={onClickRow} erroredRows testId={`${entity}sTable`} />
     </div>
   );
 };
diff --git a/airbyte-webapp/src/components/ui/Table/Table.tsx b/airbyte-webapp/src/components/ui/Table/Table.tsx
index 6d07ab6b8a0d..7300b9964ed8 100644
--- a/airbyte-webapp/src/components/ui/Table/Table.tsx
+++ b/airbyte-webapp/src/components/ui/Table/Table.tsx
@@ -110,9 +110,10 @@ interface TableProps {
   onClickRow?: (data: any) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   sortBy?: Array<SortingRule<any>>;
+  testId?: string;
 }
 
-export const Table: React.FC<TableProps> = memo(({ columns, data, onClickRow, erroredRows, sortBy, light }) => {
+export const Table: React.FC<TableProps> = memo(({ columns, data, onClickRow, erroredRows, sortBy, light, testId }) => {
   const [plugins, config] = useMemo(() => {
     const pl = [];
     const plConfig: Record<string, unknown> = {};
@@ -133,7 +134,7 @@ export const Table: React.FC<TableProps> = memo(({ columns, data, onClickRow, er
   );
 
   return (
-    <TableView {...getTableProps()} light={light}>
+    <TableView {...getTableProps()} light={light} data-testid={testId}>
       <thead>
         {headerGroups.map((headerGroup, key) => (
           <tr {...headerGroup.getHeaderGroupProps()} key={`table-header-${key}`}>

From cbf8af4eb4f01e9d807a0b2a12e821ce6890e833 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 19:06:23 +0200
Subject: [PATCH 12/37] add table helper functions

---
 .../cypress/pages/helpers/table.ts              | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 airbyte-webapp-e2e-tests/cypress/pages/helpers/table.ts

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/helpers/table.ts b/airbyte-webapp-e2e-tests/cypress/pages/helpers/table.ts
new file mode 100644
index 000000000000..e3e42065a1ed
--- /dev/null
+++ b/airbyte-webapp-e2e-tests/cypress/pages/helpers/table.ts
@@ -0,0 +1,17 @@
+/**
+ * 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();
+    });
+};

From 430bd20274a521ca548b63eb2b98d22ff9d1bb40 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 19:21:54 +0200
Subject: [PATCH 13/37] update source page actions

---
 .../cypress/integration/connection.spec.ts          |  8 ++++----
 .../cypress/pages/settingsConnectionPage.ts         | 13 +++++++++++++
 .../cypress/pages/sourcePage.ts                     |  8 ++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 6078eb9bb746..6c84a800fea8 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -25,8 +25,8 @@ import {
   checkStreamFields,
   expandStreamDetails,
 } from "pages/replicationPage";
-import { openSourceDestinationFromGrid, goToSourcePage } from "pages/sourcePage";
-import { goToSettingsPage } from "pages/settingsConnectionPage";
+import { openSourceDestinationFromGrid, goToSourcePage, openSourceOverview } from "pages/sourcePage";
+import { goToSettingsPage, openConnectionOverviewByDestinationName } from "pages/settingsConnectionPage";
 import { cleanDBSource, makeChangesInDBSource, populateDBSource } from "commands/db";
 import {
   catalogDiffModal,
@@ -68,8 +68,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/settingsConnectionPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/settingsConnectionPage.ts
index 9fcd478dfa38..aff2ba5c2116 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/settingsConnectionPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/settingsConnectionPage.ts
@@ -1,4 +1,17 @@
+import { clickOnCellInTable } from "pages/helpers/table";
+
 const settingsTab = "div[data-id='settings-step']";
+const sourceColumnName = "Source name";
+const destinationColumnName = "Destination name";
+const connectionsTable = "table[data-testid='connectionsTable']";
+
+export const openConnectionOverviewBySourceName = (sourceName: string) => {
+  clickOnCellInTable(connectionsTable, sourceColumnName, sourceName);
+};
+
+export const openConnectionOverviewByDestinationName = (destinationName: string) => {
+  clickOnCellInTable(connectionsTable, destinationColumnName, destinationName);
+};
 
 export const goToSettingsPage = () => {
   cy.get(settingsTab).click();
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts b/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts
index 5150322b1556..3429750776ee 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts
@@ -1,4 +1,8 @@
+import { clickOnCellInTable } from "pages/helpers/table";
+
 const newSource = "button[data-id='new-source']";
+const sourcesTable = "table[data-testid='sourcesTable']";
+const sourceNameColumn = "Name";
 
 export const goToSourcePage = () => {
   cy.intercept("/api/v1/sources/list").as("getSourcesList");
@@ -10,6 +14,10 @@ export const openSourceDestinationFromGrid = (value: string) => {
   cy.get("div").contains(value).click();
 };
 
+export const openSourceOverview = (sourceName: string) => {
+  clickOnCellInTable(sourcesTable, sourceNameColumn, sourceName);
+};
+
 export const openNewSourceForm = () => {
   cy.wait("@getSourcesList").then(({ response }) => {
     if (response?.body.sources.length) {

From 5ab58415c056aa8152cbf167b630aef257f659da Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 19:22:54 +0200
Subject: [PATCH 14/37] intercepter fixes

---
 airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 6c84a800fea8..4cbc0f89dd6e 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -60,8 +60,6 @@ describe("Connection - main actions", () => {
   });
 
   it("Update connection", () => {
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
-
     const sourceName = appendRandomString("Test update connection source cypress");
     const destName = appendRandomString("Test update connection destination cypress");
 

From 8e47c7837b4e00322154d6750fc28717549737e2 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 19:23:50 +0200
Subject: [PATCH 15/37] update createTestConnection function with optional
 replication settings

---
 .../cypress/commands/connection.ts            | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/commands/connection.ts b/airbyte-webapp-e2e-tests/cypress/commands/connection.ts
index 07d7e351a64c..280b9a75fa72 100644
--- a/airbyte-webapp-e2e-tests/cypress/commands/connection.ts
+++ b/airbyte-webapp-e2e-tests/cypress/commands/connection.ts
@@ -4,7 +4,19 @@ import { createPokeApiSource, createPostgresSource } from "./source";
 import { openAddSource } from "pages/destinationPage";
 import { selectSchedule, setupDestinationNamespaceSourceFormat, enterConnectionName } from "pages/replicationPage";
 
-export const createTestConnection = (sourceName: string, destinationName: string) => {
+enum Schedule {
+  MANUAL = "Manual",
+}
+
+interface ReplicationSettings {
+  schedule: Schedule;
+}
+
+export const createTestConnection = (
+  sourceName: string,
+  destinationName: string,
+  connectionSettings: ReplicationSettings = {} as ReplicationSettings
+) => {
   cy.intercept("/api/v1/sources/discover_schema").as("discoverSchema");
   cy.intercept("/api/v1/web_backend/connections/create").as("createConnection");
 
@@ -37,11 +49,12 @@ export const createTestConnection = (sourceName: string, destinationName: string
   cy.get("div").contains(sourceName).click();
 
   cy.wait("@discoverSchema");
-
-  enterConnectionName("Connection name");
-  selectSchedule("Manual");
-
-  setupDestinationNamespaceSourceFormat();
+  const { schedule } = connectionSettings;
+  // enterConnectionName("Connection name"); // FIXME: do we need to append tha string to name?
+  if (schedule) {
+    selectSchedule(schedule);
+  }
+  // setupDestinationNamespaceSourceFormat(); // FIXME: do we need just to click on inputs?
   submitButtonClick();
 
   cy.wait("@createConnection", { requestTimeout: 10000 });

From dfb19c7dd4b701de49db980229916766fe5a6f1b Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 20:11:44 +0200
Subject: [PATCH 16/37] remove extra Connection name check

---
 .../cypress/integration/connection.spec.ts                  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 4cbc0f89dd6e..2f2fc363c35e 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -118,7 +118,7 @@ describe("Connection - main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: `${sourceName} <> ${destName}Connection name`,
+          name: `${sourceName} <> ${destName}`,
           prefix: "auto_test",
           namespaceDefinition: "customformat",
           namespaceFormat: "${SOURCE_NAMESPACE}_test",
@@ -266,7 +266,7 @@ describe("Connection - main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: `${sourceName} <> ${destName}Connection name`,
+          name: `${sourceName} <> ${destName}`,
           namespaceDefinition: "customformat",
           namespaceFormat: "${SOURCE_NAMESPACE}_DestinationNamespaceCustomFormat",
           status: "active",
@@ -332,7 +332,7 @@ describe("Connection - main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: `${sourceName} <> ${destName}Connection name`,
+          name: `${sourceName} <> ${destName}`,
           namespaceDefinition: "destination",
           namespaceFormat: "${SOURCE_NAMESPACE}",
           status: "active",

From 1093301047eae710d6f597a57af77acbc82234c7 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 20:42:05 +0200
Subject: [PATCH 17/37] replace "cypress-postgres" with "pg-promise" npm
 package

---
 airbyte-webapp-e2e-tests/package-lock.json | 143 ++++++++-------------
 airbyte-webapp-e2e-tests/package.json      |   2 +-
 2 files changed, 58 insertions(+), 87 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/package-lock.json b/airbyte-webapp-e2e-tests/package-lock.json
index 6c0480412d40..63caf3c6dc48 100644
--- a/airbyte-webapp-e2e-tests/package-lock.json
+++ b/airbyte-webapp-e2e-tests/package-lock.json
@@ -12,10 +12,10 @@
         "@typescript-eslint/eslint-plugin": "^5.27.1",
         "@typescript-eslint/parser": "^5.27.1",
         "cypress": "^9.2.0",
-        "cypress-postgres": "^1.1.1",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-cypress": "^2.12.1",
         "eslint-plugin-prettier": "^4.0.0",
+        "pg-promise": "^10.15.4",
         "prettier": "^2.6.2",
         "typescript": "^4.5.4"
       },
@@ -583,12 +583,12 @@
       }
     },
     "node_modules/assert-options": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/assert-options/-/assert-options-0.6.2.tgz",
-      "integrity": "sha512-KP9S549XptFAPGYmLRnIjQBL4/Ry8Jx5YNLQZ/l+eejqbTidBMnw4uZSAsUrzBq/lgyqDYqxcTF7cOxZb9gyEw==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/assert-options/-/assert-options-0.8.0.tgz",
+      "integrity": "sha512-qSELrEaEz4sGwTs4Qh+swQkjiHAysC4rot21+jzXU86dJzNG+FDqBzyS3ohSoTRf4ZLA3FSwxQdiuNl5NXUtvA==",
       "dev": true,
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=10.0.0"
       }
     },
     "node_modules/assert-plus": {
@@ -967,15 +967,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/cypress-postgres": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/cypress-postgres/-/cypress-postgres-1.1.1.tgz",
-      "integrity": "sha512-ewhT84MhUU2FYzREUF2dYMJeIFarI2/8GkoD5xKyT/e7YIdYhJlOaFZSNZRY6OnQAnMWMy0g2p2n6+03HY/HZA==",
-      "dev": true,
-      "dependencies": {
-        "pg-promise": "10.5.8"
-      }
-    },
     "node_modules/cypress/node_modules/@types/node": {
       "version": "14.18.33",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.33.tgz",
@@ -2421,22 +2412,29 @@
       "dev": true
     },
     "node_modules/pg": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.2.2.tgz",
-      "integrity": "sha512-Uni50U0W2CNPM68+zfC/1WWjSO3q/uBSF/Nl7D+1npZGsPSM4/EZt0xSMW2jox1Bn0EfDlnTWnTsM/TrSOtBEA==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.8.0.tgz",
+      "integrity": "sha512-UXYN0ziKj+AeNNP7VDMwrehpACThH7LUl/p8TDFpEUuSejCUIwGSfxpHsPvtM6/WXFy6SU4E5RG4IJV/TZAGjw==",
       "dev": true,
       "dependencies": {
         "buffer-writer": "2.0.0",
         "packet-reader": "1.0.0",
-        "pg-connection-string": "^2.2.3",
-        "pg-pool": "^3.2.1",
-        "pg-protocol": "^1.2.5",
+        "pg-connection-string": "^2.5.0",
+        "pg-pool": "^3.5.2",
+        "pg-protocol": "^1.5.0",
         "pg-types": "^2.1.0",
-        "pgpass": "1.x",
-        "semver": "4.3.2"
+        "pgpass": "1.x"
       },
       "engines": {
         "node": ">= 8.0.0"
+      },
+      "peerDependencies": {
+        "pg-native": ">=3.0.1"
+      },
+      "peerDependenciesMeta": {
+        "pg-native": {
+          "optional": true
+        }
       }
     },
     "node_modules/pg-connection-string": {
@@ -2455,9 +2453,9 @@
       }
     },
     "node_modules/pg-minify": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/pg-minify/-/pg-minify-1.6.1.tgz",
-      "integrity": "sha512-ujanxJJB9CSDUvlAOshtjdKAywOPR2vY0a7D+vvgk5rbrYcthZA7TjpN+Z+UwZsz/G/bUexYDT6huE33vYVN0g==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/pg-minify/-/pg-minify-1.6.2.tgz",
+      "integrity": "sha512-1KdmFGGTP6jplJoI8MfvRlfvMiyBivMRP7/ffh4a11RUFJ7kC2J0ZHlipoKiH/1hz+DVgceon9U2qbaHpPeyPg==",
       "dev": true,
       "engines": {
         "node": ">=8.0"
@@ -2473,18 +2471,18 @@
       }
     },
     "node_modules/pg-promise": {
-      "version": "10.5.8",
-      "resolved": "https://registry.npmjs.org/pg-promise/-/pg-promise-10.5.8.tgz",
-      "integrity": "sha512-EdLyPd/XlmNsfA2uRKHuCnyLhk5DHPdKGPZmjzpcKfdx6dDZB+nEfSuaNSjReRrM7BmPaV/hSGppt9kG/W2Umw==",
+      "version": "10.15.4",
+      "resolved": "https://registry.npmjs.org/pg-promise/-/pg-promise-10.15.4.tgz",
+      "integrity": "sha512-BKlHCMCdNUmF6gagVbehRWSEiVcZzPVltEx14OJExR9Iz9/1R6KETDWLLGv2l6yRqYFnEZZy1VDjRhArzeIGrw==",
       "dev": true,
       "dependencies": {
-        "assert-options": "0.6.2",
-        "pg": "8.2.2",
-        "pg-minify": "1.6.1",
-        "spex": "3.0.2"
+        "assert-options": "0.8.0",
+        "pg": "8.8.0",
+        "pg-minify": "1.6.2",
+        "spex": "3.2.0"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": ">=12.0"
       }
     },
     "node_modules/pg-protocol": {
@@ -2509,15 +2507,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/pg/node_modules/semver": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.2.tgz",
-      "integrity": "sha512-VyFUffiBx8hABJ9HYSTXLRwyZtdDHMzMtFmID1aiNAD2BZppBmJm0Hqw3p2jkgxP9BNt1pQ9RnC49P0EcXf6cA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
     "node_modules/pgpass": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
@@ -2915,9 +2904,9 @@
       }
     },
     "node_modules/spex": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/spex/-/spex-3.0.2.tgz",
-      "integrity": "sha512-ZNCrOso+oNv5P01HCO4wuxV9Og5rS6ms7gGAqugfBPjx1QwfNXJI3T02ldfaap1O0dlT1sB0Rk+mhDqxt3Z27w==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spex/-/spex-3.2.0.tgz",
+      "integrity": "sha512-9srjJM7NaymrpwMHvSmpDeIK5GoRMX/Tq0E8aOlDPS54dDnDUIp30DrP9SphMPEETDLzEM9+4qo+KipmbtPecg==",
       "dev": true,
       "engines": {
         "node": ">=4.5"
@@ -3695,9 +3684,9 @@
       }
     },
     "assert-options": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/assert-options/-/assert-options-0.6.2.tgz",
-      "integrity": "sha512-KP9S549XptFAPGYmLRnIjQBL4/Ry8Jx5YNLQZ/l+eejqbTidBMnw4uZSAsUrzBq/lgyqDYqxcTF7cOxZb9gyEw==",
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/assert-options/-/assert-options-0.8.0.tgz",
+      "integrity": "sha512-qSELrEaEz4sGwTs4Qh+swQkjiHAysC4rot21+jzXU86dJzNG+FDqBzyS3ohSoTRf4ZLA3FSwxQdiuNl5NXUtvA==",
       "dev": true
     },
     "assert-plus": {
@@ -4015,15 +4004,6 @@
         }
       }
     },
-    "cypress-postgres": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/cypress-postgres/-/cypress-postgres-1.1.1.tgz",
-      "integrity": "sha512-ewhT84MhUU2FYzREUF2dYMJeIFarI2/8GkoD5xKyT/e7YIdYhJlOaFZSNZRY6OnQAnMWMy0g2p2n6+03HY/HZA==",
-      "dev": true,
-      "requires": {
-        "pg-promise": "10.5.8"
-      }
-    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -5122,27 +5102,18 @@
       "dev": true
     },
     "pg": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.2.2.tgz",
-      "integrity": "sha512-Uni50U0W2CNPM68+zfC/1WWjSO3q/uBSF/Nl7D+1npZGsPSM4/EZt0xSMW2jox1Bn0EfDlnTWnTsM/TrSOtBEA==",
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/pg/-/pg-8.8.0.tgz",
+      "integrity": "sha512-UXYN0ziKj+AeNNP7VDMwrehpACThH7LUl/p8TDFpEUuSejCUIwGSfxpHsPvtM6/WXFy6SU4E5RG4IJV/TZAGjw==",
       "dev": true,
       "requires": {
         "buffer-writer": "2.0.0",
         "packet-reader": "1.0.0",
-        "pg-connection-string": "^2.2.3",
-        "pg-pool": "^3.2.1",
-        "pg-protocol": "^1.2.5",
+        "pg-connection-string": "^2.5.0",
+        "pg-pool": "^3.5.2",
+        "pg-protocol": "^1.5.0",
         "pg-types": "^2.1.0",
-        "pgpass": "1.x",
-        "semver": "4.3.2"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "4.3.2",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-4.3.2.tgz",
-          "integrity": "sha512-VyFUffiBx8hABJ9HYSTXLRwyZtdDHMzMtFmID1aiNAD2BZppBmJm0Hqw3p2jkgxP9BNt1pQ9RnC49P0EcXf6cA==",
-          "dev": true
-        }
+        "pgpass": "1.x"
       }
     },
     "pg-connection-string": {
@@ -5158,9 +5129,9 @@
       "dev": true
     },
     "pg-minify": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/pg-minify/-/pg-minify-1.6.1.tgz",
-      "integrity": "sha512-ujanxJJB9CSDUvlAOshtjdKAywOPR2vY0a7D+vvgk5rbrYcthZA7TjpN+Z+UwZsz/G/bUexYDT6huE33vYVN0g==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/pg-minify/-/pg-minify-1.6.2.tgz",
+      "integrity": "sha512-1KdmFGGTP6jplJoI8MfvRlfvMiyBivMRP7/ffh4a11RUFJ7kC2J0ZHlipoKiH/1hz+DVgceon9U2qbaHpPeyPg==",
       "dev": true
     },
     "pg-pool": {
@@ -5171,15 +5142,15 @@
       "requires": {}
     },
     "pg-promise": {
-      "version": "10.5.8",
-      "resolved": "https://registry.npmjs.org/pg-promise/-/pg-promise-10.5.8.tgz",
-      "integrity": "sha512-EdLyPd/XlmNsfA2uRKHuCnyLhk5DHPdKGPZmjzpcKfdx6dDZB+nEfSuaNSjReRrM7BmPaV/hSGppt9kG/W2Umw==",
+      "version": "10.15.4",
+      "resolved": "https://registry.npmjs.org/pg-promise/-/pg-promise-10.15.4.tgz",
+      "integrity": "sha512-BKlHCMCdNUmF6gagVbehRWSEiVcZzPVltEx14OJExR9Iz9/1R6KETDWLLGv2l6yRqYFnEZZy1VDjRhArzeIGrw==",
       "dev": true,
       "requires": {
-        "assert-options": "0.6.2",
-        "pg": "8.2.2",
-        "pg-minify": "1.6.1",
-        "spex": "3.0.2"
+        "assert-options": "0.8.0",
+        "pg": "8.8.0",
+        "pg-minify": "1.6.2",
+        "spex": "3.2.0"
       }
     },
     "pg-protocol": {
@@ -5461,9 +5432,9 @@
       }
     },
     "spex": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/spex/-/spex-3.0.2.tgz",
-      "integrity": "sha512-ZNCrOso+oNv5P01HCO4wuxV9Og5rS6ms7gGAqugfBPjx1QwfNXJI3T02ldfaap1O0dlT1sB0Rk+mhDqxt3Z27w==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spex/-/spex-3.2.0.tgz",
+      "integrity": "sha512-9srjJM7NaymrpwMHvSmpDeIK5GoRMX/Tq0E8aOlDPS54dDnDUIp30DrP9SphMPEETDLzEM9+4qo+KipmbtPecg==",
       "dev": true
     },
     "split2": {
diff --git a/airbyte-webapp-e2e-tests/package.json b/airbyte-webapp-e2e-tests/package.json
index a6351b0d96b3..6607ebac54a8 100644
--- a/airbyte-webapp-e2e-tests/package.json
+++ b/airbyte-webapp-e2e-tests/package.json
@@ -18,10 +18,10 @@
     "@typescript-eslint/eslint-plugin": "^5.27.1",
     "@typescript-eslint/parser": "^5.27.1",
     "cypress": "^9.2.0",
-    "cypress-postgres": "^1.1.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-prettier": "^4.0.0",
+    "pg-promise": "^10.15.4",
     "prettier": "^2.6.2",
     "typescript": "^4.5.4"
   }

From 607d8f33cc2b69a87643eb188bd8af9437fdeead Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 29 Dec 2022 20:42:49 +0200
Subject: [PATCH 18/37] update cypress config

---
 airbyte-webapp-e2e-tests/cypress/plugins/index.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/plugins/index.ts b/airbyte-webapp-e2e-tests/cypress/plugins/index.ts
index 61b54a1eabfd..707447d3813c 100644
--- a/airbyte-webapp-e2e-tests/cypress/plugins/index.ts
+++ b/airbyte-webapp-e2e-tests/cypress/plugins/index.ts
@@ -14,6 +14,18 @@
 
 import Cypress from "cypress";
 
+const pgp = require("pg-promise")();
+const postgresConfig = require(require("path").resolve("cypress.json"));
+
+function dbConnection(query: any, userDefineConnection: undefined) {
+  let connection = postgresConfig.db;
+  if (userDefineConnection != undefined) {
+    connection = userDefineConnection;
+  }
+  const db = pgp(connection);
+  return db.any(query).finally(db.$pool.end);
+}
+
 /**
  * @type {Cypress.PluginConfig}
  */
@@ -21,6 +33,6 @@ module.exports = (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions)
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
   on("task", {
-    dbQuery: (query) => require("cypress-postgres")(query.query, query.connection),
+    dbQuery: (query) => dbConnection(query.query, query.connection),
   });
 };

From d6909bfdc0851f4ca5585c8fa9674ea4994883a6 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 30 Dec 2022 15:30:04 +0200
Subject: [PATCH 19/37] Revert "update createTestConnection function with
 optional replication settings"

This reverts commit 8e47c7837b4e00322154d6750fc28717549737e2.
---
 .../cypress/commands/connection.ts            | 25 +++++--------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/commands/connection.ts b/airbyte-webapp-e2e-tests/cypress/commands/connection.ts
index 280b9a75fa72..07d7e351a64c 100644
--- a/airbyte-webapp-e2e-tests/cypress/commands/connection.ts
+++ b/airbyte-webapp-e2e-tests/cypress/commands/connection.ts
@@ -4,19 +4,7 @@ import { createPokeApiSource, createPostgresSource } from "./source";
 import { openAddSource } from "pages/destinationPage";
 import { selectSchedule, setupDestinationNamespaceSourceFormat, enterConnectionName } from "pages/replicationPage";
 
-enum Schedule {
-  MANUAL = "Manual",
-}
-
-interface ReplicationSettings {
-  schedule: Schedule;
-}
-
-export const createTestConnection = (
-  sourceName: string,
-  destinationName: string,
-  connectionSettings: ReplicationSettings = {} as ReplicationSettings
-) => {
+export const createTestConnection = (sourceName: string, destinationName: string) => {
   cy.intercept("/api/v1/sources/discover_schema").as("discoverSchema");
   cy.intercept("/api/v1/web_backend/connections/create").as("createConnection");
 
@@ -49,12 +37,11 @@ export const createTestConnection = (
   cy.get("div").contains(sourceName).click();
 
   cy.wait("@discoverSchema");
-  const { schedule } = connectionSettings;
-  // enterConnectionName("Connection name"); // FIXME: do we need to append tha string to name?
-  if (schedule) {
-    selectSchedule(schedule);
-  }
-  // setupDestinationNamespaceSourceFormat(); // FIXME: do we need just to click on inputs?
+
+  enterConnectionName("Connection name");
+  selectSchedule("Manual");
+
+  setupDestinationNamespaceSourceFormat();
   submitButtonClick();
 
   cy.wait("@createConnection", { requestTimeout: 10000 });

From feb4b37c8b1308edfb117764b0f13f7eaefc49d7 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 30 Dec 2022 16:47:55 +0200
Subject: [PATCH 20/37] Revert "remove extra Connection name check"

This reverts commit dfb19c7dd4b701de49db980229916766fe5a6f1b.
---
 .../cypress/integration/connection.spec.ts                  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 2f2fc363c35e..4cbc0f89dd6e 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -118,7 +118,7 @@ describe("Connection - main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: `${sourceName} <> ${destName}`,
+          name: `${sourceName} <> ${destName}Connection name`,
           prefix: "auto_test",
           namespaceDefinition: "customformat",
           namespaceFormat: "${SOURCE_NAMESPACE}_test",
@@ -266,7 +266,7 @@ describe("Connection - main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: `${sourceName} <> ${destName}`,
+          name: `${sourceName} <> ${destName}Connection name`,
           namespaceDefinition: "customformat",
           namespaceFormat: "${SOURCE_NAMESPACE}_DestinationNamespaceCustomFormat",
           status: "active",
@@ -332,7 +332,7 @@ describe("Connection - main actions", () => {
       expect(interception.request)
         .property("body")
         .to.contain({
-          name: `${sourceName} <> ${destName}`,
+          name: `${sourceName} <> ${destName}Connection name`,
           namespaceDefinition: "destination",
           namespaceFormat: "${SOURCE_NAMESPACE}",
           status: "active",

From 5e388327531e59ec5825d8cb2617280ac65e6958 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 30 Dec 2022 18:38:34 +0200
Subject: [PATCH 21/37] replace openSourceDestinationFromGrid with specific
 selector

---
 .../cypress/integration/connection.spec.ts    | 47 +++++++++----------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 4cbc0f89dd6e..eb5e5caafaf5 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -93,8 +93,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -157,8 +157,6 @@ describe("Connection - main actions", () => {
     cy.get("div").contains(sourceName).should("exist");
     cy.get("div").contains(destName).should("exist");
 
-    openSourceDestinationFromGrid(sourceName);
-
     goToReplicationTab();
 
     selectSchedule("Cron");
@@ -184,8 +182,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(`${sourceName} <> ${destName}`);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     let loadedConnection: any = null; // Should be a WebBackendConnectionRead
     cy.wait("@getConnection").then((interception) => {
@@ -229,8 +227,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToSettingsPage();
 
@@ -247,8 +245,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -291,8 +289,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -312,8 +310,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -371,8 +369,8 @@ describe("Connection - stream view", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -405,8 +403,8 @@ describe("Connection sync modes", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -424,8 +422,8 @@ describe("Connection sync modes", () => {
     checkSuccessResult();
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -444,8 +442,8 @@ describe("Connection sync modes", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -486,8 +484,8 @@ describe("Connection sync modes", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -547,7 +545,6 @@ describe("Connection - detect changes in source", () => {
     cy.get("div").contains(destName).should("exist");
 
     makeChangesInDBSource();
-    openSourceDestinationFromGrid(sourceName);
     goToReplicationTab();
     refreshSourceSchemaBtnClick();
 

From 8be62d9475550f60c6ccebef87f26d4d7c68caa4 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 30 Dec 2022 18:38:34 +0200
Subject: [PATCH 22/37] replace openSourceDestinationFromGrid with specific
 selector

---
 .../cypress/integration/connection.spec.ts    | 59 +++++++++----------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 4cbc0f89dd6e..3863536ea156 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -25,7 +25,7 @@ import {
   checkStreamFields,
   expandStreamDetails,
 } from "pages/replicationPage";
-import { openSourceDestinationFromGrid, goToSourcePage, openSourceOverview } from "pages/sourcePage";
+import { goToSourcePage, openSourceOverview } from "pages/sourcePage";
 import { goToSettingsPage, openConnectionOverviewByDestinationName } from "pages/settingsConnectionPage";
 import { cleanDBSource, makeChangesInDBSource, populateDBSource } from "commands/db";
 import {
@@ -93,8 +93,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -157,8 +157,6 @@ describe("Connection - main actions", () => {
     cy.get("div").contains(sourceName).should("exist");
     cy.get("div").contains(destName).should("exist");
 
-    openSourceDestinationFromGrid(sourceName);
-
     goToReplicationTab();
 
     selectSchedule("Cron");
@@ -184,8 +182,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(`${sourceName} <> ${destName}`);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     let loadedConnection: any = null; // Should be a WebBackendConnectionRead
     cy.wait("@getConnection").then((interception) => {
@@ -229,8 +227,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToSettingsPage();
 
@@ -247,8 +245,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -291,8 +289,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -312,8 +310,8 @@ describe("Connection - main actions", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -371,8 +369,8 @@ describe("Connection - stream view", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -405,8 +403,8 @@ describe("Connection sync modes", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -424,8 +422,8 @@ describe("Connection sync modes", () => {
     checkSuccessResult();
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -436,7 +434,7 @@ describe("Connection sync modes", () => {
     deleteDestination(destName);
   });
 
-  it("Connection sync mode Incremental Deduped History - PK is defined", () => {
+  it.only("Connection sync mode Incremental Deduped History - PK is defined", () => {
     const sourceName = appendRandomString("Test connection Postgres source cypress");
     const destName = appendRandomString("Test connection Postgres destination cypress");
     const streamName = "users";
@@ -444,8 +442,8 @@ describe("Connection sync modes", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -464,8 +462,8 @@ describe("Connection sync modes", () => {
     checkSuccessResult();
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -486,8 +484,8 @@ describe("Connection sync modes", () => {
     createTestConnection(sourceName, destName);
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -507,8 +505,8 @@ describe("Connection sync modes", () => {
     checkSuccessResult();
 
     goToSourcePage();
-    openSourceDestinationFromGrid(sourceName);
-    openSourceDestinationFromGrid(destName);
+    openSourceOverview(sourceName);
+    openConnectionOverviewByDestinationName(destName);
 
     goToReplicationTab();
 
@@ -547,7 +545,6 @@ describe("Connection - detect changes in source", () => {
     cy.get("div").contains(destName).should("exist");
 
     makeChangesInDBSource();
-    openSourceDestinationFromGrid(sourceName);
     goToReplicationTab();
     refreshSourceSchemaBtnClick();
 

From 1e3792b3ce88149c11e2e2f68d72301fddd36ac5 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 30 Dec 2022 22:02:35 +0200
Subject: [PATCH 23/37] turn on test

---
 airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 3863536ea156..9e7dc0bd45ee 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -434,7 +434,7 @@ describe("Connection sync modes", () => {
     deleteDestination(destName);
   });
 
-  it.only("Connection sync mode Incremental Deduped History - PK is defined", () => {
+  it("Connection sync mode Incremental Deduped History - PK is defined", () => {
     const sourceName = appendRandomString("Test connection Postgres source cypress");
     const destName = appendRandomString("Test connection Postgres destination cypress");
     const streamName = "users";

From 7555c11bc0294cf15e42be7ecd732fda9bbe1e29 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 30 Dec 2022 23:27:33 +0200
Subject: [PATCH 24/37] add test-id's

---
 .../src/components/connection/CatalogTree/Arrow.tsx   |  4 ++--
 .../connection/CatalogTree/DataTypeCell.tsx           |  4 ++--
 .../components/connection/CatalogTree/FieldRow.tsx    | 10 +++++++---
 .../connection/CatalogTree/StreamHeader.tsx           | 11 +++++++++--
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx
index 39b0d21f28e1..6bb389fdb008 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/Arrow.tsx
@@ -12,9 +12,9 @@ interface ArrowProps {
   onExpand?: () => void;
 }
 
-const Arrow: React.FC<ArrowProps> = ({ isItemHasChildren, isItemOpen, onExpand }) => {
+const Arrow: React.FC<ArrowProps> = ({ isItemHasChildren, isItemOpen, onExpand, ...restProps }) => {
   return (
-    <span className={styles.container}>
+    <span className={styles.container} {...restProps}>
       {(isItemHasChildren || !onExpand) && (
         <FontAwesomeIcon
           icon={faChevronRight}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/DataTypeCell.tsx b/airbyte-webapp/src/components/connection/CatalogTree/DataTypeCell.tsx
index 785d5fce0694..4f4edd85f456 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/DataTypeCell.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/DataTypeCell.tsx
@@ -2,8 +2,8 @@ import React from "react";
 
 import { Cell } from "components/SimpleTableComponents";
 
-const DataTypeCell: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
-  return <Cell>{children}</Cell>;
+const DataTypeCell: React.FC<React.PropsWithChildren<unknown>> = ({ children, ...restProps }) => {
+  return <Cell {...restProps}>{children}</Cell>;
 };
 
 export default DataTypeCell;
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
index f2ec7d64fceb..e7783414e343 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
@@ -73,15 +73,19 @@ const FieldRowInner: React.FC<FieldRowProps> = ({
       )}
       {isColumnSelectionEnabled && (
         <Cell ellipsis flex={1.5}>
-          <span title={name}>{name}</span>
+          <span title={name} data-testid="nameCell">
+            {name}
+          </span>
         </Cell>
       )}
       {!isColumnSelectionEnabled && (
         <FirstCell ellipsis flex={1.5}>
-          <NameContainer title={name}>{name}</NameContainer>
+          <NameContainer title={name} data-testid="nameCell">
+            {name}
+          </NameContainer>
         </FirstCell>
       )}
-      <DataTypeCell>{dataType}</DataTypeCell>
+      <DataTypeCell data-testid="dataTypeCell">{dataType}</DataTypeCell>
       <Cell>{isCursorEnabled && <RadioButton checked={isCursor} onChange={() => onCursorChange(field.path)} />}</Cell>
       <Cell>
         {isPrimaryKeyEnabled && <CheckBox checked={isPrimaryKey} onChange={() => onPrimaryKeyChange(field.path)} />}
diff --git a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
index 62f3b72988e2..2f9167c25cc6 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/StreamHeader.tsx
@@ -113,7 +113,14 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
         </div>
       )}
       <ArrowCell>
-        {hasFields ? <ArrowBlock onExpand={onExpand} isItemHasChildren={hasFields} isItemOpen={isRowExpanded} /> : null}
+        {hasFields ? (
+          <ArrowBlock
+            onExpand={onExpand}
+            isItemHasChildren={hasFields}
+            isItemOpen={isRowExpanded}
+            data-testid={`${stream.stream?.name}_expandStreamDetails`}
+          />
+        ) : null}
       </ArrowCell>
       <div className={streamHeaderContentStyle}>
         <HeaderCell flex={0.4}>
@@ -132,7 +139,7 @@ export const StreamHeader: React.FC<StreamHeaderProps> = ({
             </span>
           )}
         </HeaderCell>
-        <HeaderCell ellipsis title={stream.stream?.name || ""}>
+        <HeaderCell ellipsis title={stream.stream?.name || ""} data-testid="streamNameCell">
           {stream.stream?.name}
         </HeaderCell>
         <Cell flex={1.5}>

From f136b3e0bbb7a4176bf44b7d6fe0633b28da5ccb Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 30 Dec 2022 23:31:11 +0200
Subject: [PATCH 25/37] fix selectors

---
 .../cypress/pages/replicationPage.ts           | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index 72ac1fe9e347..323c8fd49444 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -8,16 +8,16 @@ const destinationNamespaceDefault = "div[data-testid='namespaceDefinition-destin
 const destinationNamespaceSource = "div[data-testid='namespaceDefinition-source']";
 const destinationNamespaceCustomInput = "input[data-testid='input']";
 const syncModeDropdown = "div[data-testid='syncSettingsDropdown'] input";
+
 // Table dropdown (pathPopout)
 const getFieldDropdownContainer = (streamName: string, type: string) => `div[id='${streamName}_${type}_pathPopout']`;
 const getFieldDropdownButton = (streamName: string, type: string) =>
   `button[data-testid='${streamName}_${type}_pathPopout']`;
 const getFieldDropdownOption = (value: string) => `div[data-testid='${value}']`;
-const dropDownOverlayContainer = "div[data-testid='overlayContainer']"
-
-const streamFieldNames = "[class^='TreeRowWrapper_rowWrapper'] span";
-const streamDataTypes = "[class^='TreeRowWrapper_rowWrapper'] div:nth-child(2)";
-const ExpandStreamDetailsTableBtn = "[class^='Arrow_container__']";
+const dropDownOverlayContainer = "div[data-testid='overlayContainer']";
+const streamNameCell = "[data-testid='nameCell']";
+const streamDataTypeCell = "[data-testid='dataTypeCell']";
+const getExpandStreamArrowBtn = (streamName: string) => `[data-testid='${streamName}_expandStreamDetails']`;
 const preFilledPrimaryKeyText = "div[class^='PathPopout_text']";
 
 const successResult = "div[data-id='success-result']";
@@ -36,9 +36,7 @@ export const enterConnectionName = (name: string) => {
   cy.get(connectionNameInput).type(name);
 };
 
-export const expandStreamDetails = () => {
-  cy.get(ExpandStreamDetailsTableBtn).click();
-};
+export const expandStreamDetailsByName = (streamName: string) => cy.get(getExpandStreamArrowBtn(streamName)).click();
 
 export const selectSchedule = (value: string) => {
   cy.get(scheduleDropdown).click();
@@ -122,11 +120,11 @@ export const selectPrimaryKeyField = (streamName: string, primaryKeyValues: stri
   selectFieldDropdownOption(streamName, "primaryKey", primaryKeyValues);
 
 export const checkStreamFields = (listNames: Array<String>, listTypes: Array<String>) => {
-  cy.get(streamFieldNames).each(($span, i) => {
+  cy.get(streamNameCell).each(($span, i) => {
     expect($span.text()).to.equal(listNames[i]);
   });
 
-  cy.get(streamDataTypes).each(($span, i) => {
+  cy.get(streamDataTypeCell).each(($span, i) => {
     expect($span.text()).to.equal(listTypes[i]);
   });
 };

From b146e69450b20b0344c3e74c0590e49264e4bb44 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 30 Dec 2022 23:31:51 +0200
Subject: [PATCH 26/37] update test

---
 .../cypress/integration/connection.spec.ts            | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 9e7dc0bd45ee..689638dc9cc9 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -23,7 +23,7 @@ import {
   selectPrimaryKeyField,
   checkPreFilledPrimaryKeyField,
   checkStreamFields,
-  expandStreamDetails,
+  expandStreamDetailsByName,
 } from "pages/replicationPage";
 import { goToSourcePage, openSourceOverview } from "pages/sourcePage";
 import { goToSettingsPage, openConnectionOverviewByDestinationName } from "pages/settingsConnectionPage";
@@ -362,9 +362,10 @@ describe("Connection - stream view", () => {
   it("Stream view", () => {
     const sourceName = appendRandomString("Test connection Postgres source cypress");
     const destName = appendRandomString("Test connection Postgres destination cypress");
+    const streamName = "users";
 
-    const collectionNames = ["Field name", "col1", "id"];
-    const collectionTypes = ["Data type", "String", "Integer"];
+    const collectionNames = ["col1", "id"];
+    const collectionTypes = ["String", "Integer"];
 
     createTestConnection(sourceName, destName);
 
@@ -374,8 +375,8 @@ describe("Connection - stream view", () => {
 
     goToReplicationTab();
 
-    searchStream("users");
-    expandStreamDetails();
+    searchStream(streamName);
+    expandStreamDetailsByName(streamName);
     checkStreamFields(collectionNames, collectionTypes);
 
     deleteSource(sourceName);

From 971965d8f4a2b3b848c05d3373d092eb4b82b30d Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Sat, 31 Dec 2022 02:26:20 +0200
Subject: [PATCH 27/37] update test snapshots

---
 .../__snapshots__/CreateConnectionForm.test.tsx.snap            | 2 ++
 .../__snapshots__/ConnectionReplicationTab.test.tsx.snap        | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
index 9401275275a6..956a417fd51b 100644
--- a/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
+++ b/airbyte-webapp/src/components/CreateConnection/__snapshots__/CreateConnectionForm.test.tsx.snap
@@ -648,6 +648,7 @@ exports[`CreateConnectionForm should render 1`] = `
                         >
                           <span
                             class="<removed-for-snapshot-test>"
+                            data-testid="pokemon_expandStreamDetails"
                           >
                             <svg
                               aria-hidden="true"
@@ -699,6 +700,7 @@ exports[`CreateConnectionForm should render 1`] = `
                           </div>
                           <div
                             class="<removed-for-snapshot-test>"
+                            data-testid="streamNameCell"
                             title="pokemon"
                           >
                             pokemon
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
index ef733dd7f281..16fddef3f8f9 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/__snapshots__/ConnectionReplicationTab.test.tsx.snap
@@ -595,6 +595,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                         >
                           <span
                             class="<removed-for-snapshot-test>"
+                            data-testid="pokemon_expandStreamDetails"
                           >
                             <svg
                               aria-hidden="true"
@@ -646,6 +647,7 @@ exports[`ConnectionReplicationTab should render 1`] = `
                           </div>
                           <div
                             class="<removed-for-snapshot-test>"
+                            data-testid="streamNameCell"
                             title="pokemon"
                           >
                             pokemon

From bf900bd8155436f5735fd4049b216838f461d5eb Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 10 Jan 2023 18:47:25 +0200
Subject: [PATCH 28/37] fix lost data-testid after resolve merge conflicts

---
 .../src/components/connection/CatalogTree/FieldRow.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx b/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
index 0c2ec452021f..c2fd76148656 100644
--- a/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
+++ b/airbyte-webapp/src/components/connection/CatalogTree/FieldRow.tsx
@@ -110,7 +110,7 @@ const FieldRowInner: React.FC<FieldRowProps> = ({
           </NameContainer>
         </FirstCell>
       )}
-      <DataTypeCell>{dataType}</DataTypeCell>
+      <DataTypeCell data-testid="dataTypeCell">{dataType}</DataTypeCell>
       <Cell>
         {shouldDefineCursor && <RadioButton checked={isCursor} onChange={() => onCursorChange(field.path)} />}
       </Cell>

From 91d2b6e3db3d8f003fdaca837c8db38ab9fa69ca Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Fri, 13 Jan 2023 15:18:19 +0200
Subject: [PATCH 29/37] remove extra check

---
 .../cypress/integration/connection.spec.ts                     | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 689638dc9cc9..90afbcbfddd9 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -154,9 +154,6 @@ describe("Connection - main actions", () => {
 
     createTestConnection(sourceName, destName);
 
-    cy.get("div").contains(sourceName).should("exist");
-    cy.get("div").contains(destName).should("exist");
-
     goToReplicationTab();
 
     selectSchedule("Cron");

From b5d0d7e5ce8fcd2d9f2c48a8c768a6ba5338823b Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 17 Jan 2023 13:44:48 +0200
Subject: [PATCH 30/37] move clickOnCellInTable helper to common.ts file

---
 .../cypress/commands/common.ts                 | 18 ++++++++++++++++++
 .../cypress/pages/helpers/table.ts             | 17 -----------------
 .../cypress/pages/settingsConnectionPage.ts    |  2 +-
 .../cypress/pages/sourcePage.ts                |  2 +-
 4 files changed, 20 insertions(+), 19 deletions(-)
 delete mode 100644 airbyte-webapp-e2e-tests/cypress/pages/helpers/table.ts

diff --git a/airbyte-webapp-e2e-tests/cypress/commands/common.ts b/airbyte-webapp-e2e-tests/cypress/commands/common.ts
index 030e4e924f5f..80c78caa697b 100644
--- a/airbyte-webapp-e2e-tests/cypress/commands/common.ts
+++ b/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();
+    });
+};
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/helpers/table.ts b/airbyte-webapp-e2e-tests/cypress/pages/helpers/table.ts
deleted file mode 100644
index e3e42065a1ed..000000000000
--- a/airbyte-webapp-e2e-tests/cypress/pages/helpers/table.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * 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();
-    });
-};
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/settingsConnectionPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/settingsConnectionPage.ts
index aff2ba5c2116..5c4b1c00d568 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/settingsConnectionPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/settingsConnectionPage.ts
@@ -1,4 +1,4 @@
-import { clickOnCellInTable } from "pages/helpers/table";
+import { clickOnCellInTable } from "commands/common";
 
 const settingsTab = "div[data-id='settings-step']";
 const sourceColumnName = "Source name";
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts b/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts
index 3429750776ee..ed80ecebb866 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/sourcePage.ts
@@ -1,4 +1,4 @@
-import { clickOnCellInTable } from "pages/helpers/table";
+import { clickOnCellInTable } from "commands/common";
 
 const newSource = "button[data-id='new-source']";
 const sourcesTable = "table[data-testid='sourcesTable']";

From fc16d17be2e30621c8651e43be415857b80ccec5 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 17 Jan 2023 13:47:59 +0200
Subject: [PATCH 31/37] remove empty line and comments

---
 airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index 323c8fd49444..fea15400bc88 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -8,8 +8,6 @@ const destinationNamespaceDefault = "div[data-testid='namespaceDefinition-destin
 const destinationNamespaceSource = "div[data-testid='namespaceDefinition-source']";
 const destinationNamespaceCustomInput = "input[data-testid='input']";
 const syncModeDropdown = "div[data-testid='syncSettingsDropdown'] input";
-
-// Table dropdown (pathPopout)
 const getFieldDropdownContainer = (streamName: string, type: string) => `div[id='${streamName}_${type}_pathPopout']`;
 const getFieldDropdownButton = (streamName: string, type: string) =>
   `button[data-testid='${streamName}_${type}_pathPopout']`;
@@ -19,7 +17,6 @@ const streamNameCell = "[data-testid='nameCell']";
 const streamDataTypeCell = "[data-testid='dataTypeCell']";
 const getExpandStreamArrowBtn = (streamName: string) => `[data-testid='${streamName}_expandStreamDetails']`;
 const preFilledPrimaryKeyText = "div[class^='PathPopout_text']";
-
 const successResult = "div[data-id='success-result']";
 const saveStreamChangesButton = "button[data-testid='resetModal-save']";
 const connectionNameInput = "input[data-testid='connectionName']";

From 440a46191d4a8d1f9970d436cd22b72abeb8acf4 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Tue, 17 Jan 2023 13:51:59 +0200
Subject: [PATCH 32/37] fix dropdownType

---
 airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index fea15400bc88..574e8bce8102 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -8,8 +8,8 @@ const destinationNamespaceDefault = "div[data-testid='namespaceDefinition-destin
 const destinationNamespaceSource = "div[data-testid='namespaceDefinition-source']";
 const destinationNamespaceCustomInput = "input[data-testid='input']";
 const syncModeDropdown = "div[data-testid='syncSettingsDropdown'] input";
-const getFieldDropdownContainer = (streamName: string, type: string) => `div[id='${streamName}_${type}_pathPopout']`;
-const getFieldDropdownButton = (streamName: string, type: string) =>
+const getFieldDropdownContainer = (streamName: string, type: Dropdown) => `div[id='${streamName}_${type}_pathPopout']`;
+const getFieldDropdownButton = (streamName: string, type: Dropdown) =>
   `button[data-testid='${streamName}_${type}_pathPopout']`;
 const getFieldDropdownOption = (value: string) => `div[data-testid='${value}']`;
 const dropDownOverlayContainer = "div[data-testid='overlayContainer']";

From 0088fa7aa759a63a99f84cb9b233dd09ef2aa396 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Wed, 18 Jan 2023 17:31:05 +0200
Subject: [PATCH 33/37] replace partial string check with exact

---
 .../cypress/integration/connection.spec.ts                  | 2 +-
 airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts   | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index 69a4d318ef66..a34ea5848a38 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -512,7 +512,7 @@ describe("Connection sync modes", () => {
     searchStream(streamName);
 
     checkCursorField(streamName, "city");
-    checkPrimaryKey(streamName, ["city", "city_code"]);
+    checkPrimaryKey(streamName, ["city_code"]);
 
     deleteSource(sourceName);
     deleteDestination(destName);
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index 574e8bce8102..fe2ea7509090 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -134,9 +134,11 @@ export const checkStreamFields = (listNames: Array<String>, listTypes: Array<Str
  */
 const checkDropdownField = (streamName: string, dropdownType: Dropdown, expectedValue: string | string[]) => {
   const button = getFieldDropdownButton(streamName, dropdownType);
+  const isButtonContainsExactValue = (value: string) => cy.get(button).contains(new RegExp(`^${value}$`));
+
   return Array.isArray(expectedValue)
-    ? expectedValue.forEach((v) => cy.get(button).contains(v))
-    : cy.get(button).contains(expectedValue);
+    ? expectedValue.every((value) => isButtonContainsExactValue(value))
+    : isButtonContainsExactValue(expectedValue);
 };
 
 /**

From f91c54bd91ab54c066c395a5c0a1a6f38803e3ef Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Wed, 18 Jan 2023 19:02:25 +0200
Subject: [PATCH 34/37] extract interceptors and waiters to separate file

---
 .../cypress/commands/interceptors.ts          |  6 ++++
 .../cypress/integration/connection.spec.ts    | 34 +++++++++++--------
 2 files changed, 26 insertions(+), 14 deletions(-)
 create mode 100644 airbyte-webapp-e2e-tests/cypress/commands/interceptors.ts

diff --git a/airbyte-webapp-e2e-tests/cypress/commands/interceptors.ts b/airbyte-webapp-e2e-tests/cypress/commands/interceptors.ts
new file mode 100644
index 000000000000..9a35ba0ce386
--- /dev/null
+++ b/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 });
diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index a34ea5848a38..dafa8163bd83 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -37,13 +37,19 @@ import {
   toggleStreamWithChangesAccordion,
 } from "pages/modals/catalogDiffModal";
 import { updateSchemaModalConfirmBtnClick } from "pages/modals/updateSchemaModal";
+import {
+  interceptGetConnectionRequest,
+  interceptUpdateConnectionRequest,
+  waitForGetConnectionRequest,
+  waitForUpdateConnectionRequest
+} from "commands/interceptors";
 
 describe("Connection - creation, updating connection replication settings, deletion", () => {
   beforeEach(() => {
     initialSetupCompleted();
 
-    cy.intercept("/api/v1/web_backend/connections/get").as("getConnection");
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
+    interceptGetConnectionRequest()
+    interceptUpdateConnectionRequest();
   });
 
   it("Create Postgres <> LocalJSON connection, check it's creation", () => {
@@ -75,7 +81,7 @@ describe("Connection - creation, updating connection replication settings, delet
 
     submitButtonClick();
 
-    cy.wait("@updateConnection").then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       assert.isNotNull(interception.response?.statusCode, "200");
     });
 
@@ -112,7 +118,7 @@ describe("Connection - creation, updating connection replication settings, delet
     submitButtonClick();
     confirmStreamConfigurationChangedPopup();
 
-    cy.wait("@updateConnection").then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       assert.isNotNull(interception.response?.statusCode, "200");
       expect(interception.request.method).to.eq("POST");
       expect(interception.request)
@@ -183,7 +189,7 @@ describe("Connection - creation, updating connection replication settings, delet
     openConnectionOverviewByDestinationName(destName);
 
     let loadedConnection: any = null; // Should be a WebBackendConnectionRead
-    cy.wait("@getConnection").then((interception) => {
+    waitForGetConnectionRequest().then((interception) => {
       const {
         scheduleType: readScheduleType,
         scheduleData: readScheduleData,
@@ -201,7 +207,7 @@ describe("Connection - creation, updating connection replication settings, delet
     selectSchedule("Every hour");
     submitButtonClick();
 
-    cy.wait("@updateConnection").then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       // Schedule is pulled out here, but we don't do anything with is as it's legacy
       const { scheduleType, scheduleData, schedule, ...connectionUpdate } = interception.response?.body;
       expect(scheduleType).to.eq("basic");
@@ -255,7 +261,7 @@ describe("Connection - creation, updating connection replication settings, delet
 
     submitButtonClick();
 
-    cy.wait("@updateConnection").then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       assert.isNotNull(interception.response?.statusCode, "200");
       expect(interception.request.method).to.eq("POST");
       expect(interception.request)
@@ -321,7 +327,7 @@ describe("Connection - creation, updating connection replication settings, delet
 
     submitButtonClick();
 
-    cy.wait("@updateConnection").then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       assert.isNotNull(interception.response?.statusCode, "200");
       expect(interception.request.method).to.eq("POST");
       expect(interception.request)
@@ -386,7 +392,7 @@ describe("Connection sync modes", () => {
     initialSetupCompleted();
     populateDBSource();
 
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
+    interceptUpdateConnectionRequest();
   });
 
   afterEach(() => {
@@ -413,7 +419,7 @@ describe("Connection sync modes", () => {
     submitButtonClick();
     confirmStreamConfigurationChangedPopup();
 
-    cy.wait("@updateConnection", { timeout: 5000 }).then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       assert.isNotNull(interception.response?.statusCode, "200");
     });
 
@@ -454,7 +460,7 @@ describe("Connection sync modes", () => {
     submitButtonClick();
     confirmStreamConfigurationChangedPopup();
 
-    cy.wait("@updateConnection", { timeout: 5000 }).then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       assert.isNotNull(interception.response?.statusCode, "200");
     });
 
@@ -497,7 +503,7 @@ describe("Connection sync modes", () => {
     submitButtonClick();
     confirmStreamConfigurationChangedPopup();
 
-    cy.wait("@updateConnection", { timeout: 5000 }).then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       assert.isNotNull(interception.response?.statusCode, "200");
     });
 
@@ -524,7 +530,7 @@ describe("Connection - detect source schema changes in source", () => {
     initialSetupCompleted();
     populateDBSource();
 
-    cy.intercept("/api/v1/web_backend/connections/update").as("updateConnection");
+    interceptUpdateConnectionRequest();
   });
 
   afterEach(() => {
@@ -564,7 +570,7 @@ describe("Connection - detect source schema changes in source", () => {
     submitButtonClick();
     resetModalSaveBtnClick();
 
-    cy.wait("@updateConnection").then((interception) => {
+    waitForUpdateConnectionRequest().then((interception) => {
       assert.isNotNull(interception.response?.statusCode, "200");
     });
 

From 65059645c2994fdfeb174eed82998a5bbc999d50 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Wed, 18 Jan 2023 19:47:20 +0200
Subject: [PATCH 35/37] fix selector for predefined PK

---
 .../cypress/integration/connection.spec.ts             | 10 +++++-----
 .../cypress/pages/replicationPage.ts                   | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
index dafa8163bd83..160af7c0d751 100644
--- a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
+++ b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -41,14 +41,14 @@ import {
   interceptGetConnectionRequest,
   interceptUpdateConnectionRequest,
   waitForGetConnectionRequest,
-  waitForUpdateConnectionRequest
+  waitForUpdateConnectionRequest,
 } from "commands/interceptors";
 
 describe("Connection - creation, updating connection replication settings, deletion", () => {
   beforeEach(() => {
     initialSetupCompleted();
 
-    interceptGetConnectionRequest()
+    interceptGetConnectionRequest();
     interceptUpdateConnectionRequest();
   });
 
@@ -455,7 +455,7 @@ describe("Connection sync modes", () => {
     searchStream(streamName);
     selectSyncMode("Incremental", "Deduped + history");
     selectCursorField(streamName, "col1");
-    checkPreFilledPrimaryKeyField("id");
+    checkPreFilledPrimaryKeyField(streamName, "id");
 
     submitButtonClick();
     confirmStreamConfigurationChangedPopup();
@@ -475,7 +475,7 @@ describe("Connection sync modes", () => {
     searchStream(streamName);
 
     checkCursorField(streamName, "col1");
-    checkPreFilledPrimaryKeyField("id");
+    checkPreFilledPrimaryKeyField(streamName, "id");
 
     deleteSource(sourceName);
     deleteDestination(destName);
@@ -497,7 +497,7 @@ describe("Connection sync modes", () => {
     searchStream(streamName);
     selectSyncMode("Incremental", "Deduped + history");
     selectCursorField(streamName, "city");
-    isPrimaryKeyNonExist();
+    isPrimaryKeyNonExist(streamName);
     selectPrimaryKeyField(streamName, ["city_code"]);
 
     submitButtonClick();
diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index fe2ea7509090..b549777023c5 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -16,7 +16,7 @@ const dropDownOverlayContainer = "div[data-testid='overlayContainer']";
 const streamNameCell = "[data-testid='nameCell']";
 const streamDataTypeCell = "[data-testid='dataTypeCell']";
 const getExpandStreamArrowBtn = (streamName: string) => `[data-testid='${streamName}_expandStreamDetails']`;
-const preFilledPrimaryKeyText = "div[class^='PathPopout_text']";
+const getPreFilledPrimaryKeyText = (streamName: string) => `[data-testid='${streamName}_primaryKey_PathPopout_text']`;
 const successResult = "div[data-id='success-result']";
 const saveStreamChangesButton = "button[data-testid='resetModal-save']";
 const connectionNameInput = "input[data-testid='connectionName']";
@@ -157,12 +157,12 @@ export const checkCursorField = (streamName: string, expectedValue: string) =>
 export const checkPrimaryKey = (streamName: string, expectedValues: string[]) =>
   checkDropdownField(streamName, "primaryKey", expectedValues);
 
-export const checkPreFilledPrimaryKeyField = (expectedValue: string) => {
-  cy.get(preFilledPrimaryKeyText).contains(expectedValue);
+export const checkPreFilledPrimaryKeyField = (streamName: string, expectedValue: string) => {
+  cy.get(getPreFilledPrimaryKeyText(streamName)).contains(expectedValue);
 };
 
-export const isPrimaryKeyNonExist = () => {
-  cy.get(preFilledPrimaryKeyText).should("not.exist");
+export const isPrimaryKeyNonExist = (streamName: string) => {
+  cy.get(getPreFilledPrimaryKeyText(streamName)).should("not.exist");
 };
 
 export const searchStream = (value: string) => {

From 59e0cb2794cc8640859f6e611f3610cbc6e2cb54 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Wed, 18 Jan 2023 23:37:59 +0200
Subject: [PATCH 36/37] fix selector

---
 airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index b549777023c5..0505f4ce7640 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -16,7 +16,7 @@ const dropDownOverlayContainer = "div[data-testid='overlayContainer']";
 const streamNameCell = "[data-testid='nameCell']";
 const streamDataTypeCell = "[data-testid='dataTypeCell']";
 const getExpandStreamArrowBtn = (streamName: string) => `[data-testid='${streamName}_expandStreamDetails']`;
-const getPreFilledPrimaryKeyText = (streamName: string) => `[data-testid='${streamName}_primaryKey_PathPopout_text']`;
+const getPreFilledPrimaryKeyText = (streamName: string) => `[data-testid='${streamName}_primaryKey_pathPopout_text']`;
 const successResult = "div[data-id='success-result']";
 const saveStreamChangesButton = "button[data-testid='resetModal-save']";
 const connectionNameInput = "input[data-testid='connectionName']";

From 86cc98efce7aa428d03267ddab2a54694ea89575 Mon Sep 17 00:00:00 2001
From: Volodymyr Petrov <volodymyr.s.petrov@globallogic.com>
Date: Thu, 19 Jan 2023 13:39:40 +0200
Subject: [PATCH 37/37] add comment regarding dropdown

---
 airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index 0505f4ce7640..e833fc14be34 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -92,7 +92,8 @@ const selectFieldDropdownOption = (streamName: string, dropdownType: Dropdown, v
       cy.get(getFieldDropdownOption(value)).click();
     }
   });
-  // close dropdown - click on dropdown overlay if exist
+  // close dropdown
+  // (dropdown need to be closed manually by clicking on overlay in case if multiple option selection is available)
   cy.get("body").then(($body) => {
     if ($body.find(dropDownOverlayContainer).length > 0) {
       cy.get(dropDownOverlayContainer).click();