diff --git a/cypress/components/hr/hr.cy.tsx b/cypress/components/hr/hr.cy.tsx
deleted file mode 100644
index 6928bed156..0000000000
--- a/cypress/components/hr/hr.cy.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from "react";
-import { Default as HrComponent } from "../../../src/components/hr/hr-test.stories";
-import * as stories from "../../../src/components/hr/hr.stories";
-import hrComponent from "../../locators/hr";
-import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
-import { assertCssValueIsApproximately } from "../../support/component-helper/common-steps";
-
-context("Testing Hr component", () => {
-  describe("check props for Hr component", () => {
-    it("verify Hr component is displayed properly", () => {
-      CypressMountWithProviders(<HrComponent />);
-
-      hrComponent()
-        .should("have.css", "margin-top", "24px")
-        .and("have.css", "margin-bottom", "24px");
-    });
-
-    it.each([
-      [799, 78, 320],
-      [800, 78, 320],
-      [801, 0, 0],
-    ])(
-      "verify Hr component adaptiveMxBreakpoint prop sets left and right margins to 0px when larger than viewport",
-      (breakpoint, leftMargin, rightMargin) => {
-        cy.viewport(800, 300);
-
-        CypressMountWithProviders(
-          <HrComponent
-            mb={7}
-            mt={7}
-            ml="10%"
-            mr="40%"
-            adaptiveMxBreakpoint={breakpoint}
-          />
-        );
-
-        hrComponent().then(($el) => {
-          assertCssValueIsApproximately($el, "margin-left", leftMargin);
-          assertCssValueIsApproximately($el, "margin-right", rightMargin);
-        });
-      }
-    );
-  });
-
-  describe("Accessibility tests for Hr component", () => {
-    it("should pass accessibility tests for Default story", () => {
-      CypressMountWithProviders(<stories.Default />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for DifferentSpacing story", () => {
-      CypressMountWithProviders(<stories.DifferentSpacing />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for EnablingAdaptiveBehaviour story", () => {
-      CypressMountWithProviders(<stories.EnablingAdaptiveBehaviour />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for InsideForm story", () => {
-      CypressMountWithProviders(<stories.InsideForm />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for InsideFormInlineLabels story", () => {
-      CypressMountWithProviders(<stories.InsideFormInlineLabels />);
-
-      cy.checkAccessibility();
-    });
-  });
-});
diff --git a/cypress/components/split-button/split-button.cy.tsx b/cypress/components/split-button/split-button.cy.tsx
index 7f3899ac28..cccd269bb0 100644
--- a/cypress/components/split-button/split-button.cy.tsx
+++ b/cypress/components/split-button/split-button.cy.tsx
@@ -691,7 +691,7 @@ context("Tests for SplitButton component", () => {
         "have.css",
         "border-radius",
         "0px 32px 32px 0px"
-      )
+      );
     });
 
     it("should have the expected border radius on children container and buttons", () => {
diff --git a/playwright/components/hr/index.ts b/playwright/components/hr/index.ts
new file mode 100644
index 0000000000..03f716a175
--- /dev/null
+++ b/playwright/components/hr/index.ts
@@ -0,0 +1,9 @@
+import type { Page } from "@playwright/test";
+import HR_COMPONENT from "./locators";
+
+// component preview locators
+const hrComponent = (page: Page) => {
+  return page.locator(HR_COMPONENT);
+};
+
+export default hrComponent;
diff --git a/playwright/components/hr/locators.ts b/playwright/components/hr/locators.ts
new file mode 100644
index 0000000000..eb78958134
--- /dev/null
+++ b/playwright/components/hr/locators.ts
@@ -0,0 +1,4 @@
+// component preview locators
+const HR_COMPONENT = '[data-component="hr"]';
+
+export default HR_COMPONENT;
diff --git a/src/components/hr/components.test-pw.tsx b/src/components/hr/components.test-pw.tsx
new file mode 100644
index 0000000000..a237d78785
--- /dev/null
+++ b/src/components/hr/components.test-pw.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import Hr, { HrProps } from ".";
+import Form from "../form";
+import Textbox from "../textbox";
+import Button from "../button";
+
+export const Default = (props: HrProps) => {
+  return <Hr {...props} />;
+};
+
+export const DifferentSpacing = () => <Hr mt={7} mb={7} />;
+
+export const InsideForm = () => (
+  <Form
+    onSubmit={() => {}}
+    leftSideButtons={<Button onClick={() => {}}>Cancel</Button>}
+    saveButton={
+      <Button buttonType="primary" type="submit">
+        Save
+      </Button>
+    }
+    stickyFooter={false}
+  >
+    <Textbox label="Textbox" />
+    <Textbox label="Textbox" />
+    <Hr mb={7} mt={7} />
+    <Textbox label="Textbox" />
+  </Form>
+);
+
+export const InsideFormInlineLabels = () => (
+  <Form
+    onSubmit={() => {}}
+    leftSideButtons={<Button onClick={() => {}}>Cancel</Button>}
+    saveButton={
+      <Button buttonType="primary" type="submit">
+        Save
+      </Button>
+    }
+    stickyFooter={false}
+  >
+    <Textbox
+      label="Textbox"
+      labelAlign="right"
+      labelInline
+      labelWidth={10}
+      inputWidth={50}
+    />
+    <Textbox
+      label="Textbox"
+      labelAlign="right"
+      labelInline
+      labelWidth={10}
+      inputWidth={50}
+    />
+    <Hr mb={7} mt={7} ml="10%" mr="40%" />
+    <Textbox
+      label="Textbox"
+      labelAlign="right"
+      labelInline
+      labelWidth={10}
+      inputWidth={50}
+    />
+  </Form>
+);
+
+export const EnablingAdaptiveBehaviour = () => (
+  <Hr mb={7} mt={7} ml="10%" mr="40%" adaptiveMxBreakpoint={960} />
+);
diff --git a/src/components/hr/hr.pw.tsx b/src/components/hr/hr.pw.tsx
new file mode 100644
index 0000000000..cbe45d4229
--- /dev/null
+++ b/src/components/hr/hr.pw.tsx
@@ -0,0 +1,101 @@
+import React from "react";
+import { test, expect } from "@playwright/experimental-ct-react17";
+import { checkAccessibility } from "../../../playwright/support/helper";
+
+import {
+  Default,
+  DifferentSpacing,
+  EnablingAdaptiveBehaviour,
+  InsideForm,
+  InsideFormInlineLabels,
+} from "../hr/components.test-pw";
+import hrComponent from "../../../playwright/components/hr/index";
+import HrComponent from "./hr.component";
+
+test.describe("Hr component", () => {
+  test("renders with expected margin", async ({ mount, page }) => {
+    await mount(<HrComponent />);
+
+    await expect(hrComponent(page)).toHaveCSS("margin-top", "24px");
+    await expect(hrComponent(page)).toHaveCSS("margin-bottom", "24px");
+  });
+
+  [
+    [799, 80, 320],
+    [800, 80, 320],
+    [801, 0, 0],
+  ].forEach(([breakpoint, leftMargin, rightMargin]) => {
+    test.use({ viewport: { width: 800, height: 300 } });
+
+    test(`adaptiveMaxBreakpoint props set to ${breakpoint} applies the expected left and right margins`, async ({
+      mount,
+      page,
+    }) => {
+      await await mount(
+        <HrComponent
+          mb={7}
+          mt={7}
+          ml="10%"
+          mr="40%"
+          adaptiveMxBreakpoint={breakpoint}
+        />
+      );
+
+      await expect(hrComponent(page)).toHaveCSS(
+        "margin-left",
+        `${leftMargin}px`
+      );
+      await expect(hrComponent(page)).toHaveCSS(
+        "margin-right",
+        `${rightMargin}px`
+      );
+    });
+  });
+});
+
+test.describe("Accessibility tests for Hr component", () => {
+  test("should pass accessibility tests for Default example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<Default />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for DifferentSpacing example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<DifferentSpacing />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for EnablingAdaptiveBehaviour example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<EnablingAdaptiveBehaviour />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for InsideForm example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<InsideForm />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for InsideFormInlineLabels example", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<InsideFormInlineLabels />);
+
+    await checkAccessibility(page);
+  });
+});