diff --git a/cypress/components/settings-row/settings-row.cy.tsx b/cypress/components/settings-row/settings-row.cy.tsx
deleted file mode 100644
index 7906cdb2e3..0000000000
--- a/cypress/components/settings-row/settings-row.cy.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import React from "react";
-import Link from "../../../src/components/link";
-import { SettingsRowComponent } from "../../../src/components/settings-row/settings-row-test.stories";
-import * as stories from "../../../src/components/settings-row/settings-row.stories";
-import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
-import { SettingsRowProps } from "../../../src/components/settings-row";
-import { getDataElementByValue } from "../../locators";
-import {
-  settingsRowPreview,
-  settingsRowChildren,
-  settingsRowDescription,
-} from "../../locators/settings-row/index";
-import { CHARACTERS } from "../../support/component-helper/constants";
-import { checkOutlineCss } from "../../support/component-helper/common-steps";
-
-const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
-
-context("Tests for SettingsRow component", () => {
-  describe("should check SettingsRow component properties", () => {
-    it.each(testData)(
-      "should check %s as title for SettingsRow component",
-      (title) => {
-        CypressMountWithProviders(<SettingsRowComponent title={title} />);
-        getDataElementByValue("title").should("have.text", title);
-      }
-    );
-
-    it.each([
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-    ] as SettingsRowProps["headingType"][])(
-      "should check HTML heading element is correct when headingType is %s",
-      (headingType) => {
-        CypressMountWithProviders(
-          <SettingsRowComponent
-            headingType={headingType}
-            title="foo"
-            description="bar"
-          />
-        );
-
-        cy.get(String(headingType)).contains("foo");
-      }
-    );
-
-    it.each(testData)(
-      "should check %s as description for SettingsRow component",
-      (description) => {
-        CypressMountWithProviders(
-          <SettingsRowComponent description={description} />
-        );
-        settingsRowDescription().should("have.text", description);
-      }
-    );
-
-    it("should check link as description for SettingsRow component", () => {
-      const textDesc = "This is a link";
-      const linkDesc = (
-        <Link href="https://carbon.sage.com/?path=/docs/setting-row--default-story">
-          {textDesc}
-        </Link>
-      );
-      CypressMountWithProviders(
-        <SettingsRowComponent description={linkDesc} />
-      );
-      settingsRowDescription().should("have.text", textDesc);
-    });
-
-    it.each([true, false])(
-      "should check when divider property is %s for SettingsRow component",
-      (bool) => {
-        CypressMountWithProviders(<SettingsRowComponent divider={bool} />);
-        if (bool) {
-          settingsRowPreview().then((elem) => {
-            checkOutlineCss(
-              elem,
-              1,
-              "border-bottom",
-              "solid",
-              "rgb(230, 235, 237)"
-            );
-            settingsRowPreview().should("have.css", "padding-bottom", "30px");
-          });
-        } else {
-          settingsRowPreview()
-            .should(
-              "not.have.css",
-              "border-bottom",
-              "1px solid rgb(230, 235, 237)"
-            )
-            .and("not.have.css", "padding-bottom", "30px");
-        }
-      }
-    );
-
-    it.each(testData)(
-      "should check %s as className for SettingsRow component",
-      (className) => {
-        CypressMountWithProviders(
-          <SettingsRowComponent className={className} />
-        );
-        settingsRowPreview().should("have.class", className);
-      }
-    );
-
-    it.each(testData)(
-      "should check %s as children for SettingsRow component",
-      (children) => {
-        CypressMountWithProviders(
-          <SettingsRowComponent>{children}</SettingsRowComponent>
-        );
-        settingsRowChildren().should("have.text", children);
-      }
-    );
-  });
-  describe("check accessibility for SettingsRow component", () => {
-    it("should pass accessibility tests for SettingsRow Default story", () => {
-      CypressMountWithProviders(<stories.Default />);
-
-      cy.checkAccessibility();
-    });
-
-    it("should pass accessibility tests for SettingsRow HeadingType story", () => {
-      CypressMountWithProviders(<stories.HeadingType />);
-
-      cy.checkAccessibility();
-    });
-  });
-});
diff --git a/playwright/components/settings-row/index.ts b/playwright/components/settings-row/index.ts
new file mode 100644
index 0000000000..356bf3d580
--- /dev/null
+++ b/playwright/components/settings-row/index.ts
@@ -0,0 +1,21 @@
+import type { Page } from "@playwright/test";
+import {
+  SETTINGS_ROW_COMPONENT,
+  SETTINGS_ROW_CHILDREN,
+  SETTINGS_ROW_DESCRIPTION,
+  SETTINGS_ROW_TITLE,
+} from "./locators";
+
+export const settingsRowPreview = (page: Page) => {
+  return page.locator(SETTINGS_ROW_COMPONENT);
+};
+export const settingsRowChildren = (page: Page) => {
+  return page.locator(SETTINGS_ROW_CHILDREN);
+};
+export const settingsRowDescription = (page: Page) => {
+  return page.locator(SETTINGS_ROW_DESCRIPTION);
+};
+
+export const settingsRowTitle = (page: Page) => {
+  return page.locator(SETTINGS_ROW_TITLE);
+};
diff --git a/cypress/locators/settings-row/locators.js b/playwright/components/settings-row/locators.ts
similarity index 81%
rename from cypress/locators/settings-row/locators.js
rename to playwright/components/settings-row/locators.ts
index 02f222ad1d..e848b1bc43 100644
--- a/cypress/locators/settings-row/locators.js
+++ b/playwright/components/settings-row/locators.ts
@@ -2,3 +2,4 @@
 export const SETTINGS_ROW_COMPONENT = 'div[data-component="settings-row"]';
 export const SETTINGS_ROW_CHILDREN = `${SETTINGS_ROW_COMPONENT} > div:last-child`;
 export const SETTINGS_ROW_DESCRIPTION = 'div[data-element="subtitle"]';
+export const SETTINGS_ROW_TITLE = '[data-element="title"]';
diff --git a/src/components/settings-row/components.test-pw.tsx b/src/components/settings-row/components.test-pw.tsx
new file mode 100644
index 0000000000..ce9e4c8f04
--- /dev/null
+++ b/src/components/settings-row/components.test-pw.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import SettingsRow, { SettingsRowProps } from ".";
+import Link from "../../components/link";
+
+const SettingsRowDefault = (props: SettingsRowProps) => (
+  <SettingsRow {...props} />
+);
+
+const SettingRowWithLinkDescription = (props: SettingsRowProps) => {
+  const { description } = props;
+
+  return (
+    <SettingsRow
+      {...props}
+      description={
+        <Link href="https://carbon.sage.com/?path=/docs/setting-row--default-story">
+          {description || "foo"}
+        </Link>
+      }
+    >
+      Content for settings
+    </SettingsRow>
+  );
+};
+
+const SettingsRowWithHeadingTypes = () => (
+  <>
+    <SettingsRow
+      headingType="h1"
+      description="Description"
+      title="This is a h1 Title"
+    >
+      Content for settings
+    </SettingsRow>
+    <SettingsRow
+      headingType="h2"
+      description="Description"
+      title="This is a h2 Title"
+    >
+      Content for settings
+    </SettingsRow>
+    <SettingsRow
+      headingType="h3"
+      description="Description"
+      title="This is a h3 Title"
+    >
+      Content for settings
+    </SettingsRow>
+    <SettingsRow
+      headingType="h4"
+      description="Description"
+      title="This is a h4 Title"
+    >
+      Content for settings
+    </SettingsRow>
+    <SettingsRow
+      headingType="h5"
+      description="Description"
+      title="This is a h5 Title"
+    >
+      Content for settings
+    </SettingsRow>
+  </>
+);
+
+export {
+  SettingsRowDefault,
+  SettingRowWithLinkDescription,
+  SettingsRowWithHeadingTypes,
+};
diff --git a/src/components/settings-row/settings-row.pw.tsx b/src/components/settings-row/settings-row.pw.tsx
new file mode 100644
index 0000000000..585144b8f1
--- /dev/null
+++ b/src/components/settings-row/settings-row.pw.tsx
@@ -0,0 +1,171 @@
+import React from "react";
+import { test, expect } from "@playwright/experimental-ct-react17";
+import {
+  SettingsRowDefault,
+  SettingRowWithLinkDescription,
+  SettingsRowWithHeadingTypes,
+} from "./components.test-pw";
+import {
+  settingsRowPreview,
+  settingsRowChildren,
+  settingsRowDescription,
+  settingsRowTitle,
+} from "../../../playwright/components/settings-row/index";
+import { CHARACTERS } from "../../../cypress/support/component-helper/constants";
+import { HeadingType } from "../heading";
+import {
+  checkAccessibility,
+  containsClass,
+} from "../../../playwright/support/helper";
+
+const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
+const headingType: HeadingType[] = ["h1", "h2", "h3", "h4", "h5"];
+const dividerValue = [true, false];
+
+test.describe("should check SettingsRow component properties", () => {
+  testData.forEach((characterVals) => {
+    test(`should check ${characterVals} as title for SettingsRow component`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SettingsRowDefault title={characterVals} />);
+
+      await expect(settingsRowTitle(page)).toHaveText(characterVals);
+    });
+  });
+
+  headingType.forEach((heading) => {
+    test(`should check HTML heading element is correct when headingType is ${heading}`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <SettingsRowDefault
+          headingType={heading}
+          title="foo"
+          description="bar"
+        />
+      );
+
+      await expect(page.locator(heading)).toHaveText("foo");
+    });
+  });
+
+  testData.forEach((characterVals) => {
+    test(`should check ${characterVals} as description for SettingsRow component`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(
+        <SettingsRowDefault title="foo" description={characterVals} />
+      );
+
+      await expect(settingsRowDescription(page)).toHaveText(characterVals);
+    });
+  });
+
+  test("should check link as description for SettingsRow component", async ({
+    mount,
+    page,
+  }) => {
+    const textDesc = "This is a link";
+
+    await mount(
+      <SettingRowWithLinkDescription title="foo" description={textDesc} />
+    );
+
+    await expect(settingsRowDescription(page)).toHaveText(textDesc);
+  });
+
+  dividerValue.forEach((dividerVals) => {
+    test(`should check when divider property is ${dividerVals} for SettingsRow component`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SettingsRowDefault title="foo" divider={dividerVals} />);
+
+      if (dividerVals) {
+        await expect(settingsRowPreview(page)).toHaveCSS(
+          "border-bottom-color",
+          "rgb(230, 235, 237)"
+        );
+
+        await expect(settingsRowPreview(page)).toHaveCSS(
+          "border-bottom-style",
+          "solid"
+        );
+
+        await expect(settingsRowPreview(page)).toHaveCSS(
+          "padding-bottom",
+          "30px"
+        );
+      } else {
+        await expect(settingsRowPreview(page)).not.toHaveCSS(
+          "border-bottom-color",
+          "rgb(230, 235, 237)"
+        );
+
+        await expect(settingsRowPreview(page)).not.toHaveCSS(
+          "border-bottom-style",
+          "solid"
+        );
+
+        await expect(settingsRowPreview(page)).not.toHaveCSS(
+          "padding-bottom",
+          "30px"
+        );
+      }
+    });
+  });
+
+  testData.forEach((characterVals) => {
+    test(`should check ${characterVals} as className for SettingsRow component`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SettingsRowDefault className={characterVals} />);
+
+      await containsClass(settingsRowPreview(page), characterVals);
+    });
+  });
+
+  testData.forEach((characterVals) => {
+    test(`should check ${characterVals} as children for SettingsRow component`, async ({
+      mount,
+      page,
+    }) => {
+      await mount(<SettingsRowDefault>{characterVals}</SettingsRowDefault>);
+
+      await expect(settingsRowChildren(page)).toHaveText(characterVals);
+    });
+  });
+});
+
+test.describe("check accessibility for SettingsRow component", () => {
+  test("should pass accessibility tests for SettingsRowDefault", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SettingsRowDefault />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for SettingRowWithLinkDescription", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SettingRowWithLinkDescription />);
+
+    await checkAccessibility(page);
+  });
+
+  test("should pass accessibility tests for SettingsRowWithHeadingTypes", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<SettingsRowWithHeadingTypes />);
+
+    await checkAccessibility(page);
+  });
+});