attempt

Author: paula-stacho

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

@@ -1444,6 +1444,8 @@ export const CreateDataModelCollectionCheckbox = (
 ): string =>
   `${CreateDataModelModal} [data-testid="new-diagram-collection-checkbox-${collectionName}"]`;
 export const DataModelEditor = '[data-testid="diagram-editor-container"]';
+export const DataModelZoomOutButton = `${DataModelEditor} [aria-label="Minus Icon"]`;
+export const DataModelZoomInButton = `${DataModelEditor} [aria-label="Plus Icon"]`;
 export const DataModelPreview = `${DataModelEditor} [data-testid="model-preview"]`;
 export const DataModelPreviewCollection = (collectionId: string) =>
   `${DataModelPreview} [data-nodeid="${collectionId}"]`;
@@ -1484,6 +1486,8 @@ export const DataModelRelationshipForeignFieldSelect =
   '//label[text()="Foreign field"]';
 export const DataModelRelationshipForeignCardinalitySelect =
   '//label[text()="Foreign cardinality"]';
+export const DataModelRelationshipCardinalityOption = (value: string) =>
+  `[role="option"][value="${value}"]`;
 export const DataModelCollectionRelationshipItem = (relationshipId: string) =>
   `li[data-relationship-id="${relationshipId}"]`;
 export const DataModelCollectionRelationshipItemEdit = `[aria-label="Edit relationship"]`;

packages/compass-e2e-tests/tests/data-modeling-tab.test.ts

@@ -572,6 +572,12 @@ describe('Data Modeling tab', function () {
       });
       const relationshipId = edges[0].id;
 
+      // Zooming out so that the collections are more accessible
+      // (they can be covered by the drawer or the minimap)
+      await browser.clickVisible(Selectors.DataModelZoomOutButton);
+      await browser.clickVisible(Selectors.DataModelZoomOutButton);
+      await browser.clickVisible(Selectors.DataModelZoomOutButton);
+
       // Select the other collection and see that the new relationship is listed
       await selectCollectionOnTheDiagram(browser, 'test.testCollection-two');
       const collection2Name = await browser.getInputByLabel(
@@ -599,7 +605,7 @@ describe('Data Modeling tab', function () {
         selectSelector: await browser.getInputByLabel(
           drawer.$(Selectors.DataModelRelationshipForeignCardinalitySelect)
         ),
-        optionSelector: `[role="option"][value="100"]`,
+        optionSelector: Selectors.DataModelRelationshipCardinalityOption('100'),
       });
 
       // See the updated relationship on the diagram