@camunda/e2e-test-suite 0.0.1195 → 0.0.1197

package/dist/pages/SM-8.10/TaskPanelPage.d.ts

@@ -2,9 +2,11 @@ import { Page, Locator } from '@playwright/test';
 declare class TaskPanelPage {
     private page;
     readonly availableTasks: Locator;
-    readonly filterOptions: Locator;
+    readonly filterPanelExpandButton: Locator;
+    readonly filterPanelCollapseButton: Locator;
+    readonly filterSelectButton: Locator;
+    readonly filterControls: Locator;
     readonly tasklistBanner: Locator;
-    readonly collapseFilter: Locator;
     readonly processesPageTab: Locator;
     readonly tasksTab: Locator;
     readonly assignToMeButton: Locator;
@@ -14,8 +16,9 @@ declare class TaskPanelPage {
     constructor(page: Page);
     openTask(name: string, assignButton?: boolean): Promise<void>;
     filterBy(option: 'All open' | 'Unassigned' | 'Assigned to me' | 'Completed'): Promise<void>;
-    private expandFilterPanel;
+    private openFilterControls;
     private static appliedFilterUrl;
+    activeFilter(option: string): Locator;
     clickCollapseFilter(): Promise<void>;
     scrollToLastTask(name: string): Promise<void>;
     scrollToFirstTask(name: string): Promise<void>;

package/dist/pages/SM-8.10/TaskPanelPage.js

@@ -6,9 +6,11 @@ const constants_1 = require("../../utils/constants");
 class TaskPanelPage {
     page;
     availableTasks;
-    filterOptions;
+    filterPanelExpandButton;
+    filterPanelCollapseButton;
+    filterSelectButton;
+    filterControls;
     tasklistBanner;
-    collapseFilter;
     processesPageTab;
     tasksTab;
     assignToMeButton;
@@ -18,9 +20,36 @@ class TaskPanelPage {
     constructor(page) {
         this.page = page;
         this.availableTasks = page.getByTitle('Available tasks');
-        this.filterOptions = page
-            .locator('[aria-label="Filter controls"] li')
-            .filter({ hasText: 'Expand to show filters' });
+        // SM-8.10 is tested against two different Tasklist shells, so every filter
+        // locator below has to match either one.
+        //
+        // `stable/8.10` -- which is what the published `8.10-SNAPSHOT` images this
+        // repo's own CI deploys are built from -- still renders the Carbon
+        // `CollapsiblePanel`: a collapsed rail carrying the expand control, an
+        // expanded `<nav id="task-nav-bar">` listing each filter as a `<Link>`,
+        // and an `<h1>` naming the active filter.
+        // camunda/camunda `main` is 8.11.0-SNAPSHOT and has replaced that with the
+        // Design System `FilterSelect`: one always-visible trigger (accessible name
+        // "Filters") opening a menu of `menuitem`s, no expand/collapse control and
+        // no `<h1>`. The monorepo's helm e2e deploys an image built from that
+        // commit, so it is the shell seen there.
+        // Matching only one shell is what made this pair of surfaces trade
+        // failures: targeting the Carbon rail found no expand control on the
+        // monorepo run, and targeting the dropdown found no "Filters" button at
+        // all here (`<element(s) not found>`).
+        this.filterPanelExpandButton = page.locator('button[aria-controls="task-nav-bar"][aria-expanded="false"]');
+        this.filterPanelCollapseButton = page.locator('button[aria-controls="task-nav-bar"][aria-expanded="true"]');
+        this.filterSelectButton = page.getByRole('button', {
+            name: 'Filters',
+            exact: true,
+        });
+        // "the task panel's filter control is on screen", whichever shell renders
+        // it: the Carbon rail shows the expand control when collapsed and the
+        // collapse control when expanded, never both.
+        this.filterControls = this.filterPanelExpandButton
+            .or(this.filterPanelCollapseButton)
+            .or(this.filterSelectButton)
+            .first();
         // Same Design System header rollout NavigationPage.tasklistPageBanner
         // covers: "Tasklist" is a breadcrumb link once the Carbon shell is gone,
         // and "Camunda logo Tasklist" while it is still served.
@@ -29,7 +58,6 @@ class TaskPanelPage {
             .getByRole('link', { name: 'Tasklist', exact: true })
             .or(page.getByRole('link', { name: 'Camunda logo Tasklist' }))
             .first();
-        this.collapseFilter = page.locator('button[aria-controls="task-nav-bar"][aria-expanded="true"]');
         this.processesPageTab = page.getByRole('link', { name: 'Processes' });
         this.tasksTab = page.getByRole('link', { name: 'Tasks', exact: true });
         this.assignToMeButton = page.getByRole('button', { name: 'Assign to me' });
@@ -72,28 +100,37 @@ class TaskPanelPage {
         }
     }
     async filterBy(option) {
+        // Both shells list the options only once their control is open, so open it
+        // first and then pick from whichever of the two the deployed build renders:
+        // a `<Link>` in the Carbon panel's expanded nav, or a `role="menuitem"` in
+        // the Design System dropdown. The Carbon links are scoped to #task-nav-bar
+        // so "Completed" cannot pick up a custom filter or a task row carrying the
+        // same words. Both shells spell the default filter "All open tasks" while
+        // callers pass "All open".
+        //
         // The task list refetches every 5s behind a suspense boundary, so a poll
-        // landing on the filter click tears the floating filter panel down before
-        // the router navigates: the panel closes but the filter never changes.
-        // Nothing downstream notices, so the test fails much later on an assertion
-        // that reads the still-unfiltered list. Confirm the route actually
-        // carries the filter, and re-pick if it does not.
+        // landing on the pick can tear the control down before the router
+        // navigates: it closes but the filter never changes, and the test fails
+        // much later on an assertion that reads the still-unfiltered list. Confirm
+        // the route actually carries the filter, and re-pick if it does not.
+        const optionName = option === 'All open' ? 'All open tasks' : option;
+        const filterOption = this.page
+            .locator('#task-nav-bar')
+            .getByRole('link', { name: optionName, exact: true })
+            .or(this.page.getByRole('menuitem', { name: optionName, exact: true }));
         const maxAttempts = 3;
         let lastError;
         for (let attempt = 1; attempt <= maxAttempts; attempt++) {
             try {
-                await this.expandFilterPanel();
-                // Deliberately not `exact`: the panel spells the default filter
-                // "All open tasks" while callers pass "All open".
-                const filterLink = this.page.getByRole('link', { name: option });
-                // Only the first attempt waits out a slow first render. Later
-                // attempts re-pick from a panel that has already rendered once, so
+                // Only the first attempt waits out a slow first render; later
+                // attempts re-pick from a page that has already rendered once, so
                 // they stay short -- three attempts at the full budget would outlast
-                // the 12-minute test timeout and turn a dropped click into a timeout
+                // the 12-minute test timeout and turn a dropped pick into a timeout
                 // with no retry spent.
                 const renderTimeout = attempt === 1 ? 120000 : 15000;
-                await (0, test_1.expect)(filterLink).toBeVisible({ timeout: renderTimeout });
-                await filterLink.click({ timeout: renderTimeout });
+                await this.openFilterControls();
+                await (0, test_1.expect)(filterOption).toBeVisible({ timeout: renderTimeout });
+                await filterOption.click({ timeout: renderTimeout });
                 const applied = await this.page
                     .waitForURL(TaskPanelPage.appliedFilterUrl(option), { timeout: 15000 })
                     .then(() => true)
@@ -104,30 +141,47 @@ class TaskPanelPage {
                 lastError = new Error(`Filter "${option}" was picked but the URL never carried it`);
             }
             catch (error) {
-                // Without this catch, a thrown assertion (the expand control or the
-                // filter link never appearing) propagated straight out of filterBy()
-                // on attempt 1, so attempts 2 and 3 -- and their shorter, faster-
-                // failing budget -- could never run. maxAttempts was dead code for
-                // every failure mode except a click that landed but didn't navigate.
+                // Without this catch, a thrown assertion (the control never appearing,
+                // or the option never rendering) propagated straight out of filterBy()
+                // on attempt 1, so attempts 2 and 3 -- and their shorter,
+                // faster-failing budget -- could never run. maxAttempts was dead code.
                 lastError = error;
             }
             if (attempt < maxAttempts) {
                 console.warn(`Attempt ${attempt} did not apply the "${option}" filter. Retrying...`);
             }
+            // This attempt did not land, which leaves the Design System menu in
+            // whichever state Radix last put it. Clicking that trigger again
+            // toggles, so on a still-open menu the next attempt would *close* it and
+            // then burn its whole budget waiting for an option that is gone. Escape
+            // resets it, and is a no-op on both an already-closed menu and the
+            // Carbon panel (whose expanded state openFilterControls() probes for).
+            // It sits outside the catch so a dead page surfaces as itself rather
+            // than replacing the real failure.
+            await this.page.keyboard.press('Escape');
         }
         throw new Error(`Filter "${option}" was not applied after ${maxAttempts} attempts: ${lastError}`);
     }
-    // The filter panel renders either the collapsed rail (which carries the
+    // The Carbon panel renders either the collapsed rail (which carries the
     // expand control) or the expanded nav -- never both -- and picking a filter
-    // leaves it expanded, so a retry must not click "expand" a second time.
-    async expandFilterPanel() {
-        const alreadyExpanded = await this.collapseFilter
+    // leaves it expanded, so a retry must not click "expand" a second time. The
+    // Design System dropdown has the opposite need: it closes on select, so it
+    // has to be re-opened every attempt. Probing for the Carbon collapse control
+    // first tells the two apart without branching on a version flag.
+    async openFilterControls() {
+        const alreadyExpanded = await this.filterPanelCollapseButton
             .waitFor({ state: 'visible', timeout: 2000 })
             .then(() => true)
             .catch(() => false);
-        if (!alreadyExpanded) {
-            await this.filterOptions.click({ timeout: 45000 });
+        if (alreadyExpanded) {
+            return;
         }
+        // click() auto-waits for the control, so this budget doubles as the wait
+        // for a slow first render of whichever shell is served.
+        await this.filterPanelExpandButton
+            .or(this.filterSelectButton)
+            .first()
+            .click({ timeout: 60000 });
     }
     // Tasklist keeps the active filter in the `filter` search param. "All open"
     // is the route's default and is stripped from the URL, so it is asserted as
@@ -144,8 +198,28 @@ class TaskPanelPage {
             ? /\/tasklist(?:\/[^?]*)?(?:\?(?!.*\bfilter=).*)?$/
             : new RegExp(`[?&]filter=${param}(?:&|$)`);
     }
+    // Where each shell shows which filter is currently applied: the Carbon
+    // panel renders an `<h1>` naming it, while the Design System dropdown has no
+    // heading and instead carries the label on the trigger itself.
+    activeFilter(option) {
+        return this.page
+            .getByRole('heading', { name: option })
+            .or(this.filterSelectButton.getByText(option, { exact: true }))
+            .first();
+    }
+    // Picking a filter leaves the Carbon panel expanded, and it floats over the
+    // task list -- callers that go straight to a task row would be clicking
+    // through the overlay. The Design System dropdown closes itself on select
+    // and has no collapse control at all, so this probes rather than clicking
+    // unconditionally: on that shell it is a no-op the callers can keep calling.
     async clickCollapseFilter() {
-        await this.collapseFilter.click({ timeout: 45000 });
+        const expanded = await this.filterPanelCollapseButton
+            .waitFor({ state: 'visible', timeout: 2000 })
+            .then(() => true)
+            .catch(() => false);
+        if (expanded) {
+            await this.filterPanelCollapseButton.click({ timeout: 45000 });
+        }
     }
     async scrollToLastTask(name) {
         await this.page.getByText(name).last().scrollIntoViewIfNeeded();

package/dist/tests/SM-8.10/hto-user-flows.spec.js

@@ -84,7 +84,7 @@ SM_8_10_1.test.describe('HTO User Flow Tests', () => {
             await (0, UtilitiesPage_1.completeTaskWithRetry)(page, taskPanelPage, taskDetailsPage, `${taskName}1`, 'low');
             await taskPanelPage.filterBy('Completed');
             await taskPanelPage.clickCollapseFilter();
-            await (0, test_1.expect)(page.getByRole('heading', { name: 'completed' })).toBeVisible({
+            await (0, test_1.expect)(taskPanelPage.activeFilter('Completed')).toBeVisible({
                 timeout: 45000,
             });
             await page.reload();

package/dist/tests/SM-8.10/migration-path-user-flows.spec.js

@@ -50,7 +50,7 @@ if (process.env.IS_MIGRATION === 'true') {
                 await navigationPage.goToTasklist();
                 await taskPanelPage.filterBy('Completed');
                 await taskPanelPage.clickCollapseFilter();
-                await (0, test_1.expect)(page.getByRole('heading', { name: 'completed' })).toBeVisible({
+                await (0, test_1.expect)(taskPanelPage.activeFilter('Completed')).toBeVisible({
                     timeout: 45000,
                 });
                 await (0, test_1.expect)(page.getByText(processName).first()).toBeVisible({

package/dist/tests/SM-8.10/rba-enabled-user-flows.spec.js

@@ -691,14 +691,14 @@ if (node_process_1.default.env.IS_RBA === 'true') {
                 const secondProcessTaskCount = await taskPanelPage.taskCount(`${processName}2`);
                 await taskPanelPage.clickProcessesTab();
                 await taskProcessesPage.startProcess(`${processName}1`);
-                await (0, test_1.expect)(taskPanelPage.filterOptions).toBeVisible({
+                await (0, test_1.expect)(taskPanelPage.filterControls).toBeVisible({
                     timeout: 120000,
                 });
                 const updatedFirstProcessTaskCount = await taskPanelPage.taskCount(`${processName}1`);
                 (0, test_1.expect)(updatedFirstProcessTaskCount).toBe(firstProcessTaskCount + 1);
                 await taskPanelPage.clickProcessesTab();
                 await taskProcessesPage.startProcess(`${processName}2`);
-                await (0, test_1.expect)(taskPanelPage.filterOptions).toBeVisible({
+                await (0, test_1.expect)(taskPanelPage.filterControls).toBeVisible({
                     timeout: 120000,
                 });
                 const updatedSecondProcessTaskCount = await taskPanelPage.taskCount(`${processName}2`);

package/package.json

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