From 953cc4a1fdd585a27c0b8bc4322fd0d23c54938c Mon Sep 17 00:00:00 2001
From: Alex Birdsall <ambirdsall@gmail.com>
Date: Sun, 28 Aug 2022 10:31:52 -0700
Subject: [PATCH] Select sync mode dropdown with a data-testid

---
 .../cypress/pages/replicationPage.ts                 | 12 +++++++-----
 .../CatalogTree/components/SyncSettingsDropdown.tsx  |  1 +
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
index 18e219a49d221..708aa7dff14e4 100644
--- a/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
+++ b/airbyte-webapp-e2e-tests/cypress/pages/replicationPage.ts
@@ -6,8 +6,7 @@ const destinationNamespace = "div[data-testid='namespaceDefinition']";
 const destinationNamespaceCustom = "div[data-testid='namespaceDefinition-customformat']";
 const destinationNamespaceSource = "div[data-testid='namespaceDefinition-source']";
 const destinationNamespaceCustomInput = "input[data-testid='input']";
-const syncModeDropdown = "div.sc-lbxAil.hgSxej";
-const syncModeFullAppendValue = "div.sc-ftvSup.sc-jDDxOa.sEMqZ.kVUvAu";
+const syncModeDropdown = "div[data-testid='syncSettingsDropdown'] input";
 const successResult = "span[data-id='success-result']";
 const saveStreamChangesButton = "button[data-testid='resetModal-save']";
 const connectionNameInput = "input[data-testid='connectionName']";
@@ -41,9 +40,12 @@ export const setupDestinationNamespaceSourceFormat = () => {
 }
 
 export const selectFullAppendSyncMode = () => {
-    cy.get(syncModeDropdown).click();
-    cy.get(syncModeFullAppendValue).click();
-}
+  cy.get(syncModeDropdown).first().click({ force: true });
+
+  cy.get(`.react-select__menu`)
+    .contains("Append") // it would be nice to select for "Full refresh" is there too
+    .click();
+};
 
 export const checkSuccessResult = () => {
     cy.get(successResult).should("exist");
diff --git a/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx b/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx
index e435b8ca7c8f7..f19ade854af6f 100644
--- a/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx
+++ b/airbyte-webapp/src/views/Connection/CatalogTree/components/SyncSettingsDropdown.tsx
@@ -106,6 +106,7 @@ const SyncSettingsDropdown: React.FC<DropdownProps> = (props) => (
       Option,
       Control: DropdownControl,
     }}
+    data-testid="syncSettingsDropdown"
     $withBorder
   />
 );