From c090f2dc5ebda712d14f7d1559b06338cb767375 Mon Sep 17 00:00:00 2001
From: Stephen O'Gorman <stephen.ogorman@sage.com>
Date: Fri, 13 Oct 2023 16:13:24 +0100
Subject: [PATCH] test(playwright): more flaky tests

---
 .../batch-selection/batch-selection.pw.tsx    |  27 +-
 src/components/button/button.pw.tsx           |  60 +-
 src/components/dialog/dialog.pw.tsx           | 590 +++++++++---------
 3 files changed, 336 insertions(+), 341 deletions(-)

diff --git a/src/components/batch-selection/batch-selection.pw.tsx b/src/components/batch-selection/batch-selection.pw.tsx
index 555d0685fe..04804f4e44 100644
--- a/src/components/batch-selection/batch-selection.pw.tsx
+++ b/src/components/batch-selection/batch-selection.pw.tsx
@@ -13,6 +13,7 @@ import {
   batchSelectionComponent,
   batchSelectionButtonsByPosition,
 } from "../../../playwright/components/batch-selection";
+import { getComponent } from "../../../playwright/components/index";
 import { HooksConfig } from "../../../playwright";
 
 const BATCH_SELECTION_COLOR = [
@@ -39,25 +40,25 @@ test.describe("check BatchSelection component properties", () => {
   test("should check hidden BatchSelection", async ({ mount, page }) => {
     await mount(<BatchSelectionComponent hidden />);
     const batchSelection = batchSelectionComponent(page);
-    await expect(batchSelection.getAttribute("hidden")).not.toBeNull();
-
+    await expect(batchSelection).toHaveAttribute("hidden", /.*/);
     await expect(batchSelection).toHaveCSS("opacity", "0");
   });
 
   test("should check disabled BatchSelection", async ({ mount, page }) => {
     await mount(<BatchSelectionComponent disabled />);
     const batchSelection = batchSelectionComponent(page);
-    await expect(batchSelection).toHaveAttribute("disabled", "");
+
+    await expect(batchSelection).toHaveAttribute("disabled", /.*/);
   });
 
   ([
     [BATCH_SELECTION_COLOR[0], "rgb(0, 50, 76)"],
     [BATCH_SELECTION_COLOR[1], "rgb(179, 194, 201)"],
     [BATCH_SELECTION_COLOR[2], "rgb(255, 255, 255)"],
-    [BATCH_SELECTION_COLOR[3], ""],
+    [BATCH_SELECTION_COLOR[3], "rgba(0, 0, 0, 0)"],
   ] as [BatchSelectionProps["colorTheme"], string][]).forEach(
     ([colorTheme, backgroundColor]) => {
-      test(`check BatchSelection component ${colorTheme} colorTheme and it uses ${backgroundColor} as a background color`, async ({
+      test(`check background color is ${backgroundColor} when colorTheme is ${colorTheme}`, async ({
         mount,
         page,
       }) => {
@@ -65,17 +66,11 @@ test.describe("check BatchSelection component properties", () => {
           <BatchSelectionComponent colorTheme={colorTheme} selectedCount={0} />
         );
 
-        if (colorTheme === "transparent") {
-          await expect(batchSelectionComponent(page)).not.toHaveCSS(
-            "background-color",
-            backgroundColor
-          );
-        } else {
-          await expect(batchSelectionComponent(page)).toHaveCSS(
-            "background-color",
-            backgroundColor
-          );
-        }
+        const batchSelection = getComponent(page, "batch-selection");
+        await expect(batchSelection).toHaveCSS(
+          "background-color",
+          backgroundColor
+        );
       });
     }
   );
diff --git a/src/components/button/button.pw.tsx b/src/components/button/button.pw.tsx
index 9c6ca10253..547887043f 100644
--- a/src/components/button/button.pw.tsx
+++ b/src/components/button/button.pw.tsx
@@ -7,10 +7,7 @@ import {
   buttonDataComponent,
 } from "../../../playwright/components/button/index";
 import { ICON } from "../../../playwright/components/locators";
-import {
-  checkAccessibility,
-  expectEventWasCalledOnce,
-} from "../../../playwright/support/helper";
+import { checkAccessibility } from "../../../playwright/support/helper";
 import {
   dlsRoot,
   icon,
@@ -55,8 +52,6 @@ import {
 
 const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 
-const messages: string[] = [];
-
 test.describe("Button component", () => {
   testData.forEach((label) => {
     test(`should render label using ${label} special characters`, async ({
@@ -189,83 +184,82 @@ test.describe("Check events for Button component", () => {
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onClick={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onClick={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).click();
-
-    await expectEventWasCalledOnce(messages, "onClick");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.click();
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onBlur callback when a blur event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onBlur={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onBlur={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).focus();
-    await buttonDataComponent(page).blur();
-    await expect(buttonDataComponent(page)).not.toBeFocused();
-    await expectEventWasCalledOnce(messages, "onBlur");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.focus();
+    await buttonComponent.blur();
+    await expect(buttonComponent).not.toBeFocused();
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onKeyDown callback when a keydown event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onKeyDown={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onKeyDown={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).press("Enter");
-    await expectEventWasCalledOnce(messages, "onKeyDown");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.press("Enter");
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onFocus callback when a focus event is triggered", async ({
     mount,
     page,
   }) => {
+    let callbackCount = 0;
     await mount(
       <Button
-        onFocus={(data) => {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          messages.push(data);
+        onFocus={() => {
+          callbackCount += 1;
         }}
       >
         Foo
       </Button>
     );
 
-    await buttonDataComponent(page).focus();
-    await expectEventWasCalledOnce(messages, "onFocus");
+    const buttonComponent = page.getByRole("button");
+    await buttonComponent.focus();
+    expect(callbackCount).toBe(1);
   });
 });
 
diff --git a/src/components/dialog/dialog.pw.tsx b/src/components/dialog/dialog.pw.tsx
index 2e1ae222b4..cb007a28cc 100644
--- a/src/components/dialog/dialog.pw.tsx
+++ b/src/components/dialog/dialog.pw.tsx
@@ -270,6 +270,7 @@ test.describe("Testing Dialog component properties", () => {
     const firstTextbox = page.getByLabel("Textbox1");
     const closeButton = page.getByLabel("Close");
 
+    await page.waitForTimeout(250);
     await dialog.press("Tab");
     await expect(closeButton).toBeFocused();
 
@@ -298,6 +299,7 @@ test.describe("Testing Dialog component properties", () => {
     const firstTextbox = page.getByLabel("Textbox1");
     const closeButton = page.getByLabel("Close");
 
+    await page.waitForTimeout(250);
     await dialog.press("Shift+Tab");
     await expect(thirdTextbox).toBeFocused();
 
@@ -324,6 +326,7 @@ test.describe("Testing Dialog component properties", () => {
     const textbox = page.getByLabel("Textbox");
     const closeButton = page.getByLabel("Close");
 
+    await page.waitForTimeout(250);
     await dialog.press("Tab");
     await closeButton.press("Tab");
     await textbox.press("Tab");
@@ -344,6 +347,7 @@ test.describe("Testing Dialog component properties", () => {
     const textbox = page.getByLabel("Textbox");
     const closeButton = page.getByLabel("Close");
 
+    await page.waitForTimeout(250);
     await dialog.press("Shift+Tab");
     await textbox.press("Shift+Tab");
 
@@ -352,299 +356,301 @@ test.describe("Testing Dialog component properties", () => {
       page.getByText("I should not be scrolled into view")
     ).not.toBeInViewport();
   });
+});
 
-  test.describe(
-    "when there is a button inside Dialog, which opens a Toast",
-    () => {
-      test("clicking button moves focus out of Dialog to the newly-opened Toast", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithToast />);
-
-        const openToastButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Toast" });
-        await openToastButton.click();
-
-        const toast = toastComponent(page);
-        await expect(toast).toBeFocused();
-      });
-
-      test("when Toast is opened and focus on it is lost, pressing Tab key traps focus back inside the Dialog", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithToast />);
-
-        const dialog = page.getByRole("dialog");
-        const openToastButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Toast" });
-        await openToastButton.click();
-
-        await page.mouse.click(0, 0); // click outside Toast and Dialog
-        await dialog.press("Tab");
-
-        await expect(openToastButton).toBeFocused();
-      });
-
-      test("when tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithOpenToastsBackgroundScrollTest />);
-
-        const dialog = page.getByRole("dialog");
-        const dialogCloseButton = dialog.getByLabel("Close");
-        const textbox = page.getByLabel("Textbox");
-        const toast1CloseButton = toastComponent(page)
-          .filter({ hasText: "Toast message 1" })
-          .getByLabel("Close");
-        const toast2CloseButton = toastComponent(page)
-          .filter({ hasText: "Toast message 2" })
-          .getByLabel("Close");
-
-        await dialog.press("Tab");
-        await dialogCloseButton.press("Tab");
-        await textbox.press("Tab");
-        await toast1CloseButton.press("Tab");
-        await toast2CloseButton.press("Tab");
-
-        await expect(dialogCloseButton).toBeFocused();
-        await expect(
-          page.getByText("I should not be scrolled into view")
-        ).not.toBeInViewport();
-      });
-
-      test("when shift tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithOpenToastsBackgroundScrollTest />);
-
-        const dialog = page.getByRole("dialog");
-        const dialogCloseButton = dialog.getByLabel("Close");
-        const textbox = page.getByLabel("Textbox");
-        const toast1CloseButton = page
-          .locator('[data-component="toast"]')
-          .filter({ hasText: "Toast message 1" })
-          .getByLabel("Close");
-        const toast2CloseButton = page
-          .locator('[data-component="toast"]')
-          .filter({ hasText: "Toast message 2" })
-          .getByLabel("Close");
-
-        await dialog.press("Shift+Tab");
-        await toast2CloseButton.press("Shift+Tab");
-        await toast1CloseButton.press("Shift+Tab");
-        await textbox.press("Shift+Tab");
-
-        await expect(dialogCloseButton).toBeFocused();
-        await expect(
-          page.getByText("I should not be scrolled into view")
-        ).not.toBeInViewport();
-      });
-    }
-  );
-
-  test("Dialog should have rounded corners", async ({ mount, page }) => {
-    await mount(<DialogComponent />);
+test.describe(
+  "when there is a button inside Dialog, which opens a Toast",
+  () => {
+    test("clicking button moves focus out of Dialog to the newly-opened Toast", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithToast />);
 
-    await expect(page.getByRole("dialog")).toHaveCSS("border-radius", "16px");
-  });
+      const openToastButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Toast" });
+      await page.waitForTimeout(250);
+      await openToastButton.click();
+
+      const toast = toastComponent(page);
+      await expect(toast).toBeFocused();
+    });
+
+    test("when Toast is opened and focus on it is lost, pressing Tab key traps focus back inside the Dialog", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithToast />);
+
+      const dialog = page.getByRole("dialog");
+      const openToastButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Toast" });
+      await page.waitForTimeout(250);
+      await openToastButton.click();
+
+      await page.mouse.click(0, 0); // click outside Toast and Dialog
+
+      await dialog.press("Tab");
 
-  test.describe(
-    "Accessibility tests for playwright mock components and storybook stories",
-    () => {
-      test("DialogComponent mock component should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogComponent />);
-
-        await checkAccessibility(page);
-      });
-
-      test("DialogWithFirstFocusableElement mock component should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithFirstFocusableElement />);
-
-        await checkAccessibility(page);
-      });
-
-      test("DialogWithToast mock component should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DialogWithToast />);
-
-        await checkAccessibility(page);
-      });
-
-      test("Default story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<DefaultStory />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("Editable story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<Editable />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-
-        const activateAddressButton = page
-          .getByRole("button")
-          .filter({ hasText: "Activate Address" });
-        await activateAddressButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("WithHelp story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<WithHelp />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-
-        const helpIcon = page.getByLabel("help");
-        await helpIcon.hover();
-
-        await checkAccessibility(page);
-      });
-
-      test("LoadingContent story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<LoadingContent />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-
-        await page.getByLabel("Textbox 1").waitFor();
-        await checkAccessibility(page);
-      });
-
-      test("FocusingADifferentFirstElement story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<FocusingADifferentFirstElement />);
-
-        const focusFirstElementDemoButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Demo using focusFirstElement" });
-        await focusFirstElementDemoButton.click();
-
-        await checkAccessibility(page);
-
-        await page.getByRole("dialog").press("Escape");
-        const autoFocusDemoButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Demo using autoFocus" });
-        await autoFocusDemoButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("OverridingContentPadding story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<OverridingContentPadding />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("OtherFocusableContainers story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<OtherFocusableContainers />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        const firstToastButton = page
-          .getByRole("button")
-          .filter({ hasText: "Show first toast" });
-        const secondToastButton = page
-          .getByRole("button")
-          .filter({ hasText: "Show second toast" });
-
-        await openDialogButton.click();
-        await firstToastButton.click();
-        await secondToastButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("Responsive story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<Responsive />);
-
-        const openDialogButton = page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" });
-        await openDialogButton.click();
-
-        await checkAccessibility(page);
-      });
-
-      test("UsingHandle story should pass accessibility checks", async ({
-        mount,
-        page,
-      }) => {
-        await mount(<UsingHandle />);
-
-        await page
-          .getByRole("button")
-          .filter({ hasText: "Open Dialog" })
-          .click();
-
-        await checkAccessibility(page);
-
-        await page.getByRole("button").filter({ hasText: "Submit" }).click();
-
-        await checkAccessibility(page);
-      });
-    }
-  );
+      await expect(openToastButton).toBeFocused();
+    });
+
+    test("when tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithOpenToastsBackgroundScrollTest />);
+
+      const dialog = page.getByRole("dialog");
+      const dialogCloseButton = dialog.getByLabel("Close");
+      const textbox = page.getByLabel("Textbox");
+      const toast1CloseButton = toastComponent(page)
+        .filter({ hasText: "Toast message 1" })
+        .getByLabel("Close");
+      const toast2CloseButton = toastComponent(page)
+        .filter({ hasText: "Toast message 2" })
+        .getByLabel("Close");
+
+      await page.waitForTimeout(250);
+      await dialog.press("Tab");
+      await dialogCloseButton.press("Tab");
+      await textbox.press("Tab");
+      await toast1CloseButton.press("Tab");
+      await toast2CloseButton.press("Tab");
+
+      await expect(dialogCloseButton).toBeFocused();
+      await expect(
+        page.getByText("I should not be scrolled into view")
+      ).not.toBeInViewport();
+    });
+
+    test("when shift tabbing through Dialog content and two opened Toasts, the background scroll should not scroll to the bottom of the page", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithOpenToastsBackgroundScrollTest />);
+
+      const dialog = page.getByRole("dialog");
+      const dialogCloseButton = dialog.getByLabel("Close");
+      const textbox = page.getByLabel("Textbox");
+      const toast1CloseButton = page
+        .locator('[data-component="toast"]')
+        .filter({ hasText: "Toast message 1" })
+        .getByLabel("Close");
+      const toast2CloseButton = page
+        .locator('[data-component="toast"]')
+        .filter({ hasText: "Toast message 2" })
+        .getByLabel("Close");
+
+      await page.waitForTimeout(250);
+      await dialog.press("Shift+Tab");
+      await toast2CloseButton.press("Shift+Tab");
+      await toast1CloseButton.press("Shift+Tab");
+      await textbox.press("Shift+Tab");
+
+      await expect(dialogCloseButton).toBeFocused();
+      await expect(
+        page.getByText("I should not be scrolled into view")
+      ).not.toBeInViewport();
+    });
+  }
+);
+
+test("Dialog should have rounded corners", async ({ mount, page }) => {
+  await mount(<DialogComponent />);
+
+  await expect(page.getByRole("dialog")).toHaveCSS("border-radius", "16px");
 });
+
+test.describe(
+  "Accessibility tests for playwright mock components and storybook stories",
+  () => {
+    test("DialogComponent mock component should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogComponent />);
+
+      await checkAccessibility(page);
+    });
+
+    test("DialogWithFirstFocusableElement mock component should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithFirstFocusableElement />);
+
+      await checkAccessibility(page);
+    });
+
+    test("DialogWithToast mock component should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DialogWithToast />);
+
+      await checkAccessibility(page);
+    });
+
+    test("Default story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<DefaultStory />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("Editable story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<Editable />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+
+      const activateAddressButton = page
+        .getByRole("button")
+        .filter({ hasText: "Activate Address" });
+      await activateAddressButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("WithHelp story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<WithHelp />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+
+      const helpIcon = page.getByLabel("help");
+      await helpIcon.hover();
+
+      await checkAccessibility(page);
+    });
+
+    test("LoadingContent story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<LoadingContent />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+
+      await page.getByLabel("Textbox 1").waitFor();
+      await checkAccessibility(page);
+    });
+
+    test("FocusingADifferentFirstElement story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<FocusingADifferentFirstElement />);
+
+      const focusFirstElementDemoButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Demo using focusFirstElement" });
+      await focusFirstElementDemoButton.click();
+
+      await checkAccessibility(page);
+
+      await page.getByRole("dialog").press("Escape");
+      const autoFocusDemoButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Demo using autoFocus" });
+      await autoFocusDemoButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("OverridingContentPadding story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<OverridingContentPadding />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("OtherFocusableContainers story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<OtherFocusableContainers />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      const firstToastButton = page
+        .getByRole("button")
+        .filter({ hasText: "Show first toast" });
+      const secondToastButton = page
+        .getByRole("button")
+        .filter({ hasText: "Show second toast" });
+
+      await openDialogButton.click();
+      await firstToastButton.click();
+      await secondToastButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("Responsive story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<Responsive />);
+
+      const openDialogButton = page
+        .getByRole("button")
+        .filter({ hasText: "Open Dialog" });
+      await openDialogButton.click();
+
+      await checkAccessibility(page);
+    });
+
+    test("UsingHandle story should pass accessibility checks", async ({
+      mount,
+      page,
+    }) => {
+      await mount(<UsingHandle />);
+
+      await page.getByRole("button").filter({ hasText: "Open Dialog" }).click();
+
+      await checkAccessibility(page);
+
+      await page.getByRole("button").filter({ hasText: "Submit" }).click();
+
+      await checkAccessibility(page);
+    });
+  }
+);