@camunda/e2e-test-suite 0.0.1275 → 0.0.1277

package/dist/pages/8.8/ClusterDetailsPage.js

@@ -28,8 +28,13 @@ class ClusterDetailsPage {
     clientCredentialsDialog;
     clustersLink;
     alertsTab;
+    alertsPanel;
     activeTabPanel;
     alertsList;
+    alertExpandRowButtons;
+    alertRowActionsButtons;
+    deleteAlertMenuItem;
+    deleteAlertConfirmButton;
     createFirstAlertButton;
     createNewAlertButton;
     emailRadioButton;
@@ -43,6 +48,7 @@ class ClusterDetailsPage {
     expandButton;
     rbaEnabledMessage;
     authorizationsHeading;
+    authorizationsSwitch;
     orchestrationClusterCheckbox;
     clientCredentialsLink;
     clientRow;
@@ -123,12 +129,39 @@ class ClusterDetailsPage {
         this.alertsList = this.activeTabPanel
             .getByRole('row')
             .filter({ hasNotText: 'Delivery method' }); //Filter out header row
+        // Hub's Alerts tab is a design-system data table: one summary row per
+        // alert, its detail fields in a sibling expansion row that only exists
+        // once the row's "Expand row" toggle is clicked, and Delete behind the
+        // row's "Row actions" kebab -> "Delete" -> "Delete alert" dialog. A
+        // nightly trace's DOM carries aria-label="Row actions" and no row-level
+        // "Delete" button at all, which is why doDelete() below saw "no items"
+        // and silently deleted nothing. Same shape as pages/8.9, scoped to the
+        // visible tab panel.
+        this.alertExpandRowButtons = this.activeTabPanel.getByRole('button', {
+            name: 'Expand row',
+            exact: true,
+        });
+        this.alertRowActionsButtons = this.activeTabPanel.getByRole('button', {
+            name: 'Row actions',
+            exact: true,
+        });
+        this.deleteAlertMenuItem = page.getByRole('menuitem', {
+            name: 'Delete',
+            exact: true,
+        });
+        this.deleteAlertConfirmButton = page
+            .getByRole('dialog', { name: 'Delete alert' })
+            .getByRole('button', { name: 'Delete', exact: true });
         this.createFirstAlertButton = page.getByRole('button', {
             name: 'Create an alert',
         });
         this.createNewAlertButton = page.getByRole('button', {
             name: 'Create new alert',
         });
+        // The Alerts panel offers "Create an alert" while empty and "Create new
+        // alert" once it holds one, so either proves the panel itself mounted.
+        // Ported from pages/8.9.
+        this.alertsPanel = this.createFirstAlertButton.or(this.createNewAlertButton);
         this.emailRadioButton = page.getByRole('radio', {
             name: 'Email',
         });
@@ -155,6 +188,14 @@ class ClusterDetailsPage {
         });
         this.expandButton = page.locator('button[class="cds--table-expand__button"]');
         this.rbaEnabledMessage = page.getByText('Authorizations enabled');
+        // Hub's design-system Settings tab renders this as
+        // <button role="switch" data-slot="switch" aria-label="Switch Enable
+        // authorizations" aria-checked="true|false">, confirmed from a live
+        // trace. The Carbon `.cds--toggle__*` nodes the old code indexed into do
+        // not exist there at all.
+        this.authorizationsSwitch = this.page.getByRole('switch', {
+            name: /Enable authorizations/i,
+        });
         this.authorizationsHeading = this.page.getByRole('heading', {
             name: 'Authorizations',
         });
@@ -280,9 +321,34 @@ class ClusterDetailsPage {
             },
         });
     }
+    // Drives the design-system Authorizations switch. Returns false when this
+    // shell does not render one, so the caller can fall through to the legacy
+    // Carbon toggle.
+    async setAuthorizationsViaSwitch(enabled) {
+        if (!(await this.authorizationsSwitch.isVisible().catch(() => false))) {
+            return false;
+        }
+        const isOn = (await this.authorizationsSwitch.getAttribute('aria-checked')) === 'true';
+        if (isOn === enabled) {
+            return true;
+        }
+        await this.authorizationsSwitch.click({ timeout: 30000 });
+        if (await this.dialog.isVisible({ timeout: 15000 }).catch(() => false)) {
+            const confirm = enabled ? this.rbaEnableButton : this.rbaDisableButton;
+            if (await confirm.isVisible().catch(() => false)) {
+                await confirm.click({ timeout: 30000 });
+            }
+            await (0, test_1.expect)(this.page.getByText(enabled ? 'Enabling...' : 'Disabling...')).not.toBeVisible({ timeout: 60000 });
+        }
+        await (0, test_1.expect)(this.authorizationsSwitch).toHaveAttribute('aria-checked', String(enabled), { timeout: 120000 });
+        return true;
+    }
     async enableAuthorizations() {
         await (0, sleep_1.sleep)(5000);
         await this.waitForAuthorizationsSection();
+        if (await this.setAuthorizationsViaSwitch(true)) {
+            return;
+        }
         // Locate all elements with class .cds--toggle__text
         const toggleTextElements = await this.page.$$('.cds--toggle__text');
         // Check if toggleTextElements has at least 2 elements
@@ -316,11 +382,22 @@ class ClusterDetailsPage {
             }
         }
         else {
-            console.log('Toggle text elements not found or less than 2.');
+            // Previously a console.log that returned as though the work were done.
+            // Under Hub neither `.cds--toggle__text` nor `.cds--toggle__switch`
+            // exists, so this branch was taken on every run: authorizations were
+            // never enabled, the cluster kept its "Authorizations disabled" badge,
+            // and nothing downstream noticed until a permission assertion failed
+            // somewhere far away.
+            throw new Error('Could not enable authorizations: the Settings tab rendered neither ' +
+                'the design-system "Enable authorizations" switch nor a Carbon ' +
+                'toggle pair.');
         }
     }
     async disableAuthorizations() {
         await this.waitForAuthorizationsSection();
+        if (await this.setAuthorizationsViaSwitch(false)) {
+            return;
+        }
         // Locate all elements with class .cds--toggle__text
         const toggleTextElements = await this.page.$$('.cds--toggle__text');
         // Check if toggleTextElements has at least 2 elements
@@ -354,7 +431,11 @@ class ClusterDetailsPage {
             }
         }
         else {
-            console.log('Toggle text elements not found or less than 2.');
+            // Same silent no-op as enableAuthorizations had: under Hub no Carbon
+            // toggle exists, so this returned as though it had disabled them.
+            throw new Error('Could not disable authorizations: the Settings tab rendered neither ' +
+                'the design-system "Enable authorizations" switch nor a Carbon ' +
+                'toggle pair.');
         }
     }
     async searchAndClickClientCredentialsLink(name) {
@@ -448,7 +529,65 @@ class ClusterDetailsPage {
         });
     }
     async deleteAlerts() {
-        await this.doDelete(this.dialog, 'Alerts');
+        const hasRowActions = await this.alertRowActionsButtons
+            .first()
+            .waitFor({ state: 'visible', timeout: 10000 })
+            .then(() => true)
+            .catch(() => false);
+        if (!hasRowActions) {
+            await this.doDelete(this.dialog, 'Alerts');
+            return;
+        }
+        let remaining = await this.alertRowActionsButtons.count();
+        while (remaining > 0) {
+            // A re-render can detach the menu between opening it and the click, so
+            // open-menu-and-choose-Delete is retried as one unit.
+            await (0, test_1.expect)(async () => {
+                await this.alertRowActionsButtons.first().click({ timeout: 10000 });
+                await this.deleteAlertMenuItem.click({ timeout: 10000 });
+                await (0, test_1.expect)(this.deleteAlertConfirmButton).toBeVisible({
+                    timeout: 10000,
+                });
+            }).toPass({ timeout: 60000 });
+            await this.deleteAlertConfirmButton.click({ timeout: 30000 });
+            await (0, test_1.expect)(this.alertRowActionsButtons).toHaveCount(remaining - 1, {
+                timeout: 60000,
+            });
+            remaining = await this.alertRowActionsButtons.count();
+        }
+    }
+    // Reveals each alert's detail row, where the design-system table keeps the
+    // recipient, creation date and trigger count the callers assert on. A no-op
+    // on the legacy table, whose detail rows are always rendered.
+    // Re-selects the Alerts tab when it is no longer the showing one. A
+    // page.reload() drops the tab selection and the cluster page comes back on
+    // Overview, whose Environments table supplies the very first row -- which
+    // is how `alertsList.nth(0)` came to read "NameAlert Flow Cluster" instead
+    // of "Email" (console-user-flows.spec.ts reloads and then reads the list
+    // straight away). `alertsList` is scoped to whichever tabpanel is visible,
+    // so restoring the tab is what makes those reads address the alerts table.
+    async ensureAlertsTabSelected() {
+        const selected = await this.alertsTab
+            .getAttribute('aria-selected')
+            .catch(() => null);
+        if (selected === 'true') {
+            return;
+        }
+        await this.clickAlertsTab();
+    }
+    async expandAlerts() {
+        await this.ensureAlertsTabSelected();
+        for (let i = 0; i < 10; i++) {
+            const toggle = this.alertExpandRowButtons.first();
+            if (!(await toggle.isVisible().catch(() => false))) {
+                return;
+            }
+            const before = await this.alertExpandRowButtons.count();
+            await toggle.click({ timeout: 10000 });
+            await (0, test_1.expect)(this.alertExpandRowButtons).toHaveCount(before - 1, {
+                timeout: 10000,
+            });
+        }
     }
     // The confirmation modal only closes once the DELETE request resolves. When
     // that call fails the modal stays open on an inline "We're having trouble
@@ -701,6 +840,18 @@ class ClusterDetailsPage {
                     console.warn(`Attempt ${attempt + 1} failed for asserting ${text}. Retrying...`);
                     await this.page.reload();
                     await (0, sleep_1.sleep)(20000);
+                    // A reload drops the tab selection, so the Alerts panel is no
+                    // longer the visible one -- `alertsList` is scoped to whichever
+                    // tabpanel is showing, which after a reload is Overview, whose
+                    // first non-header row is the cluster-details "Name" row. That is
+                    // exactly what the nightly reported: `Received string:
+                    // "NameAlert Flow Cluster"`, nine times over, while the Email alert
+                    // sat unread on a tab nobody had re-opened. Re-select the tab, wait
+                    // for the panel to mount, and re-expand the detail rows the
+                    // assertions read from.
+                    await this.alertsTab.click({ timeout: 60000 });
+                    await (0, test_1.expect)(this.alertsPanel).toBeVisible({ timeout: 60000 });
+                    await this.expandAlerts();
                 }
                 else {
                     throw new Error(`Assertion failed after ${maxRetries} attempts`);

package/dist/pages/8.8/ClusterPage.d.ts

@@ -47,6 +47,7 @@ declare class ClusterPage {
     private extractClusterIdFromUrl;
     private logClusterCreationInfo;
     createCluster(name: string, region?: string, tasklistV1Api?: boolean): Promise<void>;
+    clickProviderOption(region: string): Promise<void>;
     selectSubRegion(region: string): Promise<void>;
     determineTasklistAPI(tasklistV1Api?: boolean): Promise<void>;
     clickClusterType(): Promise<void>;

package/dist/pages/8.8/ClusterPage.js

@@ -82,28 +82,32 @@ class ClusterPage {
         });
         this.clusterVersionOption = page.getByText(`${process.env.CLUSTER_VERSION}`, { exact: true });
         this.generationSearchInput = page.getByPlaceholder('Search generations');
-        this.g3DevClusterType = page.locator('label').filter({
-            hasText: this.defaultClusterType,
-        });
-        this.londonRegion = page.locator('label').filter({
-            hasText: 'London, Europe (europe-west2)',
-        });
-        this.ohioRegion = page.locator('label').filter({
+        // Camunda Hub's create-cluster form replaced the Carbon tiles (a <label>
+        // per option) and tabs with design-system choice cards and toggle groups,
+        // all exposed as role="radio" named by their title. Each locator below
+        // accepts either shape via this helper. Ported from
+        // pages/8.10/ClusterPage.ts (#3730), where the same change was made.
+        const choice = (legacy, name) => legacy.or(page.getByRole('radio', { name, exact: true }));
+        this.g3DevClusterType = choice(page.locator('label').filter({ hasText: this.defaultClusterType }), this.defaultClusterType);
+        this.londonRegion = choice(page.locator('label').filter({ hasText: 'London, Europe (europe-west2)' }), 'London, Europe (europe-west2)');
+        this.ohioRegion = choice(page.locator('label').filter({
             hasText: 'Ohio, North America (us-east-2)',
-        });
-        this.belgiumRegion = page.locator('label').filter({
+        }), 'Ohio, North America (us-east-2)');
+        this.belgiumRegion = choice(page.locator('label').filter({
             hasText: 'Chaos, Belgium, Europe (europe-west1)',
-        });
-        this.finlandRegion = page.locator('label').filter({
+        }), 'Chaos, Belgium, Europe (europe-west1)');
+        this.finlandRegion = choice(page.locator('label').filter({
             hasText: 'Finland, Europe (europe-north1)',
-        });
-        this.alphaTab = page.getByRole('tab', { name: 'Alpha' });
-        this.devTab = page.getByRole('tab', { name: 'Internal Dev' });
-        this.stableTab = page.getByRole('tab', { name: 'Stable' });
-        this.qaGenerationsTab = page.getByRole('tab', { name: 'QA Generations' });
-        this.gcpRegion = page.getByRole('tab', {
-            name: 'GCP',
-        });
+        }), 'Finland, Europe (europe-north1)');
+        this.alphaTab = choice(page.getByRole('tab', { name: 'Alpha' }), 'Alpha');
+        this.devTab = choice(page.getByRole('tab', { name: 'Internal Dev' }), 'Internal Dev');
+        this.stableTab = choice(page.getByRole('tab', { name: 'Stable' }), 'Stable');
+        this.qaGenerationsTab = choice(page.getByRole('tab', { name: 'QA Generations' }), 'QA Generations');
+        // The cloud-provider picker is a design-system toggle group, not tabs:
+        // a nightly trace's DOM has
+        // <button role="radio" aria-checked="true" data-slot="toggle-group-item">GCP</button>
+        // inside a role="radiogroup", and no role="tab" anywhere on the form.
+        this.gcpRegion = choice(page.getByRole('tab', { name: 'GCP' }), 'GCP');
         this.clustersList = page
             .getByRole('row')
             .filter({ hasNotText: 'Generation' }); //Filter out header row
@@ -224,6 +228,15 @@ class ClusterPage {
             visibilityTimeout: 20000,
             totalTimeout: 80000,
             postAction: async () => {
+                // The clusters route intermittently answers with an Envoy gateway
+                // error ("upstream connect error or disconnect/reset before headers.
+                // reset reason: connection timeout"), which renders as a bare text
+                // document -- clicking the banner cannot recover that, so every
+                // remaining attempt retried against a dead page. Reload first, then
+                // fall back to the banner for the ordinary not-yet-navigated case.
+                await this.page
+                    .reload({ waitUntil: 'domcontentloaded', timeout: 30000 })
+                    .catch(() => { });
                 await this.clickClusterBanner();
             },
         });
@@ -276,7 +289,7 @@ class ClusterPage {
         await this.clickClusterNameInput();
         await this.fillClusterNameInput(name);
         await this.clickClusterType();
-        await this.page.getByRole('tab', { name: region }).click();
+        await this.clickProviderOption(region);
         await this.selectSubRegion(region);
         await this.clickClusterOption(process.env.CLUSTER_VERSION);
         await this.determineTasklistAPI(tasklistV1Api);
@@ -284,6 +297,22 @@ class ClusterPage {
         await this.logClusterCreationInfo(name);
         await this.clickClustersBreadcrumb(name);
     }
+    // Selects the cloud provider ("GCP"/"AWS"). Hub renders the picker as a
+    // toggle group of role="radio" buttons rather than tabs, and it arrives with
+    // GCP already selected -- so a `role=tab` click both targeted nothing and
+    // was unnecessary. Accept either shape and skip the click when the option is
+    // already the selected one.
+    async clickProviderOption(region) {
+        const providerOption = this.page
+            .getByRole('tab', { name: region })
+            .or(this.page.getByRole('radio', { name: region, exact: true }))
+            .first();
+        await (0, test_1.expect)(providerOption).toBeVisible({ timeout: 40000 });
+        if ((await providerOption.getAttribute('aria-checked')) === 'true') {
+            return;
+        }
+        await providerOption.click({ timeout: 30000 });
+    }
     async selectSubRegion(region) {
         if (region === 'GCP') {
             if (process.env.IS_PROD == 'true') {

package/dist/pages/8.8/ConnectorMarketplacePage.d.ts

@@ -8,7 +8,9 @@ declare class ConnectorMarketplacePage {
     readonly replaceResourceButton: Locator;
     readonly addToProjectButton: Locator;
     readonly saveAsCopyButton: Locator;
+    readonly cancelButton: Locator;
     readonly importModal: Locator;
+    readonly browseAllMarketplaceDetailsButton: Locator;
     constructor(page: Page);
     clickSearchForConnectorTextbox(): Promise<void>;
     fillSearchForConnectorTextbox(connectorName: string): Promise<void>;

package/dist/pages/8.8/ConnectorMarketplacePage.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectorMarketplacePage = void 0;
+const test_1 = require("@playwright/test");
 class ConnectorMarketplacePage {
     page;
     searchForConnectorTextbox;
@@ -10,10 +11,27 @@ class ConnectorMarketplacePage {
     replaceResourceButton;
     addToProjectButton;
     saveAsCopyButton;
+    cancelButton;
     importModal;
+    browseAllMarketplaceDetailsButton;
     constructor(page) {
         this.page = page;
-        this.searchForConnectorTextbox = page.getByPlaceholder('Search for a connector');
+        // The legacy marketplace modal, or camunda-hub's "Browse all" dialog,
+        // which lists Marketplace connectors alongside the diagram's own elements
+        // and reusable assets. Same shape as pages/8.7.
+        this.searchForConnectorTextbox = page
+            .getByPlaceholder('Search for a connector')
+            .or(page.locator('#browse-all-search'))
+            .or(page.getByRole('searchbox', {
+            name: 'Search elements and reusable assets',
+        }))
+            .first();
+        // A Browse all Marketplace card opens its review step ("Add to project")
+        // through this button; self-hosted connectors only link to setup docs.
+        this.browseAllMarketplaceDetailsButton = page
+            .getByRole('list', { name: 'Marketplace connectors' })
+            .getByRole('button', { name: /^View details for .+ from Marketplace$/ })
+            .first();
         this.downloadToProjectButton = page
             .getByRole('button', { name: 'Download to project' })
             .first();
@@ -26,6 +44,7 @@ class ConnectorMarketplacePage {
             name: 'Add to project',
         });
         this.saveAsCopyButton = page.getByRole('button', { name: 'Save as copy' });
+        this.cancelButton = page.getByRole('button', { name: 'Cancel' });
         this.importModal = page.locator('[data-test="import-modal"]');
     }
     async clickSearchForConnectorTextbox() {
@@ -47,7 +66,30 @@ class ConnectorMarketplacePage {
         await this.replaceResourceButton.click({ timeout: 60000 });
     }
     async downloadConnectorToProject() {
-        await this.clickDownloadToProjectButton();
+        // Browse all has no "Download to project": a result is a card that opens
+        // its own review step, which is where the import action lives. Wait for
+        // whichever entry point this shell renders before deciding -- isVisible()
+        // never waits, so probing it straight away raced the dialog's own render
+        // and fell through both branches.
+        await (0, test_1.expect)(this.downloadToProjectButton
+            .or(this.browseAllMarketplaceDetailsButton)
+            .first()).toBeVisible({ timeout: 60000 });
+        if (await this.downloadToProjectButton.isVisible()) {
+            await this.clickDownloadToProjectButton();
+        }
+        else {
+            await this.browseAllMarketplaceDetailsButton.click({ timeout: 30000 });
+        }
+        // The Browse all review step fetches the connector's details before it
+        // renders "Add to project". Let one of the outcomes render before the
+        // probes below, which would otherwise repeat that same race.
+        await this.addToProjectButton
+            .or(this.replaceResourceButton)
+            .or(this.saveAsCopyButton)
+            .or(this.cancelButton)
+            .first()
+            .waitFor({ state: 'visible', timeout: 60000 })
+            .catch(() => { });
         // "Download to project" opens Web Modeler's "Import resource" modal, which
         // can take ~20s to appear. The import-confirming button depends on whether
         // the connector template already exists in the project: an existing one

package/dist/pages/8.8/ConsoleOrganizationPage.js

@@ -43,20 +43,44 @@ class ConsoleOrganizationPage {
     constructor(page) {
         this.page = page;
         this.usersTab = page.getByRole('tab', { name: 'Users' });
-        this.optionsButton = page.getByRole('button', { name: 'Options' });
-        this.editUserMenuItem = page.getByRole('menuitem', { name: 'Edit User' });
-        this.modelerCheckbox = page
-            .getByRole('group')
-            .locator('label')
-            .filter({ hasText: 'Modeler' });
-        this.adminCheckbox = page
-            .getByRole('group')
-            .locator('label')
-            .filter({ hasText: 'Admin' });
-        this.analystCheckbox = page
-            .getByRole('group')
-            .locator('label')
-            .filter({ hasText: 'Analyst' });
+        // Hub's org-management Users table is a design-system data table whose
+        // per-row action affordance is a kebab named "Row actions", not Carbon's
+        // "Options" -- a nightly screenshot shows the kebab and the trace has no
+        // "Options" node at all. Scoped to the visible tab panel so another tab's
+        // rows cannot match. Same shape as pages/8.9.
+        this.optionsButton = page
+            .getByRole('button', { name: 'Options' })
+            .or(page.getByRole('tabpanel').getByRole('button', { name: 'Row actions' }))
+            .first();
+        this.editUserMenuItem = page.getByRole('menuitem', {
+            name: /^Edit user$/i,
+        });
+        // The "Edit user" dialog's role toggles are plain Carbon Checkboxes
+        // (@camunda/ccma-saas-frontend c4-user-details-page.tsx), each its own
+        // labelText-bound <input type="checkbox">, not a role="group" of
+        // <label>s -- there is no group wrapper around them at all. Scoped to
+        // whichever dialog is open rather than one named "Edit user": a modal
+        // whose heading isn't wired via aria-labelledby carries no accessible
+        // name at all, which silently zeroes out a name-matched dialog locator.
+        const openDialog = page.getByRole('dialog');
+        // Hub renamed the platform roles, and the "Edit user" dialog states each
+        // mapping in the role's own description (confirmed live against the
+        // nightly org): "Member ... Formerly the Modeler role.",
+        // "Organization Admin ... Formerly the Admin role.", "DevOps ... Formerly
+        // the Operations Engineer role."; Analyst is unchanged. There is no
+        // "Modeler" checkbox at all any more, which is why the exact-name lookup
+        // resolved to nothing.
+        //
+        // Anchored regex rather than `exact`: each checkbox's accessible name
+        // carries that description after the label, so an exact match on the bare
+        // role name would miss it.
+        const roleCheckbox = (current, legacy) => openDialog
+            .getByRole('checkbox', { name: current })
+            .or(openDialog.getByRole('checkbox', { name: legacy, exact: true }))
+            .first();
+        this.modelerCheckbox = roleCheckbox(/^Member\b/, 'Modeler');
+        this.adminCheckbox = roleCheckbox(/^Organization Admin\b/, 'Admin');
+        this.analystCheckbox = roleCheckbox(/^Analyst\b/, 'Analyst');
         this.confirmButton = page.getByRole('button', { name: 'Confirm' });
         this.settingsTab = page.getByRole('tab', { name: 'Settings' });
         this.optInButton = page.getByRole('button', { name: 'Opt-in', exact: true });
@@ -118,9 +142,16 @@ class ConsoleOrganizationPage {
             name: 'danger',
         })
             .last();
-        this.filterTableSearchbox = page.getByRole('searchbox', {
-            name: 'Filter table',
-        });
+        // Hub's org-management "Users" tab renders its table filter as a
+        // design-system <input type="search" placeholder="Search"
+        // aria-label="Search">, not Carbon's "Filter table" -- confirmed from a
+        // nightly trace's DOM snapshot, where "Filter table" occurs only inside
+        // our own call log. Keep the legacy name as a fallback. Same shape as
+        // pages/8.9.
+        this.filterTableSearchbox = page
+            .getByRole('searchbox', { name: 'Search', exact: true })
+            .or(page.getByRole('searchbox', { name: 'Filter table' }))
+            .first();
     }
     async filterTable(names) {
         for (const name of names) {
@@ -189,7 +220,21 @@ class ConsoleOrganizationPage {
         await this.optionsButton.click({ timeout: 60000 });
     }
     async clickEditUserMenuItem() {
-        await this.editUserMenuItem.click({ timeout: 60000 });
+        // Hub's row menu is a Radix dropdown that animates in and re-mounts its
+        // items while opening. A live run against the nightly org resolved this
+        // item correctly -- <div role="menuitem" data-slot="dropdown-menu-item">
+        // Edit user</div> -- and still failed the click: "element is not stable"
+        // twice, then "element was detached from the DOM, retrying" until the 60s
+        // budget ran out. A detached item means the menu itself went away, so
+        // clicking harder cannot help; re-open it and retry the pair as one unit,
+        // gated on the dialog actually opening.
+        await (0, test_1.expect)(async () => {
+            if (!(await this.editUserMenuItem.isVisible().catch(() => false))) {
+                await this.clickOptionsButton();
+            }
+            await this.editUserMenuItem.click({ timeout: 10000 });
+            await (0, test_1.expect)(this.dialog.first()).toBeVisible({ timeout: 10000 });
+        }).toPass({ timeout: 120000, intervals: [1000, 2000, 5000] });
     }
     async checkModelerCheckbox() {
         if (!(await this.modelerCheckbox.isChecked({ timeout: 60000 }))) {

package/dist/pages/8.8/FormJsPage.d.ts

@@ -3,6 +3,9 @@ declare class FormJsPage {
     private page;
     private processApplicationPage;
     readonly aiFormGeneratorButton: Locator;
+    readonly copilotCtaButton: Locator;
+    readonly copilotChatInput: Locator;
+    readonly copilotSendButton: Locator;
     readonly formRequestInput: Locator;
     readonly generateFormButton: Locator;
     readonly formEditor: Locator;
@@ -22,6 +25,7 @@ declare class FormJsPage {
     readonly deployErrorMessage: Locator;
     constructor(page: Page);
     generateAIForm(request?: string): Promise<void>;
+    private generateFormWithCopilot;
     clickAIFormGeneratorButton(): Promise<void>;
     clickFormRequestInput(): Promise<void>;
     fillFormRequestInput(formRequest: string): Promise<void>;

package/dist/pages/8.8/FormJsPage.js

@@ -11,6 +11,9 @@ class FormJsPage {
     page;
     processApplicationPage;
     aiFormGeneratorButton;
+    copilotCtaButton;
+    copilotChatInput;
+    copilotSendButton;
     formRequestInput;
     generateFormButton;
     formEditor;
@@ -34,6 +37,16 @@ class FormJsPage {
         this.aiFormGeneratorButton = page.getByRole('button', {
             name: 'AI Form Generator',
         });
+        // camunda-hub #21398 retired the form page's AI Form Generator in favour
+        // of the Camunda Copilot sidecar: with One Copilot on, the empty form
+        // offers "Try Camunda Copilot" instead (FormDs.tsx / CopilotCTA.tsx), and
+        // the sidecar's chat input and send button come from
+        // camunda-copilot-client's ChatInput. Same shape as pages/8.7.
+        this.copilotCtaButton = page.getByRole('button', {
+            name: 'Try Camunda Copilot',
+        });
+        this.copilotChatInput = page.getByPlaceholder('Type a message...');
+        this.copilotSendButton = page.getByRole('button', { name: 'Send message' });
         this.formRequestInput = page.getByPlaceholder('A form for an american standard loan request');
         this.generateFormButton = page.getByRole('button', { name: 'Generate form' });
         this.formEditor = page.getByLabel('Form Definition');
@@ -89,9 +102,13 @@ class FormJsPage {
         this.deployErrorMessage = this.dialog.getByText('The form failed to deploy');
     }
     async generateAIForm(request = 'Create a form with the following fields: 1. A text field with the label "Full Name" 2. A number with the label "Count" 3. A date input with the label "Date of birth"4. A Checkbox with the label "Agree"') {
-        await (0, test_1.expect)(this.aiFormGeneratorButton).toBeVisible({
+        await (0, test_1.expect)(this.aiFormGeneratorButton.or(this.copilotCtaButton).first()).toBeVisible({
             timeout: 90000,
         });
+        if (!(await this.aiFormGeneratorButton.isVisible())) {
+            await this.generateFormWithCopilot(request);
+            return;
+        }
         await this.clickAIFormGeneratorButton();
         await this.clickFormRequestInput();
         await this.fillFormRequestInput(request);
@@ -100,6 +117,19 @@ class FormJsPage {
         await (0, test_1.expect)(this.page.getByText('Successfully generated smart form.')).toBeVisible({ timeout: 300000 });
         await (0, sleep_1.sleep)(60000);
     }
+    async generateFormWithCopilot(request) {
+        await this.copilotCtaButton.click({ timeout: 30000 });
+        await (0, test_1.expect)(this.copilotChatInput).toBeVisible({ timeout: 60000 });
+        await this.copilotChatInput.fill(request);
+        await this.copilotSendButton.click({ timeout: 30000 });
+        // Copilot edits the open form in place; the generated form is ready once
+        // every requested field shows up on the canvas.
+        for (const label of ['Full Name', 'Count', 'Date of birth', 'Agree']) {
+            await (0, test_1.expect)(this.formEditor.getByText(label).first()).toBeVisible({
+                timeout: 300000,
+            });
+        }
+    }
     async clickAIFormGeneratorButton() {
         await this.aiFormGeneratorButton.click();
     }

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

@@ -71,6 +71,7 @@ declare class ModelerCreatePage {
     readonly publicAccessToggle: Locator;
     readonly publicationTab: Locator;
     readonly copyPublicLinkButton: Locator;
+    readonly publicLinkCodeBlock: Locator;
     readonly closeButton: Locator;
     readonly rbaEnabledDeployedDialog: Locator;
     readonly viewProcessLink: Locator;
@@ -214,9 +215,11 @@ declare class ModelerCreatePage {
     fillJobTypeInput(name: string): Promise<void>;
     private suppressTestModeAnnouncement;
     switchToPlay(): Promise<void>;
+    private selectPlayDeploySingleResource;
     completePlayConfiguration(clusterName: string): Promise<void>;
     embedForm(formName: string): Promise<void>;
     fillStartEventVariablesForDocHandling(zeebeUrl: string, zeebeClientId: string, zeebeClientSecret: string): Promise<void>;
+    private openOutputMappingEntry;
     fillZeebeClientId(clientId: string): Promise<void>;
     fillZeebeSecretValue(zeebeSecret: string): Promise<void>;
     fillZeebeRestValue(zeebeUrl: string): Promise<void>;