@camunda/e2e-test-suite 0.0.887 → 0.0.889

package/dist/pages/8.10/ModelerCreatePage.d.ts

@@ -32,6 +32,7 @@ declare class ModelerCreatePage {
     readonly createTask: Locator;
     readonly createEndEvent: Locator;
     readonly canvas: Locator;
+    readonly zoomOutButton: Locator;
     readonly endEventCanvas: Locator;
     readonly connectToOtherElementButton: Locator;
     readonly firstPlacedElement: Locator;
@@ -163,6 +164,8 @@ declare class ModelerCreatePage {
     clickDeploySubButtonWithRetry(clusterName: string): Promise<void>;
     clickCreateTask(): Promise<void>;
     clickCreateEndEvent(): Promise<void>;
+    fitElementIntoCanvas(element: Locator, margin?: number, maxZoomOutSteps?: number): Promise<void>;
+    clickShapeBelowContextPad(element: Locator): Promise<void>;
     clickCanvas(): Promise<void>;
     clickEndEventCanvas(): Promise<void>;
     clickConnectToOtherElementButton(): Promise<void>;

package/dist/pages/8.10/ModelerCreatePage.js

@@ -38,6 +38,7 @@ class ModelerCreatePage {
     createTask;
     createEndEvent;
     canvas;
+    zoomOutButton;
     endEventCanvas;
     connectToOtherElementButton;
     firstPlacedElement;
@@ -122,7 +123,11 @@ class ModelerCreatePage {
             name: 'Change element',
             exact: true,
         });
-        this.userTaskOption = page.getByRole('option', { name: 'User task' });
+        // Anchor on the built-in entry's data-id: the popup also lists the
+        // project's deployed resources (`data-id="resources-replace-bpmnProcess-N"`)
+        // labelled with the diagram name, which makes a role+name match on
+        // 'User task' ambiguous as soon as such a diagram exists.
+        this.userTaskOption = page.locator('.djs-popup-results [data-id="replace-with-user-task"]');
         this.priorityInput = page.getByRole('textbox', { name: 'priority' });
         this.appendEndEventButton = page.getByRole('button', {
             name: 'Append end event',
@@ -159,10 +164,13 @@ class ModelerCreatePage {
         this.deploySubButton = page.locator('[data-test="deploy-action"]');
         this.cancelButton = page.getByRole('button', { name: 'Cancel' });
         this.restConnectorOption = page.locator('[data-id="replace.template-io.camunda.connectors.HttpJson.v2"]');
-        this.webhookMessageStartEventConnectorOption = page.getByRole('listitem', {
-            name: 'Webhook Message Start Event Connector',
-            exact: true,
-        });
+        // bpmn-js popup entries are `li[role="option"]` inside a `role="listbox"`,
+        // so getByRole('listitem') no longer matches. Their accessible name also
+        // includes the entry description, and three entries share the label
+        // ("GitHub …", "Slack …", plain "Webhook …"), so name matching is
+        // ambiguous. Anchor on the entry's data-id — the same selector the hub's
+        // own e2e suite uses (`.djs-popup-results [data-id="<entryId>"]`).
+        this.webhookMessageStartEventConnectorOption = page.locator('.djs-popup-results [data-id="replace.template-io.camunda.connectors.webhook.WebhookConnectorStartMessage.v1"]');
         this.webhookTab = page.getByRole('tab', { name: 'Webhook' });
         this.webhookIsActiveButton = page.getByRole('button', {
             name: 'Webhook is active in Test',
@@ -174,7 +182,8 @@ class ModelerCreatePage {
             .first();
         this.createTask = page.getByTitle('Create task');
         this.createEndEvent = page.getByTitle('Create end event');
-        this.canvas = page.locator('rect').nth(1);
+        this.canvas = page.locator('.djs-container');
+        this.zoomOutButton = page.locator('[data-test="zoom-out"]');
         this.endEventCanvas = page.locator('[class="bjs-container"]');
         this.connectToOtherElementButton = page.getByRole('button', {
             name: 'Connect to other element',
@@ -197,9 +206,7 @@ class ModelerCreatePage {
         this.intermediateBoundaryEvent = page.getByRole('button', {
             name: 'Append intermediate/boundary',
         });
-        this.intermediateWebhookConnectorOption = page.getByRole('listitem', {
-            name: 'Webhook Intermediate Event',
-        });
+        this.intermediateWebhookConnectorOption = page.locator('.djs-popup-results [data-id="replace.template-io.camunda.connectors.webhook.WebhookConnectorIntermediate.v1"]');
         this.correlationKeyPayloadInput = page.getByLabel('Correlation key (payload)');
         this.correlationKeyProcessInput = page.getByLabel('Correlation key (process)');
         this.form = page.locator('[class="fjs-container"]');
@@ -240,7 +247,7 @@ class ModelerCreatePage {
         this.secondPlacedGateway = page
             .locator('[data-element-id*="Gateway"]')
             .last();
-        this.serviceTaskOption = page.getByRole('option', { name: 'Service task' });
+        this.serviceTaskOption = page.locator('.djs-popup-results [data-id="replace-with-service-task"]');
         this.taskDefinitionPanel = page.locator('[data-group-id="group-taskDefinition"]');
         this.jobTypeInput = page.getByRole('textbox', { name: /job type/i });
         this.playTab = page.getByRole('tab', {
@@ -283,10 +290,7 @@ class ModelerCreatePage {
         this.variableAssignmentValueTextboxThirdVariable = page.locator('#bio-properties-panel-StartEvent_1-output-2-source div');
         this.connectorsDocHandlingStartEventElement = page.locator('g:nth-child(5) > .djs-element > .djs-hit');
         this.detailsPanelToggle = page.locator('[data-test="details-panel-toggle"]');
-        this.timerEventOption = page.getByRole('listitem', {
-            name: 'Timer intermediate catch event',
-            exact: true,
-        });
+        this.timerEventOption = page.locator('.djs-popup-results [data-id="replace-with-timer-intermediate-catch"]');
         this.timerEventSettings = page.getByText(/^Timer$/).first();
         this.timerType = page.getByLabel('Type');
         this.timerValue = page.getByLabel('Value');
@@ -725,8 +729,45 @@ class ModelerCreatePage {
     async clickCreateEndEvent() {
         await this.createEndEvent.click({ timeout: 60000 });
     }
+    // The canvas does not scroll with the DOM, so an element the diagram has
+    // pushed past the canvas edge cannot be clicked at all — the hit test returns
+    // the canvas container (or the panel toggle bar beside it). Zoom out until
+    // the element and one element-width of margin fit inside the canvas.
+    async fitElementIntoCanvas(element, margin = 120, maxZoomOutSteps = 3) {
+        for (let step = 0; step < maxZoomOutSteps; step++) {
+            const canvasBox = await this.canvas.boundingBox();
+            const elementBox = await element.boundingBox();
+            if (canvasBox === null || elementBox === null) {
+                return;
+            }
+            const elementRightEdge = elementBox.x + elementBox.width + margin;
+            if (elementRightEdge <= canvasBox.x + canvasBox.width) {
+                return;
+            }
+            await this.zoomOutButton.click({ timeout: 30000 });
+        }
+    }
+    // A context pad is a fixed-size strip anchored to the top-right of its
+    // element, so once the diagram is zoomed out it can reach across the gap and
+    // cover the top of the next shape. Click the bottom edge of the target, below
+    // the strip, so a neighbour's open pad cannot swallow the click.
+    async clickShapeBelowContextPad(element) {
+        const box = await element.boundingBox();
+        if (box === null) {
+            await element.click({ timeout: 60000 });
+            return;
+        }
+        await element.click({
+            timeout: 60000,
+            position: { x: box.width / 2, y: box.height - 2 },
+        });
+    }
     async clickCanvas() {
-        await this.canvas.click({ timeout: 60000 });
+        // Clicking the canvas centre lands on a shape (or an open create pad) as
+        // soon as the diagram has more than a couple of elements, and the click is
+        // then intercepted instead of clearing the selection. Click the empty
+        // gutter above the diagram and right of the palette instead.
+        await this.canvas.click({ timeout: 60000, position: { x: 150, y: 25 } });
     }
     async clickEndEventCanvas() {
         await this.endEventCanvas.click({ timeout: 60000 });
@@ -971,16 +1012,22 @@ class ModelerCreatePage {
     }
     async clickSecondPlacedGateway(userTaskId = '') {
         try {
-            await this.secondPlacedGateway.click({ timeout: 60000 });
+            await this.clickShapeBelowContextPad(this.secondPlacedGateway);
         }
         catch (error) {
             await this.page.reload();
             await (0, sleep_1.sleep)(10000);
+            // The reload resets the canvas viewbox to the origin, discarding the
+            // auto-scroll that kept the right-most gateway on screen.
+            await this.fitElementIntoCanvas(this.secondPlacedGateway);
+            // Clear any selection the reload restored, so its context pad is closed
+            // before the gateway is clicked.
+            await this.clickCanvas();
             if (userTaskId != '') {
                 await this.clickUserTask(userTaskId);
                 await this.clickConnectToOtherElementButton();
             }
-            await this.secondPlacedGateway.click({ timeout: 60000 });
+            await this.clickShapeBelowContextPad(this.secondPlacedGateway);
         }
     }
     async addParallelUserTasks(numberOfTasks, taskName) {
@@ -1027,6 +1074,7 @@ class ModelerCreatePage {
             await this.clickCanvas();
             await (0, sleep_1.sleep)(1000);
         }
+        await this.fitElementIntoCanvas(this.secondPlacedGateway);
         await this.clickSecondPlacedGateway();
     }
     async clickServiceTaskOption() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/e2e-test-suite",
-  "version": "0.0.887",
+  "version": "0.0.889",
   "description": "End-to-end test helpers for Camunda 8",
   "repository": {
     "type": "git",