@camunda/e2e-test-suite 0.0.1443 → 0.0.1445

package/dist/pages/SM-8.11/ModelerCreatePage.js

@@ -0,0 +1,1950 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModelerCreatePage = void 0;
+const test_1 = require("@playwright/test");
+const ConnectorMarketplacePage_1 = require("./ConnectorMarketplacePage");
+const ProcessApplicationPage_1 = require("./ProcessApplicationPage");
+const sleep_1 = require("../../utils/sleep");
+const modelerCluster_1 = require("../../utils/modelerCluster");
+class ModelerCreatePage {
+    page;
+    processApplicationPage;
+    pendingFileSaves = 0;
+    lastFileSaveActivity = 0;
+    generalPanel;
+    taskDefinitionPanel;
+    processIdInput;
+    elemendIdInput;
+    startEventElement;
+    appendTaskButton;
+    changeTypeButton;
+    userTaskOption;
+    serviceTaskOption;
+    appendEndEventButton;
+    dialog;
+    startInstanceMainButton;
+    deployAndRunMainButton;
+    deployAndRunSubButton;
+    viewProcessInstanceLink;
+    nameInput;
+    jobTypeInput;
+    diagramBreadcrumb;
+    renameDiagramNameButton;
+    diagramNameInput;
+    moreActionsButton;
+    renameMenuItem;
+    renameInput;
+    renameSubmitButton;
+    variableInput;
+    businessIdInput;
+    embedFormButton;
+    embedButton;
+    newForm;
+    deploySubButton;
+    cancelButton;
+    restConnectorOption;
+    changeElementSearchInput;
+    changeElementResults;
+    reusableAssetsTab;
+    marketPlaceButton;
+    clientIdTextbox;
+    clientSecretTextbox;
+    rememberCredentialsCheckbox;
+    webhookMessageStartEventConnectorOption;
+    webhookIdInput;
+    implementationSection;
+    implementationOptions;
+    assignmentSection;
+    priorityInput;
+    secondElement;
+    firstElement;
+    thirdElement;
+    appendElementButton;
+    firstPlacedGateway;
+    secondPlacedGateway;
+    secondPlacedElement;
+    appendPreButton;
+    appendAnythingEntry;
+    appendPopup;
+    appendGatewayButton;
+    parallelGatewayOption;
+    connectToOtherElementButton;
+    canvas;
+    intermediateBoundaryEvent;
+    intermediateWebhookConnectorOption;
+    correlationKeyProcessInput;
+    correlationKeyPayloadInput;
+    playTab;
+    continueToPlayButton;
+    candidateUsersInput;
+    assigneeInput;
+    candidateGroupsInput;
+    tenantIdInput;
+    timerEventOption;
+    timerEventSettings;
+    timerType;
+    timerValue;
+    eighthPlacedElement;
+    processIdSecondLocator;
+    deployMenuItem;
+    additionalActionsButton;
+    closeModalButton;
+    deployErrorMessage;
+    implementTab;
+    bpmnReplaceMenu;
+    connectorsDocHandlingStartEventElement;
+    startEventVariableInputWithThreeVariables;
+    zeebeRestAddressVariable;
+    variableAssignmentValueTextbox;
+    zeebeSecretVariable;
+    variableAssignmentValueTextboxSecondVariable;
+    zeebeClientIdVariable;
+    variableAssignmentValueTextboxThirdVariable;
+    firstPlaceRESTConnector;
+    authenticationPanel;
+    templateNotFoundTag;
+    oauthTokenEndpointInput;
+    closeDetailsPanel;
+    openDetailsPanel;
+    constructor(page) {
+        this.page = page;
+        this.processApplicationPage = new ProcessApplicationPage_1.ProcessApplicationPage(page);
+        // Track the modeler's debounced autosave (PATCH /files/{id}) so a deploy
+        // can wait until the server holds the latest edits. See
+        // waitForFileSavesToSettle().
+        page.on('request', (request) => {
+            if (ModelerCreatePage.isFileSave(request)) {
+                this.pendingFileSaves++;
+                this.lastFileSaveActivity = Date.now();
+            }
+        });
+        const settleFileSave = (request) => {
+            if (ModelerCreatePage.isFileSave(request)) {
+                this.pendingFileSaves = Math.max(0, this.pendingFileSaves - 1);
+                this.lastFileSaveActivity = Date.now();
+            }
+        };
+        page.on('requestfinished', settleFileSave);
+        page.on('requestfailed', settleFileSave);
+        this.generalPanel = page.locator('[data-group-id="group-general"]');
+        this.taskDefinitionPanel = page
+            .locator('div')
+            .filter({ hasText: /^Task definition$/ })
+            .first();
+        this.processIdInput = page.getByLabel('ID', { exact: true });
+        this.elemendIdInput = page.getByLabel('ID', { exact: true });
+        this.startEventElement = page
+            .locator('.djs-shape:has(> .djs-visual > circle) > .djs-hit')
+            .first();
+        // The improved canvas exposes the append affordance of the selected element
+        // as an overlay indicator ("+" beside the shape) that stands in for the
+        // create pad's call-to-action entry; the `.djs-create-pad-icon` wrapper this
+        // used to hover is no longer rendered.
+        this.appendPreButton = page
+            .locator('.djs-append-indicator.selected')
+            .first();
+        this.appendTaskButton = page.getByRole('button', { name: 'Append task' });
+        this.appendAnythingEntry = page.locator('.djs-create-pad-entries [data-entry-id="append"]');
+        this.appendPopup = page.locator('.djs-popup.bpmn-append');
+        this.changeTypeButton = page.getByRole('button', {
+            name: 'Change element',
+            exact: true,
+        });
+        // 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.serviceTaskOption = page.getByRole('option', { name: 'Service task' });
+        this.appendEndEventButton = page.getByRole('button', {
+            name: 'Append end event',
+        });
+        this.appendGatewayButton = page.getByRole('button', {
+            name: 'Append gateway',
+        });
+        // bpmn-js renders popup entries as <li role="option" data-id="..."> and
+        // binds the click handler to that li. getByText resolved the nested
+        // <span class="djs-popup-label"> instead, whose box kept failing the
+        // visible/stable actionability check inside the scrolling results list --
+        // which is why this timed out on some runs and not others. Target the li,
+        // by the data-id bpmn-js owns, with the role as a fallback. The suffix
+        // match covers both the append and change-element popups
+        // (append-* / replace-with-parallel-gateway).
+        this.parallelGatewayOption = page
+            .locator('.djs-popup-results [data-id$="parallel-gateway"]')
+            .or(page.getByRole('option', { name: /parallel gateway/i }))
+            .first();
+        this.dialog = page.getByRole('dialog');
+        this.startInstanceMainButton = page.getByRole('button', {
+            name: 'Run',
+            exact: true,
+        });
+        this.deployAndRunMainButton = page.getByRole('button', {
+            name: 'Deploy & run',
+            exact: true,
+        });
+        this.deployAndRunSubButton = this.dialog.getByRole('button', {
+            name: 'Deploy & run',
+            exact: true,
+        });
+        this.viewProcessInstanceLink = page.getByRole('link', {
+            name: 'View process instance',
+        });
+        this.nameInput = page.getByLabel('Name', { exact: true });
+        this.jobTypeInput = page.getByRole('textbox', { name: /job type/i });
+        this.diagramBreadcrumb = page.locator('[data-test="breadcrumb-diagram"]');
+        this.renameDiagramNameButton = page.getByText('Rename');
+        this.diagramNameInput = page.locator('[data-test="editable-input"]');
+        // The rename kebab sits beside the breadcrumb in the app header. The
+        // editor's action bar is a <header> too, so it also carries the banner
+        // role -- getByRole('banner') alone matches three headers in the editor
+        // and pulls in "Additional actions" and "Browse more actions". Only the
+        // app header holds the breadcrumb nav, so filter on that. The kebab's own
+        // name is shell-dependent ("More actions" today, "<segment label> actions"
+        // once the design system derives it from the label), so match either.
+        this.moreActionsButton = page
+            .getByRole('banner')
+            .filter({ has: page.getByRole('navigation') })
+            .getByRole('button', { name: /actions$/i });
+        this.renameMenuItem = page.getByRole('menuitem', { name: 'Rename' });
+        this.renameInput = page.locator('[data-test="rename-input"]');
+        this.renameSubmitButton = page.locator('[data-test="rename-submit"]');
+        this.variableInput = page.locator('[id="variables-json"]');
+        this.businessIdInput = page.locator('[id^="business-id-input"]');
+        this.embedFormButton = page.getByRole('button', { name: 'Link form' });
+        // Workspaces-enabled Web Modeler renders the "Link a form" picker via
+        // LinkTargetModal, whose primary action carries data-test="link-target-confirm"
+        // instead of the legacy move dialog's "confirm-move".
+        this.embedButton = page
+            .locator('[data-test="confirm-move"]')
+            .or(page.locator('[data-test="link-target-confirm"]'));
+        this.newForm = page.locator('[data-test="item-New form"]');
+        this.continueToPlayButton = page.getByRole('button', { name: 'Continue' });
+        this.deploySubButton = page
+            .getByRole('dialog')
+            .getByRole('button', { name: 'Deploy' });
+        this.cancelButton = page.getByRole('button', { name: 'Cancel' });
+        this.restConnectorOption = page
+            .locator('.djs-popup-results')
+            .locator('[data-id="replace.template-io.camunda.connectors.HttpJson.v2"]');
+        this.changeElementSearchInput = page.locator('.djs-popup-search input');
+        this.changeElementResults = page.locator('.djs-popup-results');
+        // The tab renders its label as text content, and the product source
+        // spells it both "Reusable Assets" and "Reusable assets".
+        this.reusableAssetsTab = page.getByRole('tab', {
+            name: /reusable assets/i,
+        });
+        // Browse All replaces the legacy Marketplace entry only in large menus
+        // when the Design System is enabled; small or DS-off menus keep the
+        // original entry.
+        this.marketPlaceButton = page
+            .locator('[data-id="hub-browse-all"]')
+            .or(page.locator('[data-id="browseConnectors"]'));
+        this.clientIdTextbox = page.getByLabel('Client ID');
+        this.clientSecretTextbox = page.getByLabel('Client secret');
+        this.rememberCredentialsCheckbox = page.getByText('Remember credentials');
+        // A name query matches every project-local copy of this template too
+        // ("Webhook Message Start Event Connector - Copy", left behind by earlier
+        // marketplace imports), so it resolves to several options and clicking
+        // throws in strict mode. Target the bundled template by its stable entry
+        // id, the same way restConnectorOption does.
+        this.webhookMessageStartEventConnectorOption = page
+            .locator('.djs-popup-results')
+            .locator('[data-id="replace.template-io.camunda.connectors.webhook.WebhookConnectorStartMessage.v1"]');
+        this.webhookIdInput = page.getByLabel('Webhook ID');
+        this.firstElement = page.locator('.djs-element.djs-shape').nth(0);
+        this.secondElement = page.locator('.djs-element.djs-shape').nth(1);
+        this.thirdElement = page.locator('.djs-element.djs-shape').nth(2);
+        this.implementationSection = page.locator('[data-group-id="group-userTaskImplementation"]');
+        this.implementationOptions = page.locator('#bio-properties-panel-userTaskImplementation');
+        this.assignmentSection = page.locator('[data-group-id="group-assignmentDefinition"]');
+        // The user-task priority entry renders as <input type="number">, whose ARIA
+        // role is spinbutton, not textbox — so a textbox role query never resolves.
+        // Target it by its stable properties-panel entry id instead.
+        this.priorityInput = page.locator('#bio-properties-panel-priorityDefinitionPriority');
+        this.appendElementButton = page
+            .locator('[class="djs-context-pad open"]')
+            .first();
+        this.firstPlacedGateway = page
+            .locator('[data-element-id*="Gateway"]')
+            .first();
+        this.secondPlacedGateway = page
+            .locator('[data-element-id*="Gateway"]')
+            .last();
+        this.secondPlacedElement = page.locator('.djs-element.djs-shape').last();
+        this.connectToOtherElementButton = page.getByRole('button', {
+            name: 'Connect to other element',
+        });
+        this.canvas = page.locator('rect').nth(1);
+        this.intermediateBoundaryEvent = page.getByRole('button', {
+            name: 'Append intermediate/boundary',
+        });
+        this.intermediateWebhookConnectorOption = page
+            .locator('.djs-popup-results')
+            .locator('[data-id="replace.template-io.camunda.connectors.webhook.WebhookConnectorIntermediate.v1"]');
+        this.correlationKeyPayloadInput = page.getByLabel('Correlation key (payload)');
+        this.correlationKeyProcessInput = page.getByLabel('Correlation key (process)');
+        // Modeler renamed the third mode tab "Play" -> "Test" (camunda-hub
+        // a90fd06). Accept either label; the "Test" branch is scoped to the modes
+        // tablist because the details panel also renders a tab named "Test".
+        this.playTab = page
+            .getByRole('tab', { name: 'Play' })
+            .or(page
+            .getByRole('tablist', { name: 'List of modes' })
+            .getByRole('tab', { name: 'Test', exact: true }));
+        this.candidateUsersInput = page.getByRole('textbox', {
+            name: 'candidate users',
+        });
+        this.assigneeInput = page.getByRole('textbox', { name: 'assignee' });
+        this.candidateGroupsInput = page.getByRole('textbox', {
+            name: 'candidate groups',
+        });
+        this.tenantIdInput = page.getByLabel('Tenant ID (Optional)');
+        this.timerEventOption = page
+            .locator('.djs-popup-results')
+            .getByRole('option', {
+            name: 'Timer intermediate catch event',
+        });
+        this.timerEventSettings = page.getByText(/^Timer$/).first();
+        this.timerType = page.getByLabel('Type');
+        this.timerValue = page.getByLabel('Value');
+        this.eighthPlacedElement = page
+            .locator('g:nth-child(8) > .djs-element > .djs-hit')
+            .first();
+        this.processIdSecondLocator = page.getByLabel('Process ID');
+        this.additionalActionsButton = page.getByRole('button', {
+            name: 'Additional actions',
+        });
+        this.deployMenuItem = page.getByRole('menuitem', {
+            name: 'Deploy',
+        });
+        this.closeModalButton = page
+            .getByRole('dialog')
+            .getByRole('button', { name: 'Close' });
+        this.deployErrorMessage = page.getByText('The diagram failed to deploy & run');
+        this.implementTab = page.getByRole('tab', { name: 'Implement' });
+        this.bpmnReplaceMenu = page.getByTestId('bpmn-replace');
+        this.connectorsDocHandlingStartEventElement = page.locator('g:nth-child(5) > .djs-element > .djs-hit');
+        this.startEventVariableInputWithThreeVariables =
+            page.getByText('Output mapping3');
+        this.zeebeRestAddressVariable = page
+            .locator('[data-test="properties-panel"]')
+            .getByText('zeebeRestAdress');
+        this.variableAssignmentValueTextbox = page.getByRole('textbox', {
+            name: 'Variable assignment value',
+        });
+        this.zeebeSecretVariable = page
+            .locator('[data-test="properties-panel"]')
+            .getByText('zeebeSecret');
+        this.variableAssignmentValueTextboxSecondVariable = page.locator('#bio-properties-panel-StartEvent_1-output-1-source div');
+        this.zeebeClientIdVariable = page
+            .locator('[data-test="properties-panel"]')
+            .getByText('zeebeClientId');
+        this.variableAssignmentValueTextboxThirdVariable = page.locator('#bio-properties-panel-StartEvent_1-output-2-source div');
+        this.firstPlaceRESTConnector = page.locator('g:nth-child(2) > .djs-element > .djs-hit');
+        // Scoped to the group header (not any div whose text is "Authentication")
+        // so its class list can be read: the header carries `open` exactly while
+        // the group is expanded, which openAuthenticationPanel keys on.
+        this.authenticationPanel = page
+            .locator('.bio-properties-panel-group-header')
+            .filter({ hasText: /^Authentication$/ })
+            .first();
+        this.templateNotFoundTag = page
+            .locator('[data-test="properties-panel"]')
+            .getByText('Not found', { exact: true });
+        this.oauthTokenEndpointInput = page.getByLabel('OAuth 2.0 token endpoint');
+        // Hub's design-system details panel renders a second close control in its
+        // header, titled "Close Details panel" (PanelHeaderDs builds
+        // `Close ${title} panel`), which getByTitle also matches because its
+        // substring match is case-insensitive -- hence the strict-mode violation.
+        // Key on the sidebar toggle's data-test plus its state-dependent title so
+        // the locator stays unambiguous and still distinguishes collapse from
+        // expand. The title is matched case-insensitively (`i`) because the
+        // design-system toggle renders "Close details panel" while the legacy one
+        // renders "Close Details Panel".
+        this.closeDetailsPanel = page.locator('[data-test="details-panel-toggle"][title="Close Details Panel" i]');
+        this.openDetailsPanel = page.locator('[data-test="details-panel-toggle"][title="Open Details Panel" i]');
+    }
+    async deployProcessInstance(tenant = '') {
+        await this.clickDeployButton();
+        await (0, test_1.expect)(this.dialog).toBeVisible({ timeout: 30000 });
+        await (0, modelerCluster_1.selectModelerCluster)(this.dialog);
+        if (tenant.length > 0) {
+            await this.clickTenantIdInput();
+            await this.fillTenantIdInput(tenant);
+        }
+        await this.clickDeploySubButton();
+        await (0, test_1.expect)(this.page.getByText('Process successfully deployed')).toBeVisible({
+            timeout: 30000,
+        });
+        await this.clickCloseModalButton();
+    }
+    async clickCloseModalButton() {
+        await this.closeModalButton.click({ timeout: 60000 });
+    }
+    // Function to model a simple Camunda User Task Diagram with or without a form
+    async modelCamundaUserTaskDiagram(processName, processId = '', formName = '') {
+        await (0, test_1.expect)(this.generalPanel).toBeVisible({
+            timeout: 180000,
+        });
+        await this.enterDiagramName(processName);
+        await (0, sleep_1.sleep)(1000);
+        await this.clickCanvas();
+        await this.clickGeneralPropertiesPanel();
+        await this.assertNameInput(processName);
+        await this.clickStartEventElement();
+        if (processId.length > 0) {
+            await this.clickStartEventElement();
+            await this.clickGeneralPropertiesPanel();
+            await this.clickIdInput();
+            await this.fillIdInput(processId);
+            await (0, sleep_1.sleep)(1000);
+            await this.clickStartEventElement();
+            try {
+                await (0, test_1.expect)(this.appendElementButton).toBeVisible({ timeout: 1000 });
+            }
+            catch {
+                await this.clickStartEventElement();
+            }
+        }
+        await this.clickAppendElementButton();
+        await this.clickAppendTaskButton();
+        await this.clickChangeTypeButton();
+        await this.clickUserTaskOption();
+        await this.assertImplementationOption('zeebeUserTask');
+        if (formName.length > 0) {
+            await this.clickEmbedFormButton();
+            await this.clickForm(formName);
+            await this.clickEmbedButton();
+        }
+        await this.clickAppendElementButton();
+        await this.clickAppendEndEventButton();
+        await this.clickCanvas();
+        await this.assertThreeElementsVisible();
+    }
+    async modelJobWorkerDiagram(processName) {
+        await (0, test_1.expect)(this.generalPanel).toBeVisible({
+            timeout: 120000,
+        });
+        await this.enterDiagramName(processName);
+        await (0, sleep_1.sleep)(1000);
+        await this.clickStartEventElement();
+        await this.clickGeneralPropertiesPanel();
+        await this.clickIdInput();
+        await this.fillIdInput(processName);
+        await this.assertNameInput(processName);
+        await this.clickStartEventElement();
+        await this.clickAppendElementButton();
+        await this.clickAppendTaskButton();
+        await this.clickChangeTypeButton();
+        await this.clickUserTaskOption();
+        await this.chooseImplementationOption('jobWorker');
+        await this.clickAppendElementButton();
+        await this.clickAppendEndEventButton();
+        await this.clickCanvas();
+        await this.assertThreeElementsVisible();
+    }
+    async assertThreeElementsVisible() {
+        await (0, test_1.expect)(this.firstElement).toBeVisible({ timeout: 30000 });
+        await (0, test_1.expect)(this.secondElement).toBeVisible({ timeout: 30000 });
+        await (0, test_1.expect)(this.thirdElement).toBeVisible({ timeout: 30000 });
+    }
+    // The Carbon shell links a form via a plain list item click. Workspaces-enabled
+    // Web Modeler instead browses LinkTargetModal, whose rows are files keyed by id
+    // (not name) and merely *select* the row -- linking requires a separate confirm
+    // click (LinkTargetLevel/SelectableRow: `aria-label="Select ${name}"`, and the
+    // modal's own primary button, clicked by the caller via clickEmbedButton()).
+    async clickForm(name) {
+        const legacyItem = this.page
+            .locator(`[data-test="item-${name}"]`)
+            .getByText(name);
+        const selectableRow = this.page.getByRole('button', {
+            name: `Select ${name}`,
+            exact: true,
+        });
+        await legacyItem
+            .or(selectableRow)
+            .first()
+            .waitFor({ state: 'visible', timeout: 90000 });
+        if (await selectableRow.isVisible().catch(() => false)) {
+            await selectableRow.click({ timeout: 90000 });
+            return;
+        }
+        await legacyItem.click({ timeout: 90000 });
+    }
+    async runProcessInstance(variables = '', tenant = '', businessId = '') {
+        // ensureStageCluster may navigate away from the diagram, which would drop
+        // a save that is still debounced, so settle before and after it.
+        await this.waitForFileSavesToSettle();
+        await this.processApplicationPage.ensureStageCluster(process.env.MODELER_CLUSTER_NAME);
+        await this.waitForFileSavesToSettle();
+        const maxRetries = 3;
+        let executeSucceeded = false;
+        for (let attempt = 0; attempt < maxRetries; attempt++) {
+            try {
+                await this.clickDeployAndRunMainButton();
+                await (0, test_1.expect)(this.dialog).toBeVisible({
+                    timeout: 30000,
+                });
+                await (0, modelerCluster_1.selectModelerCluster)(this.dialog);
+                if (variables.length > 0) {
+                    await (0, test_1.expect)(this.variableInput).toBeVisible({
+                        timeout: 60000,
+                    });
+                    await this.clickVariableInput();
+                    await this.fillVariableInput(variables);
+                }
+                if (tenant.length > 0) {
+                    await this.clickTenantIdInput();
+                    await this.fillTenantIdInput(tenant);
+                }
+                if (businessId.length > 0) {
+                    await (0, test_1.expect)(this.businessIdInput).toBeVisible({
+                        timeout: 60000,
+                    });
+                    await this.businessIdInput.fill(businessId);
+                }
+                const [executeResponse] = await Promise.all([
+                    this.page.waitForResponse((response) => response.request().method() === 'POST' &&
+                        // Hub's deploy & run posts to /v2/files/{id}/execute; older
+                        // workspace builds used /v2/projects/{id} and
+                        // /process-applications/{id}.
+                        /\/(process-applications|projects|files)\/[^/]+\/execute$/.test(new URL(response.url()).pathname), { timeout: 30000 }),
+                    this.clickDeployAndRunSubButton(),
+                ]);
+                (0, test_1.expect)(executeResponse.ok(), await executeResponse.text()).toBeTruthy();
+                executeSucceeded = true;
+                break;
+            }
+            catch (error) {
+                if (attempt < maxRetries - 1) {
+                    console.warn(`Attempt ${attempt + 1} failed for deploy & run running process: ${error instanceof Error ? error.message : error}. Retrying...`);
+                    await this.page.reload();
+                    await (0, sleep_1.sleep)(10000);
+                }
+                else {
+                    throw new Error(`runProcessInstance failed after ${maxRetries} attempts. Last error: ${error instanceof Error ? error.message : error}`);
+                }
+            }
+        }
+        if (executeSucceeded) {
+            await this.instanceStartedAssertion();
+        }
+    }
+    // Test mode mounts a one-time "A new way to test your processes" modal
+    // (camunda-hub TestAnnouncementModal) that covers the setup steps behind it.
+    // It renders unless localStorage already carries the seen flag, which it
+    // reads on mount; a fresh Playwright context always starts empty, so set the
+    // flag before entering Test mode rather than clicking the modal away.
+    static isFileSave(request) {
+        return (request.method() === 'PATCH' &&
+            /\/api\/internal\/files\/[^/]+$/.test(new URL(request.url()).pathname));
+    }
+    // Deploy & run deploys the diagram the server holds, not what is on screen.
+    // Hub debounces edits for roughly a second before it sends
+    // PATCH /files/{id}, and the autosave label keeps showing the previous
+    // "Autosaved at ..." time during that window, so the label cannot prove the
+    // latest edits are stored. Wait until no file save is in flight and none
+    // has started for longer than the debounce, measured from this call, so a
+    // save queued by edits made just before it is observed and awaited.
+    async waitForFileSavesToSettle(quietMs = 2000, timeout = 60000) {
+        const start = Date.now();
+        await test_1.expect
+            .poll(() => this.pendingFileSaves === 0 &&
+            Date.now() - Math.max(start, this.lastFileSaveActivity) >= quietMs, { timeout, intervals: [250] })
+            .toBe(true);
+    }
+    async suppressTestModeAnnouncement() {
+        await this.page.evaluate(() => localStorage.setItem('play-testAnnouncementSeen', 'true'));
+    }
+    async switchToPlay() {
+        await (0, test_1.expect)(this.playTab).toBeVisible();
+        await this.suppressTestModeAnnouncement();
+        await this.playTab.click();
+    }
+    async clickGeneralPropertiesPanel() {
+        const isExpanded = (await this.generalPanel
+            .locator('.bio-properties-panel-group-header open')
+            .count()) > 0;
+        if (!isExpanded) {
+            await this.generalPanel.click({ timeout: 60000 });
+        }
+    }
+    async clickIdInput() {
+        try {
+            await this.processIdInput.click();
+        }
+        catch {
+            await this.processIdSecondLocator.click();
+        }
+    }
+    async clickTaskDefinitionPropertiesPanel() {
+        await this.taskDefinitionPanel.click();
+    }
+    async clickProcessIdInput() {
+        await this.processIdInput.click();
+    }
+    async fillIdInput(id) {
+        try {
+            await this.processIdInput.fill(id);
+        }
+        catch {
+            await this.processIdSecondLocator.fill(id);
+        }
+    }
+    async clickElemendIdInput() {
+        await this.elemendIdInput.click();
+    }
+    async fillElementIdInput(id) {
+        await this.elemendIdInput.fill(id);
+    }
+    async clickStartEventElement() {
+        await this.startEventElement.click();
+    }
+    async selectStartEventElement() {
+        await this.startEventElement.click();
+    }
+    // The create pad's direct append icons no longer carry the bpmn-js `title`
+    // attributes ("Append task", "Append intermediate/boundary", "Append end
+    // event"), so append through the "append anything" entry instead: it opens
+    // the bpmn-append popup whose entries are addressed by the stable `data-id`
+    // ids bpmn-js declares in PopupEntries. Since camunda-bpmn-js 5.30.0 those
+    // entries sit in drill-in categories, so filter with the popup search first
+    // and fall back to walking the categories when search does not surface it.
+    // The append create pad renders its entries asynchronously once the source
+    // element is selected, so wait for the requested entry instead of probing for
+    // it. Entries are addressed by the `data-entry-id` bpmn-js declares on them
+    // ("append.end-event", "append.intermediate-event", "append.append-task").
+    async clickCreatePadEntry(entryId) {
+        const entry = this.page.locator(`.djs-create-pad-entries [data-entry-id="${entryId}"]`);
+        try {
+            await entry.waitFor({ state: 'visible', timeout: 30000 });
+        }
+        catch {
+            return false;
+        }
+        await entry.click({ timeout: 30000 });
+        return true;
+    }
+    async appendViaPopup(entryId, categoryIds, searchTerm) {
+        await this.hoverOnLocator(this.appendPreButton);
+        await this.appendAnythingEntry.click({ timeout: 30000 });
+        await (0, test_1.expect)(this.appendPopup).toBeVisible({ timeout: 30000 });
+        const entry = this.appendPopup.locator(`[data-id="${entryId}"]`).first();
+        const search = this.appendPopup.locator('.djs-popup-search input');
+        const hasSearch = await search
+            .isVisible({ timeout: 5000 })
+            .catch(() => false);
+        if (hasSearch) {
+            await search.fill(searchTerm);
+        }
+        const surfaced = await entry.isVisible({ timeout: 5000 }).catch(() => false);
+        if (!surfaced) {
+            if (hasSearch) {
+                await search.fill('');
+            }
+            // The popup drills into a category based on its own hover-tracked
+            // selection, so hover each category before clicking it.
+            for (const categoryId of categoryIds) {
+                const category = this.appendPopup
+                    .locator(`[data-id="${categoryId}"]`)
+                    .first();
+                await category.scrollIntoViewIfNeeded({ timeout: 15000 });
+                await category.hover({ timeout: 15000 });
+                await category.click({ timeout: 15000 });
+            }
+        }
+        await entry.scrollIntoViewIfNeeded({ timeout: 30000 });
+        await entry.click({ timeout: 30000 });
+        await (0, test_1.expect)(this.appendPopup).toBeHidden({ timeout: 30000 });
+    }
+    async clickAppendTaskButton() {
+        await this.hoverOnLocator(this.appendPreButton);
+        if (await this.clickCreatePadEntry('append.append-task')) {
+            return;
+        }
+        await this.appendViaPopup('append-task', ['append-tasks'], 'Task');
+    }
+    // The create pad is only mounted while the append affordance is engaged. An
+    // element without an outgoing flow gets the pad on selection, but one that
+    // already has an outgoing flow (the first gateway of a parallel branch) only
+    // gets the overlay indicator ("+" beside the shape), and the pad appears once
+    // that indicator is hovered. The indicator carries its element id in
+    // `data-element`, so key the hover on the current selection: hovering another
+    // element's indicator would open its pad and append to the wrong shape.
+    async padHoverTargets(locator, selector) {
+        if (!selector.includes('create-pad')) {
+            return [locator];
+        }
+        const selectedElementId = await this.page
+            .locator('.djs-element.selected')
+            .first()
+            .getAttribute('data-element-id', { timeout: 5000 })
+            .catch(() => null);
+        if (!selectedElementId) {
+            return [locator];
+        }
+        return [
+            this.page
+                .locator(`.djs-append-indicator[data-element="${selectedElementId}"]`)
+                .first(),
+            locator,
+        ];
+    }
+    async hoverOnLocator(locator, selector = '.djs-create-pad-entry') {
+        // Only visible entries count: both `page.waitForSelector` and `.first()`
+        // resolve a single DOM match, so an entry belonging to another element's
+        // closed pad would never satisfy `visible`.
+        const padEntry = this.page.locator(`${selector}:visible`).first();
+        let lastError = null;
+        // Promise.race leaves the losing branch pending, so when that branch later
+        // rejects nobody awaits it: the unhandled rejection fails the whole test
+        // with the loser's message ("Canvas not visible") before the callers'
+        // retries can recover. Poll the two states sequentially instead.
+        for (let attempt = 1; attempt <= 3; attempt++) {
+            if (await padEntry.isVisible()) {
+                return;
+            }
+            // bpmn-js opens the pad on mouseover, which does not re-fire while the
+            // pointer already rests on the trigger, so park it off-element on retries.
+            if (attempt > 1) {
+                await this.page.mouse.move(0, 0);
+            }
+            for (const target of await this.padHoverTargets(locator, selector)) {
+                const targetVisible = await target
+                    .waitFor({ state: 'visible', timeout: 5000 })
+                    .then(() => true)
+                    .catch(() => false);
+                if (!targetVisible) {
+                    continue;
+                }
+                // force: the append affordance of an element that already has an
+                // outgoing flow is drawn on top of that sequence flow, so the
+                // hit-target check resolves to the connection instead of the trigger.
+                await target.hover({ timeout: 10000, force: true }).catch((error) => {
+                    lastError = error;
+                });
+                const padOpen = await padEntry
+                    .waitFor({ state: 'visible', timeout: 10000 })
+                    .then(() => true)
+                    .catch(() => false);
+                if (padOpen) {
+                    return;
+                }
+            }
+        }
+        throw new Error(`Canvas pad entries "${selector}" did not open${lastError ? `: ${lastError}` : ''}`);
+    }
+    async clickAppendGatewayButton() {
+        await this.appendGatewayButton.click({ timeout: 90000 });
+    }
+    async setEngineVersion(version) {
+        const escapedVersion = version.replace(/\./g, '\\.');
+        const versionSelector = this.page.locator('[data-test="version-selector"]');
+        // The dropdown renders each version as an outer <label> (Styled.Label)
+        // wrapping a radio input and a separate text span ("Camunda X.Y").
+        // The radio's accessible name is empty (no label prop passed), so
+        // getByRole('radio') won't resolve to the right item by text.
+        // Clicking the outer <label> containing the version string triggers
+        // the enclosed radio input's onChange via event propagation.
+        const versionOption = this.page
+            .getByRole('radiogroup', { name: 'Camunda versions' })
+            .locator('label')
+            .filter({ hasText: new RegExp(`Camunda\\s+${escapedVersion}`) })
+            .first();
+        // Retry the open-select cycle and confirm via the selector label ("Check
+        // problems against: Camunda X.Y"). A label click dropped while the dropdown
+        // is still animating silently leaves the diagram on the default (older)
+        // version, which greys out the version-gated REST connector downstream.
+        for (let attempt = 0; attempt < 3; attempt++) {
+            if (await versionSelector.filter({ hasText: version }).isVisible()) {
+                return;
+            }
+            await versionSelector.click({ timeout: 10000 });
+            await versionOption.click({ timeout: 5000 });
+            const committed = await versionSelector
+                .filter({ hasText: version })
+                .waitFor({ state: 'visible', timeout: 10000 })
+                .then(() => true)
+                .catch(() => false);
+            if (committed) {
+                return;
+            }
+        }
+    }
+    async clickChangeTypeButton() {
+        try {
+            await this.changeTypeButton.click({ timeout: 180000, force: true });
+        }
+        catch {
+            await this.page.reload();
+            if (await this.secondElement.isVisible({ timeout: 6000 })) {
+                await this.secondElement.click({ timeout: 90000, force: true });
+                await this.changeTypeButton.click({ timeout: 90000, force: true });
+            }
+            else {
+                await this.firstElement.click({ timeout: 90000, force: true });
+                await this.changeTypeButton.click({ timeout: 90000, force: true });
+            }
+        }
+    }
+    async clickUserTaskOption() {
+        const maxRetries = 3;
+        for (let retries = 0; retries < maxRetries; retries++) {
+            try {
+                if (retries === 0) {
+                    await this.userTaskOption.click({ timeout: 30000, force: true });
+                }
+                else {
+                    await this.changeTypeButton.click({ force: true, timeout: 30000 });
+                    await this.userTaskOption.click({ timeout: 30000, force: true });
+                }
+                return;
+            }
+            catch (error) {
+                console.error(`Click attempt ${retries + 1} failed: ${error}`);
+                await new Promise((resolve) => setTimeout(resolve, 10000));
+            }
+        }
+        throw new Error(`Failed to click the button after ${maxRetries} attempts.`);
+    }
+    async clickServiceTaskOption() {
+        const maxRetries = 3;
+        for (let retries = 0; retries < maxRetries; retries++) {
+            try {
+                if (retries === 0) {
+                    await this.serviceTaskOption.click({ timeout: 30000, force: true });
+                }
+                else {
+                    await this.changeTypeButton.click({ force: true, timeout: 30000 });
+                    await this.serviceTaskOption.click({ timeout: 30000, force: true });
+                }
+                return;
+            }
+            catch (error) {
+                console.error(`Click attempt ${retries + 1} failed: ${error}`);
+                await new Promise((resolve) => setTimeout(resolve, 10000));
+            }
+        }
+        throw new Error(`Failed to click the button after ${maxRetries} attempts.`);
+    }
+    async appendEndEvent() {
+        if (await this.clickCreatePadEntry('append.end-event')) {
+            return;
+        }
+        await this.appendViaPopup('append-none-end-event', ['append-events', 'append-end-events'], 'End event');
+    }
+    async clickAppendEndEventButton(parentElement) {
+        try {
+            await this.appendEndEvent();
+        }
+        catch (error) {
+            await this.page.reload();
+            const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+            await sleep(10000);
+            if (parentElement == undefined) {
+                await this.clickSecondPlacedElement();
+            }
+            else if (parentElement == 'parallelGateway') {
+                await this.clickSecondPlacedGateway();
+            }
+            await this.hoverOnLocator(this.appendElementButton);
+            await this.appendEndEvent();
+        }
+    }
+    async clickFirstPlacedElement() {
+        await this.firstElement.click({ timeout: 90000 });
+    }
+    async clickSecondPlacedElement() {
+        await this.secondPlacedElement.click({ timeout: 60000 });
+    }
+    async clickFirstPlacedGateway() {
+        try {
+            await this.firstPlacedGateway.click({ timeout: 3000 });
+            await this.appendElementButton.isVisible({ timeout: 3000 });
+        }
+        catch (error) {
+            await this.page.reload();
+            await this.firstPlacedGateway.click({ timeout: 3000 });
+        }
+    }
+    async clickSecondPlacedGateway() {
+        try {
+            await (0, test_1.expect)(this.secondPlacedGateway).toBeVisible({ timeout: 30000 });
+            await this.secondPlacedGateway.click({ timeout: 3000 });
+            await this.appendElementButton.isVisible({ timeout: 3000 });
+        }
+        catch (error) {
+            await this.page.reload();
+            await (0, test_1.expect)(this.secondPlacedGateway).toBeVisible({ timeout: 30000 });
+            await this.secondPlacedGateway.click({ timeout: 3000 });
+        }
+    }
+    async clickDeployAndRunMainButton() {
+        await this.deployAndRunMainButton.click({ timeout: 30000 });
+    }
+    async clickDeployAndRunSubButton() {
+        await this.deployAndRunSubButton.click({ timeout: 30000 });
+    }
+    async clickViewProcessInstanceLink() {
+        await this.viewProcessInstanceLink.click({ timeout: 90000 });
+    }
+    async clickNameInput() {
+        await this.nameInput.click();
+    }
+    async clickUserTask(id) {
+        const priorityUserTask = this.page.locator(`[data-element-id="${id}"]`);
+        await priorityUserTask.click({ timeout: 60000 });
+    }
+    async clickCanvasElement(elementId) {
+        await this.page
+            .locator(`[data-element-id="${elementId}"]`)
+            .first()
+            .click({ timeout: 30000 });
+    }
+    async fillNameInput(name) {
+        await this.nameInput.fill(name);
+    }
+    async clickJobTypeInput() {
+        await this.jobTypeInput.click();
+    }
+    async fillJobTypeInput(name) {
+        await this.jobTypeInput.fill(name);
+    }
+    // Carbon renamed a diagram in three steps: click the diagram crumb, click
+    // "Rename" in the menu it opens, then type into the inline input. The Design
+    // System shell has no breadcrumb-diagram hook and drives the whole rename
+    // from enterDiagramName()'s dialog path, so these two steps have nothing to
+    // do there -- skip them instead of timing out on a hook that is gone.
+    async clickDiagramBreadcrumb() {
+        if (!(await this.legacyBreadcrumbPresent())) {
+            return;
+        }
+        await this.diagramBreadcrumb.click({ timeout: 60000 });
+    }
+    async clickEditDiagramNameButton() {
+        if (!(await this.legacyBreadcrumbPresent())) {
+            return;
+        }
+        await this.renameDiagramNameButton.click();
+    }
+    async legacyBreadcrumbPresent() {
+        return this.diagramBreadcrumb
+            .waitFor({ state: 'visible', timeout: 5000 })
+            .then(() => true)
+            .catch(() => false);
+    }
+    // The Carbon editor renames the diagram through an inline editable input. The
+    // Design System editor has none: renaming moved to the breadcrumb's "More
+    // actions" > "Rename" dialog. Use whichever the deployed shell offers.
+    async enterDiagramName(name) {
+        // Same hazard as ModelerHomePage.enterFormName: the project page also has a
+        // "More actions" button, so the or() gate can be satisfied before the
+        // editor has loaded and the rename would target the project.
+        await this.page.waitForURL(/\/diagrams\//, { timeout: 60000 });
+        await this.diagramNameInput
+            .or(this.moreActionsButton)
+            .first()
+            .waitFor({ state: 'visible', timeout: 60000 });
+        if (await this.diagramNameInput.isVisible()) {
+            await this.diagramNameInput.fill(name, { timeout: 60000 });
+            await this.diagramNameInput.press('Enter', { timeout: 60000 });
+            return;
+        }
+        // Today the shell renders one kebab for the whole breadcrumb; camunda-hub
+        // #28045 gives every segment its own, so take the LAST -- the diagram is
+        // the deepest crumb. With one kebab last() is that same button.
+        //
+        // The header's license tags sit in an ml-auto flex sibling that overlaps
+        // the kebab once they render, so a mouse click lands on the tag instead.
+        // Open the menu from the keyboard -- same control, reached the way a
+        // keyboard user reaches it, and unaffected by what paints over it.
+        //
+        // The header also keeps settling after the editor paints -- license tags
+        // mount into that same ml-auto sibling and the breadcrumb label swaps to
+        // the persisted diagram name -- and either re-render unmounts an already
+        // open Radix menu, so re-open it on each attempt instead of clicking into
+        // a menu that may already be gone.
+        const diagramActions = this.moreActionsButton.last();
+        await (0, test_1.expect)(async () => {
+            if (await this.renameMenuItem.isVisible()) {
+                await this.page.keyboard.press('Escape');
+                await (0, test_1.expect)(this.renameMenuItem).toBeHidden({ timeout: 5000 });
+            }
+            await diagramActions.focus();
+            await diagramActions.press('Enter');
+            await this.renameMenuItem.click({ timeout: 15000 });
+            await (0, test_1.expect)(this.renameInput).toBeVisible({ timeout: 10000 });
+        }).toPass({ timeout: 120000, intervals: [1000, 2000, 5000] });
+        await this.renameInput.fill(name);
+        await this.renameSubmitButton.click();
+        await (0, test_1.expect)(this.renameInput).toBeHidden({ timeout: 10000 });
+    }
+    async clickVariableInput() {
+        await this.variableInput.click();
+    }
+    async fillVariableInput(variable) {
+        await this.variableInput.fill(variable);
+    }
+    async clickEmbedFormButton() {
+        await this.embedFormButton.click({ timeout: 90000 });
+    }
+    async clickEmbedButton() {
+        await this.embedButton.click();
+    }
+    async clickAdditionalActionsButton() {
+        await (0, test_1.expect)(this.additionalActionsButton).toBeVisible({ timeout: 20000 });
+        await this.additionalActionsButton.click({ timeout: 60000 });
+    }
+    async clickDeployMenuItem() {
+        await (0, test_1.expect)(this.deployMenuItem).toBeVisible({ timeout: 20000 });
+        await this.deployMenuItem.click({ timeout: 60000 });
+    }
+    async clickDeployButton() {
+        await this.clickAdditionalActionsButton();
+        await this.clickDeployMenuItem();
+    }
+    async clickDeploySubButton() {
+        await this.deploySubButton.click({ timeout: 90000 });
+    }
+    async clickCancelButton() {
+        await this.cancelButton.click();
+    }
+    async recoverModelerSession(recoverSession) {
+        const rawUrl = this.page.url();
+        let url;
+        if (rawUrl.includes('client_id=web-modeler')) {
+            const match = rawUrl.match(/redirect_uri=([^&]+)/);
+            url = match
+                ? decodeURIComponent(match[1]).split('?')[0]
+                : rawUrl.split('?')[0];
+        }
+        else {
+            url = rawUrl.split('?')[0];
+        }
+        if (recoverSession) {
+            // Caller-provided function handles auth + navigation (e.g. navigationPage.goToModeler).
+            // It retries internally; after it returns the session is valid on Modeler home.
+            await recoverSession();
+        }
+        // Navigate to the diagram URL directly — goToModeler lands on Modeler home, and
+        // after a pod restart Modeler also loses OIDC state and redirects home, so we go
+        // to the diagram explicitly while the session is valid.
+        await this.page.goto(url, {
+            timeout: 30000,
+            waitUntil: 'domcontentloaded',
+        });
+        await (0, test_1.expect)(this.secondElement).toBeVisible({ timeout: 60000 });
+    }
+    // The change-element popup virtualizes its list: connector templates render
+    // below the built-in BPMN tasks and are not in the queryable DOM slice until
+    // the list is filtered, so every attempt has to re-type the filter -- a freshly
+    // (re)opened popup is always unfiltered, and asserting straight on the entry
+    // then times out against an off-screen node. Waiting for the search input also
+    // confirms the popup actually opened: the "Change element" click reports
+    // success even when the popup does not render. Use pressSequentially (not
+    // fill): fill sets the value in one shot and the single input event can land
+    // before bpmn-js attaches its search handler during the popup re-render.
+    async searchAndClickRestConnector() {
+        await (0, test_1.expect)(this.changeElementSearchInput).toBeVisible({ timeout: 30000 });
+        // 'Send REST Request' is the template's current name -- connectors #7917
+        // renamed it from 'REST Outbound Connector' on 2026-07-15, and "Outbound"
+        // now appears in no searchable field, so the old filter matched nothing.
+        // Templates live under the popup's "Reusable assets" tab, so searching the
+        // BPMN tab alone never lists them.
+        await this.revealChangeElementTemplate(this.restConnectorOption, 'Send REST Request');
+        await (0, test_1.expect)(this.restConnectorOption).toBeVisible({ timeout: 30000 });
+        await this.restConnectorOption.click({ timeout: 90000 });
+    }
+    async clickRestConnectorOption(recoverSession) {
+        const maxRetries = 4;
+        for (let retries = 0; retries < maxRetries; retries++) {
+            try {
+                if (retries === 0) {
+                    // Panel already open from the caller (modelRestConnector in UtilitiesPage)
+                    await this.searchAndClickRestConnector();
+                }
+                else if (retries === 1 || retries === 2) {
+                    // Recover session cleanly instead of page.reload()
+                    await this.recoverModelerSession(recoverSession);
+                    await this.secondElement.click({ timeout: 60000 });
+                    await this.changeTypeButton.click({ force: true, timeout: 60000 });
+                    await this.searchAndClickRestConnector();
+                }
+                else {
+                    // Fourth attempt: install via marketplace (real product flow)
+                    await this.recoverModelerSession(recoverSession);
+                    await this.secondElement.click({ timeout: 60000 });
+                    await this.changeTypeButton.click({ force: true, timeout: 60000 });
+                    await this.clickMarketPlaceButton();
+                    const marketplace = new ConnectorMarketplacePage_1.ConnectorMarketplacePage(this.page);
+                    await marketplace.clickSearchForConnectorTextbox();
+                    await marketplace.fillSearchForConnectorTextbox('REST Connector');
+                    await marketplace.waitForConnectorSearchResults();
+                    await marketplace.downloadConnectorToProject();
+                    // Marketplace closes the change-type panel; reopen it so the newly
+                    // installed connector appears in the list.
+                    await this.changeTypeButton.click({ force: true, timeout: 60000 });
+                    await this.searchAndClickRestConnector();
+                }
+                return;
+            }
+            catch (error) {
+                console.error(`Click attempt ${retries + 1} failed: ${error}`);
+                await new Promise((resolve) => setTimeout(resolve, 10000));
+            }
+        }
+        throw new Error(`Failed to click the button after ${maxRetries} attempts.`);
+    }
+    async clickMarketPlaceButton() {
+        const maxRetries = 3;
+        for (let retries = 0; retries < maxRetries; retries++) {
+            try {
+                if (retries === 0) {
+                    await this.marketPlaceButton.click({ timeout: 30000 });
+                }
+                else {
+                    await this.changeTypeButton.click({ force: true, timeout: 30000 });
+                    await this.marketPlaceButton.click({ timeout: 30000 });
+                }
+                return;
+            }
+            catch (error) {
+                console.error(`Click attempt ${retries + 1} failed: ${error}`);
+                await new Promise((resolve) => setTimeout(resolve, 10000));
+            }
+        }
+        throw new Error(`Failed to click the button after ${maxRetries} attempts.`);
+    }
+    async completeDeploymentEndpointConfiguration() {
+        await (0, test_1.expect)(this.clientIdTextbox).toBeVisible({ timeout: 60000 });
+        await this.clientIdTextbox.click({ timeout: 30000 });
+        await this.clientIdTextbox.fill('test', { timeout: 30000 });
+        await this.clientSecretTextbox.click({ timeout: 30000 });
+        await this.clientSecretTextbox.fill(process.env.DISTRO_QA_E2E_TESTS_KEYCLOAK_CLIENTS_SECRET);
+        await this.rememberCredentialsCheckbox.click({ timeout: 30000 });
+    }
+    async completePlayConfiguration() {
+        const timeout = 30000;
+        // New flow (8.10+): "Set up environment" panel with three steps:
+        //   1. Connect cluster → "Configure environment" modal → select cluster → Save
+        //   2. Deploy process → wait for success banner
+        //   3. Configure test case
+        // The "Test Studio" rebrand gave this button the stable test id
+        // `test-configuration-deploy-button` (confirmed in the failing run's trace
+        // DOM). Prefer it, and keep the label-scoped locator as a fallback for
+        // older modeler builds that render the button without a test id.
+        const setupDeployButton = this.page
+            .getByTestId('test-configuration-deploy-button')
+            .or(this.page
+            .getByText('Deploy process')
+            .locator('..')
+            .getByRole('button', { name: 'Deploy' }))
+            .first();
+        // Both attributes on this button have been renamed by camunda-hub, in
+        // separate commits: a90fd06 changed the label from "Configure scenario" to
+        // "Configure test case", and b3958a1649 (#27259, 2026-08-07) then changed
+        // the test id from `play-configuration-configure-scenario-button` to
+        // `configure-test-case-button`. Match current test id, then pre-rename test
+        // id, then either label, so a further rename of any single attribute cannot
+        // break the step.
+        const configureScenarioButton = this.page
+            .getByTestId('configure-test-case-button')
+            .or(this.page.getByTestId('play-configuration-configure-scenario-button'))
+            .or(this.page.getByRole('button', {
+            name: /^Configure (test case|scenario)$/,
+        }))
+            .first();
+        const configurationOverlay = this.page
+            .locator('[data-test="test-studio-configuration-overlay"]')
+            .or(this.page.locator('[data-test="play-configuration-overlay"]'))
+            .or(this.page.getByText(/set up test run/i))
+            .first();
+        const configureTestPanel = this.page.getByTestId('configure-test-panel');
+        await (0, test_1.expect)(configurationOverlay
+            .or(this.continueToPlayButton)
+            .or(configureTestPanel)
+            .first()).toBeVisible({ timeout: 90000 });
+        if (await configureTestPanel.isVisible()) {
+            // Already past setup for this diagram -- nothing to drive.
+            return;
+        }
+        // Keyed on the overlay itself, not on its Deploy button: when
+        // checkExistingDeployment finds a deployment the overlay opens with the
+        // deploy step already complete, so there is no Deploy button to see and
+        // keying on it would fall through to the legacy Continue flow.
+        const isNewFlow = await configurationOverlay.isVisible();
+        if (isNewFlow) {
+            // Step 1: connect cluster if not yet connected (modal with cluster dropdown)
+            const connectClusterButton = this.page.getByRole('button', {
+                name: 'Select environment',
+            });
+            const needsConnect = await connectClusterButton
+                .isVisible({ timeout: 3000 })
+                .catch(() => false);
+            if (needsConnect) {
+                await connectClusterButton.click({ timeout });
+                // camunda-hub's TestModeDeployEndpointConfigModal replaced the
+                // "Configure environment" combobox dialog with a "Choose where to
+                // run" dialog: environments now render as a radio group (one radio
+                // per environment), not a dropdown. The first environment is
+                // auto-selected once the list loads, but click it explicitly rather
+                // than relying on that default.
+                const configureEnvDialog = this.page
+                    .getByRole('dialog')
+                    .filter({ hasText: 'Choose where to run' });
+                await configureEnvDialog.getByRole('radio').first().click({ timeout });
+                await configureEnvDialog
+                    .getByRole('button', { name: 'Save' })
+                    .click({ timeout });
+            }
+            // Step 2: deploy, unless the overlay already opened with the
+            // deploy step complete. checkExistingDeployment only runs when
+            // processApplicationId is defined, which it now is, so re-entering
+            // Play on an already-deployed process application legitimately
+            // has nothing to deploy and renders no Deploy button at all.
+            // The "Configure test case" accordion header is always rendered once
+            // the overlay is up -- it's only enabled once deploy has completed --
+            // so isVisible() alone is always true here and this check must gate on
+            // isEnabled() instead, or Step 2 is skipped even when deploy is still
+            // pending and Step 3 spins forever on a button that never unlocks.
+            const alreadyDeployed = await configureScenarioButton
+                .isEnabled({ timeout: 3000 })
+                .catch(() => false);
+            if (!alreadyDeployed) {
+                // Step 2: deploy
+                await setupDeployButton.click({ timeout });
+                // Deploy is done when the "Configure test case" button unlocks. There
+                // is no `deploy-success-badge` in the Test Studio DOM -- the overlay
+                // stays open with the deploy step showing a green check and that button
+                // enabled (this is how hub's own `Definition.setupEnvironment` e2e page
+                // object drives it: click Deploy, then click Configure, with no badge
+                // in between). On a build that auto-collapses the overlay the
+                // configure-test panel renders instead, so accept either. A failed
+                // deploy leaves the button disabled and the panel absent, so this still
+                // times out on a real deploy failure rather than masking it.
+                await (0, test_1.expect)(async () => {
+                    const deployComplete = (await configureScenarioButton
+                        .isEnabled({ timeout: 3000 })
+                        .catch(() => false)) || (await configureTestPanel.isVisible());
+                    (0, test_1.expect)(deployComplete).toBe(true);
+                }).toPass({ timeout: 90000 });
+            }
+            // Step 3: reveal the "Configure test case" section. In the current Test
+            // Studio the "Set up environment" panel is an inline accordion, not a
+            // blocking overlay -- its heading is always present and step 3 auto-opens
+            // once deploy completes, rendering ConfigureTestPanel with the Start
+            // button. Clicking the "Configure test case" accordion heading while it
+            // is already open calls showConfigurationOverlay() and collapses the
+            // panel again, so only click it to OPEN the section when the panel is not
+            // yet visible; keying on the always-present overlay heading here would
+            // re-collapse the panel on every pass.
+            await (0, test_1.expect)(async () => {
+                if (!(await configureTestPanel.isVisible())) {
+                    await configureScenarioButton.click({ timeout });
+                }
+                await (0, test_1.expect)(configureTestPanel).toBeVisible({ timeout: 15000 });
+            }).toPass({ timeout: 90000 });
+            return;
+        }
+        // Legacy flow: "Continue" button → "Play environment is ready" confirmation.
+        let attempts = 0;
+        const maxRetries = 2;
+        while (attempts < maxRetries) {
+            try {
+                if (attempts > 0)
+                    await this.switchToPlay(); // Call switchToPlay on subsequent attempts
+                await this.continueToPlayButton.click({ timeout });
+                await (0, test_1.expect)(this.page.getByText('Play environment is ready')).toBeVisible({ timeout: 90000 });
+                return; // Exit if successful
+            }
+            catch (error) {
+                if (attempts >= maxRetries - 1)
+                    throw error;
+                await this.page.reload();
+                attempts++;
+            }
+        }
+    }
+    // Two independent paths put a connector template into the popup's queryable
+    // DOM slice, and neither is reliable alone: selecting the "Reusable assets"
+    // tab renders the template entries directly, while searching flattens the
+    // result list. Probe the option after each step and stop at the first one
+    // that worked, then keep re-issuing the filter while the popup stays open:
+    // the project's connector-template list is fetched asynchronously, so a
+    // filter typed before it lands renders "0 results found" and a single typed
+    // filter never picks the template up afterwards.
+    // Use pressSequentially (not fill): the popup syncs its search state from a
+    // keyup listener only, and fill() dispatches just an input event, so the
+    // filter never applies and the unfiltered BPMN tab keeps rendering.
+    async revealChangeElementTemplate(option, searchTerm) {
+        if (await this.isVisibleWithin(option, 5000)) {
+            return true;
+        }
+        // The tab strip's container class changed across Hub builds; probe the
+        // "Reusable assets" tab itself instead of its wrapper.
+        if (await this.isVisibleWithin(this.reusableAssetsTab, 5000)) {
+            // A failed tab click leaves the search path intact, so do not throw.
+            await this.reusableAssetsTab.click({ timeout: 30000 }).catch(() => { });
+            if (await this.isVisibleWithin(option, 15000)) {
+                return true;
+            }
+        }
+        if (!(await this.isVisibleWithin(this.changeElementSearchInput, 5000))) {
+            return false;
+        }
+        const deadline = Date.now() + 90000;
+        do {
+            await this.changeElementSearchInput.click();
+            await this.changeElementSearchInput.fill('');
+            await this.changeElementSearchInput.pressSequentially(searchTerm, {
+                delay: 50,
+            });
+            if (await this.isVisibleWithin(option, 15000)) {
+                return true;
+            }
+        } while (Date.now() < deadline);
+        return false;
+    }
+    async isVisibleWithin(locator, timeout) {
+        return locator
+            .waitFor({ state: 'visible', timeout })
+            .then(() => true)
+            .catch(() => false);
+    }
+    // The specs reach the Marketplace through this popup's own empty-state link,
+    // and the import modal closes the popup behind it, so the popup is routinely
+    // gone by the time a template is clicked. Reopen it against the element being
+    // replaced first: filtering a closed popup finds no search input and the
+    // option assertion then times out against a popup that was never on screen.
+    async openChangeElementPopup(element) {
+        if (await this.isVisibleWithin(this.changeElementSearchInput, 5000)) {
+            return;
+        }
+        // The context pad only renders for a selected element, so "Change element"
+        // would otherwise never appear. Select with a plain (non-force) click: the
+        // hover/selection that mounts a stable context pad only fires on a real
+        // click, and a forced click skips it so the "Change element" entry never
+        // settles and the click below times out. Reuse clickChangeTypeButton for the
+        // open itself -- its 180s wait plus reload/re-select recovery is the proven
+        // path the first change-element click in each flow already uses, whereas a
+        // bare 30s force-click here has no recovery and loses the reopen race on a
+        // freshly installed cluster.
+        await (0, test_1.expect)(element).toBeVisible({ timeout: 60000 });
+        await element.click({ timeout: 30000 });
+        await this.clickChangeTypeButton();
+    }
+    async clickChangeElementTemplateOption(option, element, searchTerm) {
+        const maxRetries = 3;
+        let lastError;
+        for (let retries = 0; retries < maxRetries; retries++) {
+            try {
+                if (retries > 0) {
+                    await this.page.reload();
+                    // domcontentloaded is more reliable than networkidle for Modeler,
+                    // which maintains persistent background connections (SSE/WebSocket).
+                    await this.page.waitForLoadState('domcontentloaded');
+                }
+                await this.openChangeElementPopup(element);
+                if (!(await this.revealChangeElementTemplate(option, searchTerm))) {
+                    throw new Error('The connector template never appeared in the change-element popup.');
+                }
+                await option.click({ timeout: 30000 });
+                return;
+            }
+            catch (error) {
+                lastError = error;
+                console.error(`Click attempt ${retries + 1} failed: ${error}`);
+                await (0, sleep_1.sleep)(10000);
+            }
+        }
+        throw new Error(`Failed to click the connector template after ${maxRetries} attempts: ${lastError}`);
+    }
+    async clickWebhookMessageStartEventConnectorOption() {
+        await this.clickChangeElementTemplateOption(this.webhookMessageStartEventConnectorOption, this.startEventElement, 'Webhook');
+    }
+    async clickWebhookIdInput() {
+        await this.webhookIdInput.click();
+    }
+    async clearWebhookIdInput() {
+        await this.webhookIdInput.clear();
+    }
+    async fillWebhookIdInput(webhookId) {
+        await this.webhookIdInput.fill(webhookId);
+    }
+    async hoverOnStartEvent() {
+        await this.hoverOnLocator(this.startEventElement, '.djs-context-pad');
+    }
+    async instanceStartedAssertion() {
+        await (0, test_1.expect)(this.page.getByText('Instance started!')).toBeVisible({
+            timeout: 10000,
+        });
+    }
+    async assertImplementationOption(implementationType) {
+        await this.expandImplementationOptionIfNecessary();
+        await (0, test_1.expect)(this.implementationOptions).toHaveValue(implementationType, {
+            timeout: 30000,
+        });
+    }
+    async chooseImplementationOption(implementationType) {
+        // Wait for implementation section to be attached and stable after task type change
+        await this.implementationSection.waitFor({
+            state: 'attached',
+            timeout: 10000,
+        });
+        await this.implementationSection.click({ timeout: 30000 });
+        if ((await this.implementationOptions.inputValue()) == implementationType) {
+            console.log(`${implementationType} is already selected.`);
+        }
+        else {
+            await this.implementationOptions.selectOption(implementationType);
+        }
+        await this.assertImplementationOption(implementationType);
+    }
+    async expandImplementationOptionIfNecessary() {
+        // `.bio-properties-panel-group-header empty open` is a descendant
+        // combinator over non-existent `empty`/`open` element types, so it always
+        // counted 0 and every call clicked blindly. Read the entry the caller is
+        // about to assert on instead, and click the header rather than the group
+        // container: the container re-renders while the panel rebuilds after an
+        // id/name edit and detaches mid-click.
+        if (await this.implementationOptions.isVisible().catch(() => false)) {
+            return;
+        }
+        await this.implementationSection.waitFor({
+            state: 'visible',
+            timeout: 30000,
+        });
+        await this.implementationSection
+            .locator('.bio-properties-panel-group-header')
+            .click({ timeout: 60000 });
+        await (0, test_1.expect)(this.implementationOptions).toBeVisible({ timeout: 30000 });
+    }
+    async expandAssignmentSection() {
+        // Scoped to assignmentSection already, so the group-id must not be repeated
+        // here: a self-nested selector never matches, the guard always reads
+        // "collapsed" and the click then toggles an open section shut.
+        const isExpanded = (await this.assignmentSection
+            .locator('.bio-properties-panel-group-header.open')
+            .count()) > 0;
+        if (!isExpanded) {
+            await this.assignmentSection
+                .locator('.bio-properties-panel-group-header')
+                .click({ timeout: 60000 });
+        }
+    }
+    async clickAppendElementButton() {
+        // hoverOnLocator already retries the hover; a second retry layer here only
+        // multiplied the worst-case wait.
+        await this.hoverOnLocator(this.appendPreButton);
+    }
+    // Owns the whole replace step, popup included: the append leaves the new
+    // (exclusive) gateway selected while the canvas is still panning it into
+    // view, and a forced "Change element" click issued mid-pan lands on empty
+    // canvas -- that clears the selection, closes the context pad, and the
+    // replace popup never opens, so a bare wait on the entry burns its full
+    // timeout with nothing on screen. Pin the shape by id up front so the popup
+    // can be reopened against the same element instead of a positional one.
+    async clickParallelGatewayOption() {
+        const element = await this.pinAppendedGateway();
+        const maxRetries = 3;
+        let lastError;
+        for (let attempt = 1; attempt <= maxRetries; attempt++) {
+            try {
+                if (attempt > 1) {
+                    // Drop a popup left open on a stale search filter (or on the wrong
+                    // element) so the retry reopens a fresh one for `element`.
+                    await this.page.keyboard.press('Escape');
+                }
+                await this.openReplacePopup(element, attempt > 1);
+                await this.revealReplaceEntry(this.parallelGatewayOption, 'Parallel gateway');
+                await this.parallelGatewayOption.click({ timeout: 30000 });
+                // bpmn-js closes the popup once an entry is applied, so a popup still
+                // on screen means the click was swallowed and the element was not
+                // replaced.
+                await (0, test_1.expect)(this.changeElementResults).toBeHidden({ timeout: 30000 });
+                return;
+            }
+            catch (error) {
+                lastError = error;
+                const listed = await this.changeElementResults
+                    .locator('[data-id]')
+                    .evaluateAll((entries) => entries.map((entry) => entry.getAttribute('data-id')).join(', '))
+                    .catch(() => '');
+                console.error(`Parallel gateway attempt ${attempt} failed: ${error}; popup entries: [${listed}]`);
+                await (0, sleep_1.sleep)(5000);
+            }
+        }
+        throw new Error(`Failed to replace the element with a parallel gateway after ${maxRetries} attempts: ${lastError}`);
+    }
+    // The replace popup lists the "replace-with-parallel-gateway" entry only for
+    // a gateway, so it must be opened on the gateway "Append gateway" just added.
+    // bpmn-js appends that shape last, so fall back to the last gateway when the
+    // selection is not a gateway.
+    async pinAppendedGateway() {
+        const selectedId = await this.page
+            .locator('.djs-element.selected')
+            .first()
+            .getAttribute('data-element-id', { timeout: 10000 })
+            .catch(() => null);
+        if (selectedId && selectedId.includes('Gateway')) {
+            return this.page
+                .locator(`.djs-element[data-element-id="${selectedId}"]`)
+                .first();
+        }
+        const lastGatewayId = await this.secondPlacedGateway
+            .getAttribute('data-element-id', { timeout: 30000 })
+            .catch(() => null);
+        return lastGatewayId
+            ? this.page
+                .locator(`.djs-element[data-element-id="${lastGatewayId}"]`)
+                .first()
+            : this.secondPlacedGateway;
+    }
+    // diagram-js closes the popup on `canvas.viewbox.changing`, so wait for the
+    // post-append auto-scroll to stop moving the shape before opening it.
+    async waitForShapeToSettle(element) {
+        let previous = await element.boundingBox().catch(() => null);
+        for (let check = 0; check < 20; check++) {
+            await (0, sleep_1.sleep)(250);
+            const current = await element.boundingBox().catch(() => null);
+            if (previous &&
+                current &&
+                previous.x === current.x &&
+                previous.y === current.y) {
+                return;
+            }
+            previous = current;
+        }
+    }
+    async openReplacePopup(element, force) {
+        await (0, test_1.expect)(element).toBeVisible({ timeout: 30000 });
+        await this.waitForShapeToSettle(element);
+        if (await this.isVisibleWithin(this.changeElementResults, 2000)) {
+            return;
+        }
+        // "Change element" acts on the selected element, so select the pinned
+        // gateway first: a context pad left open for another shape would open
+        // that shape's replace menu, which never lists a parallel gateway.
+        const isSelected = await element
+            .evaluate((node) => node.classList.contains('selected'))
+            .catch(() => false);
+        if (!isSelected ||
+            !(await this.isVisibleWithin(this.changeTypeButton, 5000))) {
+            await element.click({ force: true, timeout: 30000 });
+        }
+        await this.changeTypeButton.click({ timeout: 60000, force });
+        await (0, test_1.expect)(this.changeElementResults).toBeVisible({ timeout: 30000 });
+    }
+    async revealReplaceEntry(option, searchTerm) {
+        if (await this.isVisibleWithin(option, 5000)) {
+            return;
+        }
+        // The popup lists the project's deployed resources alongside the built-in
+        // replace entries, so the built-in entry can sit below the fold of the
+        // scrolling results list; the popup's own search filters it back into view.
+        if (await this.isVisibleWithin(this.changeElementSearchInput, 5000)) {
+            await this.changeElementSearchInput.click();
+            await this.changeElementSearchInput.fill('');
+            await this.changeElementSearchInput.pressSequentially(searchTerm, {
+                delay: 50,
+            });
+        }
+        await (0, test_1.expect)(option).toBeVisible({ timeout: 30000 });
+    }
+    async clickConnectToOtherElementButton() {
+        await (0, test_1.expect)(this.connectToOtherElementButton).toBeVisible({
+            timeout: 60000,
+        });
+        await this.connectToOtherElementButton.click({ timeout: 60000 });
+    }
+    async clickPriorityInput() {
+        try {
+            await this.priorityInput.click();
+        }
+        catch (error) {
+            // Re-expand through the guard rather than clicking the section header
+            // directly — a bare click toggles an already-open section shut and takes
+            // the priority entry out of the DOM for the retry below.
+            await this.expandAssignmentSection();
+            await this.priorityInput.click({ timeout: 60000 });
+        }
+    }
+    async fillPriorityInput(priority) {
+        await this.priorityInput.fill(priority, { timeout: 60000 });
+        await (0, sleep_1.sleep)(1000);
+    }
+    async clickCanvas() {
+        await this.canvas.click({ timeout: 60000 });
+    }
+    async addParallelUserTasks(numberOfTasks, taskName) {
+        try {
+            await this.clickAppendElementButton();
+        }
+        catch (error) {
+            await this.page.reload();
+            const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+            await sleep(10000);
+            await this.clickFirstPlacedElement();
+            await this.hoverOnLocator(this.appendElementButton);
+        }
+        await this.clickAppendGatewayButton();
+        await this.clickParallelGatewayOption();
+        await this.clickAppendElementButton();
+        await this.clickAppendTaskButton();
+        await this.clickChangeTypeButton();
+        await this.clickUserTaskOption();
+        await this.clickGeneralPropertiesPanel();
+        await this.clickNameInput();
+        await this.fillNameInput(taskName + '1');
+        await this.clickIdInput();
+        await this.fillIdInput(taskName + '1');
+        await this.assertImplementationOption('zeebeUserTask');
+        await this.clickAppendElementButton();
+        await this.clickAppendGatewayButton();
+        await this.clickParallelGatewayOption();
+        for (let i = 2; i <= numberOfTasks; i++) {
+            await this.clickFirstPlacedGateway();
+            await this.clickAppendElementButton();
+            await this.clickAppendTaskButton();
+            await this.clickChangeTypeButton();
+            await this.clickUserTaskOption();
+            await this.clickNameInput();
+            await this.fillNameInput(taskName + i);
+            await this.clickIdInput();
+            await this.fillIdInput(taskName + i);
+            await this.assertImplementationOption('zeebeUserTask');
+            await this.clickConnectToOtherElementButton();
+            await this.clickSecondPlacedGateway();
+            await this.clickCanvas();
+        }
+        await this.clickSecondPlacedGateway();
+    }
+    async setPriority(taskName, priority, numberOfTasks) {
+        for (let i = 1; i <= numberOfTasks; i++) {
+            const userTaskId = taskName + i;
+            const priorityUserTask = this.page.locator(`g[data-element-id="${userTaskId}"]`);
+            await priorityUserTask.click();
+            await this.expandAssignmentSection();
+            await this.clickPriorityInput();
+            await this.fillPriorityInput(priority.toString());
+            await (0, sleep_1.sleep)(5000);
+            await this.clickCanvas();
+            priority += 25;
+        }
+    }
+    async clickIntermediateBoundaryEvent() {
+        if (await this.clickCreatePadEntry('append.intermediate-event')) {
+            return;
+        }
+        await this.appendViaPopup('append-none-intermediate-throwing', ['append-events', 'append-intermediate-throw-events'], 'Intermediate throw event');
+    }
+    async clickIntermediateWebhookConnectorOption() {
+        await this.clickChangeElementTemplateOption(this.intermediateWebhookConnectorOption, this.secondElement, 'Webhook');
+    }
+    async clickCorrelationKeyProcessInput() {
+        await this.correlationKeyProcessInput.click({ timeout: 60000 });
+    }
+    async fillCorrelationKeyProcessInput(correlationKeyProcess) {
+        await this.correlationKeyProcessInput.fill(correlationKeyProcess);
+        await (0, test_1.expect)(this.page.getByText('Correlation key (process) must not be empty.')).not.toBeVisible({ timeout: 30000 });
+    }
+    async clickCorrelationKeyPayloadInput() {
+        await this.correlationKeyPayloadInput.click({ timeout: 60000 });
+    }
+    async fillCorrelationKeyPayloadInput(correlationKeyPayload) {
+        await this.correlationKeyPayloadInput.fill(correlationKeyPayload);
+        await (0, test_1.expect)(this.page.getByText('Correlation key (payload) must not be empty.')).not.toBeVisible({ timeout: 30000 });
+    }
+    async selectUserTask(userTask) {
+        await this.page.locator(`[data-element-id="${userTask}"]`).click();
+    }
+    async clickCandidateUsersInput() {
+        await this.candidateUsersInput.click({ timeout: 60000 });
+    }
+    async fillCandidateUsersInput(candidateUser) {
+        await this.candidateUsersInput.fill(candidateUser, { timeout: 60000 });
+        await this.page.waitForTimeout(1000);
+    }
+    async clickCandidateGroupsInput() {
+        await this.candidateGroupsInput.click({ timeout: 60000 });
+    }
+    async fillCandidateGroupsInput(candidateGroup) {
+        await this.candidateGroupsInput.fill(candidateGroup, { timeout: 60000 });
+        await (0, sleep_1.sleep)(1000);
+    }
+    async clickAssigneeInput() {
+        await this.assigneeInput.click({ timeout: 60000 });
+    }
+    async fillAssigneeInput(name) {
+        await this.assigneeInput.fill(name, { timeout: 60000 });
+        await this.page.waitForTimeout(1000);
+    }
+    async clickTenantIdInput() {
+        await (0, test_1.expect)(this.tenantIdInput).toBeVisible({ timeout: 60000 });
+        await this.tenantIdInput.click({ timeout: 60000 });
+    }
+    async fillTenantIdInput(tenant) {
+        await this.tenantIdInput.fill(tenant, { timeout: 60000 });
+        await (0, sleep_1.sleep)(1000);
+    }
+    async clickTimerEventOption() {
+        // The change-element popup renders its results list asynchronously, so wait
+        // past the 10s default action timeout before clicking.
+        await (0, test_1.expect)(this.timerEventOption).toBeVisible({ timeout: 60000 });
+        await this.timerEventOption.click({ timeout: 30000 });
+    }
+    async clickTimerEventSettings() {
+        await this.timerEventSettings.click();
+    }
+    async selectTimerType(type) {
+        await this.timerType.selectOption(type);
+        await (0, test_1.expect)(this.page.getByText('Type must be defined.')).not.toBeVisible({
+            timeout: 30000,
+        });
+    }
+    async clickTimerValue() {
+        await this.timerValue.click();
+    }
+    async fillTimerValue(value) {
+        await this.timerValue.fill(value);
+        await (0, test_1.expect)(this.page.getByText('Value must be defined.')).not.toBeVisible({ timeout: 30000 });
+        await (0, sleep_1.sleep)(10000);
+    }
+    async clickEighthPlacedElement() {
+        await this.eighthPlacedElement.click();
+    }
+    async assertNameInput(processName) {
+        try {
+            await (0, test_1.expect)(this.nameInput).toHaveValue(processName, { timeout: 2000 });
+        }
+        catch {
+            await this.nameInput.click();
+            await this.nameInput.fill(processName);
+            await (0, test_1.expect)(this.nameInput).toHaveValue(processName);
+        }
+    }
+    async switchToImplementTab() {
+        await this.implementTab.click({ timeout: 30000 });
+    }
+    async clickStartEvent() {
+        await this.startEventElement.click({ timeout: 30000 });
+    }
+    async clickContinueToPlay() {
+        await this.continueToPlayButton.click({ timeout: 30000 });
+    }
+    async assertScenarioNameVisible(scenarioName) {
+        await (0, test_1.expect)(this.page
+            .getByTestId('instance-header')
+            .getByText(scenarioName)
+            .or(this.page
+            .getByRole('region', { name: /^(Scenarios|Test cases)$/i })
+            .getByText(scenarioName, { exact: false }))).toBeVisible();
+    }
+    async fillStartEventVariablesForDocHandling(zeebeUrl, zeebeClientId, zeebeClientSecret) {
+        console.log(`URL: ${zeebeUrl}, ClientId: ${zeebeClientId}, Secret: ${zeebeClientSecret}`);
+        (0, test_1.expect)(this.connectorsDocHandlingStartEventElement).toBeVisible({
+            timeout: 60000,
+        });
+        await this.connectorsDocHandlingStartEventElement.click();
+        (0, test_1.expect)(this.startEventVariableInputWithThreeVariables).toBeVisible({
+            timeout: 60000,
+        });
+        await this.startEventVariableInputWithThreeVariables.click();
+        await this.fillZeebeRestValue(zeebeUrl);
+        await this.fillZeebeSecretValue(zeebeClientSecret);
+        await this.fillZeebeClientId(zeebeClientId);
+        await (0, sleep_1.sleep)(1000);
+    }
+    async fillZeebeClientId(clientId) {
+        await this.zeebeClientIdVariable.click();
+        await (0, test_1.expect)(this.variableAssignmentValueTextboxThirdVariable).toBeVisible({
+            timeout: 60000,
+        });
+        await this.variableAssignmentValueTextboxThirdVariable.click();
+        await (0, sleep_1.sleep)(1000);
+        await this.variableAssignmentValueTextboxThirdVariable.fill('');
+        await this.variableAssignmentValueTextboxThirdVariable.fill(clientId);
+        await (0, test_1.expect)(this.variableAssignmentValueTextboxThirdVariable).toHaveText(clientId);
+    }
+    async fillZeebeSecretValue(zeebeSecret) {
+        await this.zeebeSecretVariable.click();
+        await (0, test_1.expect)(this.variableAssignmentValueTextboxSecondVariable).toBeVisible({
+            timeout: 60000,
+        });
+        await this.variableAssignmentValueTextboxSecondVariable.click();
+        await (0, sleep_1.sleep)(1000);
+        await this.variableAssignmentValueTextboxSecondVariable.fill('');
+        await this.variableAssignmentValueTextboxSecondVariable.fill(zeebeSecret);
+        await (0, test_1.expect)(this.variableAssignmentValueTextboxSecondVariable).toHaveText(zeebeSecret);
+    }
+    async fillZeebeRestValue(zeebeUrl) {
+        await this.zeebeRestAddressVariable.click();
+        await (0, test_1.expect)(this.variableAssignmentValueTextbox).toBeVisible({
+            timeout: 60000,
+        });
+        await this.variableAssignmentValueTextbox.click();
+        await (0, sleep_1.sleep)(1000);
+        await this.variableAssignmentValueTextbox.fill('');
+        await this.variableAssignmentValueTextbox.fill(zeebeUrl);
+        await (0, test_1.expect)(this.variableAssignmentValueTextbox).toHaveText(zeebeUrl);
+    }
+    async embedForm(formName) {
+        await this.clickEmbedFormButton();
+        await this.clickForm(formName);
+        await this.clickEmbedButton();
+    }
+    async clickFirstPlaceRESTConnector() {
+        await this.firstPlaceRESTConnector.click({ timeout: 60000 });
+    }
+    async dismissCreatePad() {
+        // The append create-pad stays open for the currently selected element, so
+        // its "Append task" entry keeps intercepting the pointer event when the
+        // next task to click sits under it. Moving the pointer away does not close
+        // it (the pad is anchored to the selection, not the cursor). Clear the
+        // selection by clicking an empty area of the canvas — that detaches the
+        // pad — then wait for it to disappear before the next element click.
+        const createPad = this.page.locator('.djs-create-pad.open').first();
+        if (!(await createPad.isVisible().catch(() => false))) {
+            return;
+        }
+        const canvasBox = await this.page
+            .locator('.djs-container')
+            .first()
+            .boundingBox();
+        if (canvasBox) {
+            // A point below the element row (30% across, 65% down) is clear of both
+            // the diagram elements and the bottom zoom toolbar.
+            await this.page.mouse.click(canvasBox.x + canvasBox.width * 0.3, canvasBox.y + canvasBox.height * 0.65);
+        }
+        // Also press Escape and move the pointer off-canvas: the pad can reopen on
+        // hover so a single canvas-click is not always sufficient.
+        await this.page.keyboard.press('Escape');
+        await this.page.mouse.move(0, 0);
+        await createPad
+            .waitFor({ state: 'hidden', timeout: 10000 })
+            .catch(() => false);
+    }
+    async isAuthenticationPanelOpen() {
+        const classes = await this.authenticationPanel
+            .getAttribute('class', { timeout: 5000 })
+            .catch(() => null);
+        return (classes ?? '').split(/\s+/).includes('open');
+    }
+    // The header is a toggle, not an "open" button, and the properties panel
+    // keeps a group's expanded state across element selections — so clicking it
+    // unconditionally collapses a group that a previous element already opened.
+    // Click only while `open` is absent, then wait for it to appear.
+    //
+    // The Authentication group is contributed by the REST connector element
+    // template, so it renders only while the version the diagram pins in
+    // zeebe:modelerTemplateVersion is among the element templates Web Modeler
+    // offers this project. When it is not, the properties panel shows
+    // "Template: Not found" and the group can never appear, so report that as
+    // its own cause instead of a bare 60s click timeout.
+    async openAuthenticationPanel() {
+        for (let attempt = 1; attempt <= 3; attempt++) {
+            if (await this.isAuthenticationPanelOpen()) {
+                return;
+            }
+            try {
+                await this.authenticationPanel.click({ timeout: 60000 });
+            }
+            catch (err) {
+                const templateMissing = await this.templateNotFoundTag
+                    .isVisible()
+                    .catch(() => false);
+                if (templateMissing) {
+                    throw new Error('REST connector element template did not resolve for this element: ' +
+                        'the properties panel shows "Template: Not found", so its ' +
+                        'Authentication group never renders. The zeebe:modelerTemplateVersion ' +
+                        'pinned in the uploaded fixture is no longer one of the element ' +
+                        'template versions this Web Modeler offers — re-pin the fixture to ' +
+                        'the offered version.');
+                }
+                throw err;
+            }
+            await (0, test_1.expect)(this.authenticationPanel)
+                .toHaveClass(/(?:^|\s)open(?:\s|$)/, { timeout: 10000 })
+                .catch(() => false);
+        }
+    }
+    async setOAuthTokenEndpoint(elementToClick, endpoint, options) {
+        const retries = options?.retries ?? 2;
+        const settleMs = options?.settleMs ?? 250;
+        const openPanel = options?.openPanel ?? false;
+        // The create-pad can reappear when Playwright hovers the target to click
+        // it, so dismiss it and retry rather than relying on a single dismissal.
+        let clickError;
+        for (let attempt = 1; attempt <= 3; attempt++) {
+            await this.dismissCreatePad();
+            try {
+                await elementToClick.click({ timeout: 20000 });
+                clickError = undefined;
+                break;
+            }
+            catch (err) {
+                clickError = err;
+            }
+        }
+        if (clickError) {
+            throw clickError;
+        }
+        if (openPanel) {
+            await this.clickOpenDetailsPanel();
+        }
+        if (options?.elementId) {
+            await this.ensureElementSelected(elementToClick, options.elementId);
+        }
+        await this.openAuthenticationPanel();
+        let lastError;
+        for (let attempt = 1; attempt <= retries; attempt++) {
+            try {
+                await (0, test_1.expect)(this.oauthTokenEndpointInput).toBeVisible({
+                    timeout: 10000,
+                });
+                await this.oauthTokenEndpointInput.click({ timeout: 10000 });
+                await this.oauthTokenEndpointInput.fill(endpoint, { timeout: 30000 });
+                return;
+            }
+            catch (err) {
+                lastError = err;
+                // The stale-selection restore can land after ensureElementSelected
+                // has already confirmed the target, detaching the field mid-fill.
+                if (options?.elementId) {
+                    await this.ensureElementSelected(elementToClick, options.elementId);
+                }
+                await this.openAuthenticationPanel();
+                await (0, sleep_1.sleep)(settleMs);
+            }
+        }
+        throw new Error(`Failed to set OAuth 2.0 token endpoint after ${retries} attempt(s). Last error: ${String(lastError)}`);
+    }
+    // After a page reload, reopening the Details panel can restore the
+    // selection from before the reload (and scroll the canvas to it), so the
+    // panel shows a different element than the one just clicked. The target may
+    // then sit under the panel, so re-select it with a DOM click that the panel
+    // cannot intercept.
+    async ensureElementSelected(element, elementId) {
+        for (let attempt = 1; attempt <= 3; attempt++) {
+            await (0, sleep_1.sleep)(1000);
+            const selectedId = await this.elemendIdInput
+                .inputValue({ timeout: 10000 })
+                .catch(() => '');
+            if (selectedId === elementId) {
+                return;
+            }
+            await element.dispatchEvent('click');
+        }
+        await (0, test_1.expect)(this.elemendIdInput).toHaveValue(elementId, {
+            timeout: 10000,
+        });
+    }
+    async clickCloseDetailsPanel() {
+        await this.closeDetailsPanel.click({ timeout: 30000 });
+    }
+    async clickOpenDetailsPanel() {
+        await this.openDetailsPanel.click({ timeout: 30000 });
+    }
+}
+exports.ModelerCreatePage = ModelerCreatePage;