test: improve stability of Playwright tests

.eslintrc

@@ -217,6 +217,7 @@
         "playwright/no-commented-out-tests": "error",
         "playwright/no-focused-test": "error",
         "playwright/no-skipped-test": "warn",
+        "playwright/no-wait-for-timeout": "error",
         "no-return-await": "warn",
         "no-return-assign": "warn",
         "no-await-in-loop": "warn",
@@ -225,7 +226,8 @@
       "settings": {
         "playwright": {
           "messages": {
-            "noSkippedTest": "Test skipped. If unresolved, raise a JIRA ticket or GitHub issue, then reference it in a code comment above."
+            "noSkippedTest": "Test skipped. If unresolved, raise a JIRA ticket or GitHub issue, then reference it in a code comment above.",
+            "noWaitForTimeout": "Hardcoded timeouts make tests fragile and inefficient. Use Playwright’s built-in waits (e.g. `locator.waitFor()`) or auto-retrying assertions (e.g. `await expect(locator).toBeVisible()`) to wait for conditions like element visibility or text presence." 
           }
         }
       }

.github/workflows/playwright.yml

@@ -16,20 +16,23 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4]
-        shardTotal: [4]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
     steps:
       - uses: actions/checkout@v4
+
       - uses: actions/setup-node@v4
         with:
           node-version: ">=20.9.0 20"
+
       - name: Cache central NPM modules
         uses: actions/cache@v4
         with:
           path: ~/.npm
           key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
+
       - name: Install dependencies
         run: |
           npm ci
@@ -42,7 +45,7 @@ jobs:
         run: npm run test:ct -- --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - name: Upload blob report to Artifacts
-        if: always()
+        if: ${{ !cancelled() }}
         uses: actions/upload-artifact@v4
         with:
           name: blob-report-${{ matrix.shardIndex }}
@@ -51,7 +54,7 @@ jobs:
 
   merge-reports:
     name: "Merge reports from all shards"
-    if: always()
+    if: ${{ !cancelled() }}
     needs: [playwright-tests]
     runs-on: ubuntu-latest
     steps:

.prettierignore

@@ -1,3 +1,4 @@
 node_modules/
 coverage/
 package-lock.json
+.eslintrc

playwright-ct.config.ts

@@ -8,31 +8,27 @@ const playwrightDir = resolve(__dirname, "./playwright");
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  /** Directory with the test files. */
   testDir: resolve(__dirname, "./src/components"),
-  /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */
+
   snapshotDir: resolve(playwrightDir, "./__snapshots__"),
-  /* The output directory for files created during test execution */
+
   outputDir: resolve(playwrightDir, "./test-results"),
-  /* Maximum time one test can run for. */
+
   timeout: 30 * 1000,
-  /* Run tests in files in parallel */
+
   fullyParallel: true,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 8 : undefined,
-  // Limit the number of failures on CI to save resources
+
+  retries: 3,
+
   maxFailures: process.env.CI ? 10 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+
   reporter: process.env.CI
     ? "blob"
     : [["html", { outputFolder: resolve(playwrightDir, "./test-report") }]],
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+
   use: {
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "retain-on-failure",
-    /* Port to use for Playwright component endpoint. */
+
     ctPort: 3100,
     /* Custom config for internal bundler Playwright uses for component tests. See https://playwright.dev/docs/test-components#under-the-hood */
     ctViteConfig: {
@@ -45,7 +41,7 @@ export default defineConfig({
     },
   },
   testMatch: /.*\.pw\.tsx/,
-  /* Configure projects for major browsers */
+
   projects: [
     {
       name: "chromium",

playwright/index.tsx

@@ -6,25 +6,10 @@ import I18nProvider from "../src/components/i18n-provider/i18n-provider.componen
 import { noTheme, sageTheme } from "../src/style/themes";
 import enGB from "../src/locales/en-gb";
 import "../src/style/fonts.css";
-import * as dateLocales from "./support/date-fns-locales";
 
 export type HooksConfig = {
   validationRedesignOptIn?: boolean;
   theme?: string;
-  localeName?: keyof typeof dateLocales;
-};
-
-const computedLocale = (str: keyof typeof dateLocales) => {
-  return {
-    locale: () => str,
-    date: {
-      dateFnsLocale: () => dateLocales[str],
-      ariaLabels: {
-        previousMonthButton: () => "Previous month",
-        nextMonthButton: () => "Next month",
-      },
-    },
-  };
 };
 
 const mountedTheme = (theme: string) => {
@@ -42,7 +27,6 @@ const mountedTheme = (theme: string) => {
 beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
   const {
     theme = "sage",
-    localeName,
     validationRedesignOptIn,
   } = hooksConfig || {};
   return (
@@ -51,7 +35,7 @@ beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
       validationRedesignOptIn={validationRedesignOptIn}
     >
       <GlobalStyle />
-      <I18nProvider locale={localeName ? computedLocale(localeName) : enGB}>
+      <I18nProvider locale={enGB}>
         <App />
       </I18nProvider>
     </CarbonProvider>

playwright/support/helper.ts

@@ -3,9 +3,6 @@ import AxeBuilder from "@axe-core/playwright";
 import { expect } from "@playwright/experimental-ct-react17";
 import { label, legendSpan } from "../components/index";
 
-const OPEN_MODAL = '[data-state="open"]';
-const CLOSED_MODAL = '[data-state="closed"]';
-
 /**
  * Retrieve a computed style for an element.
  * @param locator The Playwright locator to evaluate (see: https://playwright.dev/docs/locators)
@@ -120,58 +117,6 @@ export const checkGoldenOutline = async (
   );
 };
 
-export const checkElementIsInDOM = async (page: Page, locatorStr: string) => {
-  expect(await page.$$(locatorStr)).toHaveLength(1);
-};
-
-export const checkElementIsNotInDOM = async (
-  page: Page,
-  locatorStr: string,
-) => {
-  expect(await page.$$(locatorStr)).toHaveLength(0);
-};
-
-export const checkDialogIsInDOM = async (page: Page) => {
-  await checkElementIsInDOM(page, OPEN_MODAL);
-  await checkElementIsNotInDOM(page, CLOSED_MODAL);
-};
-
-export const checkDialogIsNotInDOM = async (page: Page) => {
-  await checkElementIsNotInDOM(page, OPEN_MODAL);
-  await checkElementIsInDOM(page, CLOSED_MODAL);
-};
-
-/**
- * Asserts if an element has event was calledOnce
- * @param callbackData an array with callback data
- * @param eventName {string} event name
- * @example await expectEventWasCalledOnce(messages, "onClick");
- */
-export const expectEventWasCalledOnce = async (
-  callbackData: string[],
-  eventName: string,
-) => {
-  const count = JSON.stringify(callbackData.length);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const callbackName = JSON.stringify(callbackData[0]._reactName);
-  expect(count).toBe("1");
-  expect(callbackName).toBe(`"${eventName}"`);
-};
-
-/**
- * Asserts that event was NOT called
- * @param callbackData an array with callback data
- * @example await expectEventWasNotCalled(messages);
- */
-export const expectEventWasNotCalled = async (callbackData: string[]) => {
-  const count = JSON.stringify(callbackData.length);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  expect(count).toBe("0");
-  expect(callbackData).toEqual([]);
-};
-
 /**
  * Creates a safe regExp and uses the .toHaveClass() assertion
  * As there is not a "contains" assertion for the .toHaveClass() assertion
@@ -193,17 +138,6 @@ export const containsClass = async (
   await expect(locatorFunc).toHaveClass(classNameRegEx);
 };
 
-/**
- * Uses the .toHaveFocus() assertion with a waitFor before to
- * ensure the locator is available, and enough time has passed for the focus to be set.
- * @param locatorFunc the locator you'd like to use
- * @example await toBeFocusedDelayed(exampleLocator(page));
- */
-export const toBeFocusedDelayed = async (locatorFunc: Locator) => {
-  await locatorFunc.waitFor({ timeout: 10000 });
-  await expect(locatorFunc).toBeFocused();
-};
-
 const positions = {
   first: 0,
   second: 1,

src/components/accordion/accordion.pw.tsx

@@ -12,7 +12,6 @@
   getRotationAngle,
   assertCssValueIsApproximately,
   getStyle,
-  expectEventWasCalledOnce,
   checkAccessibility,
 } from "../../../playwright/support/helper";
 import { getDataElementByValue } from "../../../playwright/components";
@@ -44,7 +43,7 @@
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
 // TODO: Skipped due to flaky focus behaviour. To review in FE-6428
 test.skip("should have the expected styling when focused", async ({
   mount,
   page,
 }) => {
@@ -203,30 +202,6 @@
     await expect(accordionContent(page)).toBeVisible();
   });
 
-  [true, false].forEach((isExpanded) => {
-    test(`should call onChange callback when a click event is triggered and expanded is set to ${isExpanded}`, async ({
-      mount,
-      page,
-    }) => {
-      const messages: string[] = [];
-
-      await mount(
-        <AccordionComponent
-          expanded={isExpanded}
-          onChange={(data) => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            messages.push(data);
-          }}
-        />,
-      );
-
-      await accordionTitleContainer(page).click();
-
-      await expectEventWasCalledOnce(messages, "onClick");
-    });
-  });
-
   testData.forEach((titleValue) => {
     test(`should render Accordion component with ${titleValue} as a title`, async ({
       mount,

src/components/advanced-color-picker/advanced-color-picker.pw.tsx

@@ -301,83 +301,6 @@ test.describe("should render AdvancedColorPicker component and check props", ()
   });
 });
 
-test.describe("should render AdvancedColorPicker component and check events", () => {
-  test("should call onChange callback when a click event is triggered", async ({
-    mount,
-    page,
-  }) => {
-    let callbackCount = 0;
-    await mount(
-      <AdvancedColorPickerCustom
-        onChange={() => {
-          callbackCount += 1;
-        }}
-      />,
-    );
-
-    const colorToPick = simpleColorPickerInput(page, 0);
-    await colorToPick.click();
-    expect(callbackCount).toBe(1);
-  });
-
-  test("should call onOpen callback when a click event is triggered", async ({
-    mount,
-    page,
-  }) => {
-    let callbackCount = 0;
-    await mount(
-      <AdvancedColorPickerCustom
-        onOpen={() => {
-          callbackCount += 1;
-        }}
-      />,
-    );
-
-    await closeIconButton(page).click();
-    const firstCell = advancedColorPickerCell(page);
-    await firstCell.click();
-    expect(callbackCount).toBe(1);
-  });
-
-  test("should call onClose callback when a click event is triggered", async ({
-    mount,
-    page,
-  }) => {
-    let callbackCount = 0;
-    await mount(
-      <AdvancedColorPickerCustom
-        onClose={() => {
-          callbackCount += 1;
-        }}
-      />,
-    );
-
-    const closeButton = closeIconButton(page);
-    await closeButton.click();
-    expect(callbackCount).toBe(1);
-  });
-
-  test("should not call onBlur callback when a blur event is triggered on another color", async ({
-    mount,
-    page,
-  }) => {
-    let callbackCount = 0;
-    await mount(
-      <AdvancedColorPickerCustom
-        onBlur={() => {
-          callbackCount += 1;
-        }}
-      />,
-    );
-
-    const elementToFocus = simpleColorPickerInput(page, 7);
-    await elementToFocus.focus();
-    const elementToBlur = simpleColorPickerInput(page, 7);
-    await elementToBlur.blur();
-    expect(callbackCount).toBe(0);
-  });
-});
-
 test.describe("Accessibility tests for AdvancedColorPicker component", () => {
   test("should pass accessibility tests for AdvancedColorPicker default", async ({
     mount,