diff --git a/cypress/components/profile/profile.cy.tsx b/cypress/components/profile/profile.cy.tsx
deleted file mode 100644
index fb75523631..0000000000
--- a/cypress/components/profile/profile.cy.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React from "react";
-import { ProfileProps } from "components/profile/profile.component";
-import { ProfileComponentTest as ProfileComponent } from "../../../src/components/profile/profile-test.stories";
-import CypressMountWithProviders from "../../support/component-helper/cypress-mount";
-import { assertCssValueIsApproximately } from "../../support/component-helper/common-steps";
-import { CHARACTERS } from "../../support/component-helper/constants";
-import { PROFILE_SIZES } from "../../../src/components/profile/profile.config";
-
-import {
- profilePreview,
- emailPreview,
- namePreview,
- avatarPreview,
- initialPreview,
-} from "../../locators/profile/index";
-
-const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
-
-context("Tests for Profile component", () => {
- describe("should check Profile component properties", () => {
- it("should check className for Profile component", () => {
- CypressMountWithProviders(
-
- );
- profilePreview().should("have.class", "profile-cypress-classname");
- });
-
- it.each(testData)(
- "should check email as %s for Profile component",
- (email) => {
- CypressMountWithProviders(
-
- );
- emailPreview().should("have.text", email);
- }
- );
-
- it.each(testData)(
- "should check name as %s for Profile component",
- (name) => {
- CypressMountWithProviders(
-
- );
- namePreview().should("have.text", name);
- }
- );
-
- it.each([
- [
- "https://avataaars.io/?avatarStyle=Transparent&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light",
- ],
- [
- "https://www.gravatar.com/avatar/05c1c705ee45d7ae88b80b3a8866ddaa?s=24&d=404",
- ],
- ])("should check avatar for Profile component", (srcImage) => {
- CypressMountWithProviders();
- avatarPreview()
- .should("have.css", "height", "40px")
- .and("have.css", "width", "40px");
- avatarPreview().children().should("have.attr", "src", srcImage);
- });
-
- it.each([
- [PROFILE_SIZES[0], 22],
- [PROFILE_SIZES[1], 30],
- [PROFILE_SIZES[2], 38],
- [PROFILE_SIZES[3], 54],
- [PROFILE_SIZES[4], 70],
- [PROFILE_SIZES[5], 102],
- [PROFILE_SIZES[6], 126],
- ] as [ProfileProps["size"], number][])(
- "should check %s size for Profile component",
- (size, heightAndWidth) => {
- CypressMountWithProviders();
- initialPreview().then(($el) => {
- assertCssValueIsApproximately($el, "height", heightAndWidth);
- assertCssValueIsApproximately($el, "width", heightAndWidth);
- });
- }
- );
-
- it.each([
- ["Dan Jin", "DJ"],
- ["Sid Ford", "SF"],
- ])(
- "should check initials for %s in Profile component",
- (name, passInitials) => {
- CypressMountWithProviders(
-
- );
- initialPreview().then(($el) => {
- assertCssValueIsApproximately($el, "height", 38);
- assertCssValueIsApproximately($el, "width", 38);
- });
- }
- );
- });
-
- describe("Accessibility tests for Profile component", () => {
- it("should check className for accessibility tests", () => {
- CypressMountWithProviders(
-
- );
- cy.checkAccessibility();
- });
-
- it.each(testData)(
- "should check email as %s for accessibility tests",
- (email) => {
- CypressMountWithProviders(
-
- );
- cy.checkAccessibility();
- }
- );
-
- it.each(testData)(
- "should check name as %s for accessibility tests",
- (name) => {
- CypressMountWithProviders(
-
- );
- cy.checkAccessibility();
- }
- );
-
- it.each([
- [
- "https://avataaars.io/?avatarStyle=Transparent&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light",
- ],
- [
- "https://www.gravatar.com/avatar/05c1c705ee45d7ae88b80b3a8866ddaa?s=24&d=404",
- ],
- ])("should check src image as %s for accessibility tests", (srcImage) => {
- CypressMountWithProviders();
- cy.checkAccessibility();
- });
-
- it.each([
- PROFILE_SIZES[0],
- PROFILE_SIZES[1],
- PROFILE_SIZES[2],
- PROFILE_SIZES[3],
- PROFILE_SIZES[4],
- PROFILE_SIZES[5],
- PROFILE_SIZES[6],
- ])("should check profile size as %s for accessibility tests", (size) => {
- CypressMountWithProviders();
- cy.checkAccessibility();
- });
-
- it.each([
- ["Dan Jin", "DJ"],
- ["Sid Ford", "SF"],
- ])(
- "should check %s initials as %s for accessibility tests",
- (name, passInitials) => {
- CypressMountWithProviders(
-
- );
- cy.checkAccessibility();
- }
- );
- });
-});
diff --git a/playwright/components/profile/index.ts b/playwright/components/profile/index.ts
new file mode 100644
index 0000000000..b9667d58e6
--- /dev/null
+++ b/playwright/components/profile/index.ts
@@ -0,0 +1,21 @@
+import type { Page } from "@playwright/test";
+import { EMAIL, NAME, INITIALS, PROFILE } from "./locators";
+
+// component preview locators
+
+const emailPreview = (page: Page) => {
+ return page.locator(EMAIL);
+};
+
+const namePreview = (page: Page) => {
+ return page.locator(NAME);
+};
+
+const profilePreview = (page: Page) => {
+ return page.locator(PROFILE);
+};
+
+const initialPreview = (page: Page) => {
+ return page.locator(INITIALS);
+};
+export { emailPreview, namePreview, profilePreview, initialPreview };
diff --git a/playwright/components/profile/locators.ts b/playwright/components/profile/locators.ts
new file mode 100644
index 0000000000..22a6c2be22
--- /dev/null
+++ b/playwright/components/profile/locators.ts
@@ -0,0 +1,5 @@
+// component preview locators
+export const EMAIL = '[data-element="email"]';
+export const NAME = '[data-element="name"]';
+export const INITIALS = '[data-element="initials"]';
+export const PROFILE = '[data-component="profile"]';
diff --git a/src/components/profile/component.test-pw.tsx b/src/components/profile/component.test-pw.tsx
new file mode 100644
index 0000000000..bfb593cd8b
--- /dev/null
+++ b/src/components/profile/component.test-pw.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Profile, { ProfileProps } from ".";
+
+const ProfileComponent = (props: Partial) => {
+ return (
+
+ );
+};
+
+export default ProfileComponent;
diff --git a/src/components/profile/profile.pw.tsx b/src/components/profile/profile.pw.tsx
new file mode 100644
index 0000000000..a4e6569e91
--- /dev/null
+++ b/src/components/profile/profile.pw.tsx
@@ -0,0 +1,195 @@
+import React from "react";
+import { test, expect } from "@playwright/experimental-ct-react17";
+import ProfileComponent from "./component.test-pw";
+import { CHARACTERS } from "../../../playwright/support/constants";
+
+import {
+ emailPreview,
+ namePreview,
+ profilePreview,
+ initialPreview,
+} from "../../../playwright/components/profile";
+
+import { portraitImage } from "../../../playwright/components/portrait";
+
+import { PROFILE_SIZES } from "../../../src/components/profile/profile.config";
+
+import {
+ checkAccessibility,
+ containsClass,
+} from "../../../playwright/support/helper";
+import { ProfileProps } from "./profile.component";
+
+const testImage =
+ "https://www.gravatar.com/avatar/05c1c705ee45d7ae88b80b3a8866ddaa?s=24&d=404";
+
+const imageURLs = [
+ "https://avataaars.io/?avatarStyle=Transparent&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light",
+ "https://www.gravatar.com/avatar/05c1c705ee45d7ae88b80b3a8866ddaa?s=24&d=404",
+];
+
+const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
+
+test.describe("Prop checks for Profile component", () => {
+ test(`should render with className`, async ({ mount, page }) => {
+ await mount();
+
+ await containsClass(profilePreview(page), "profile-playwright-classname");
+ });
+
+ testData.forEach((email) => {
+ test(`should render with email prop is passed as ${email}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await expect(emailPreview(page)).toHaveText(email);
+ });
+ });
+
+ testData.forEach((name) => {
+ test(`should render with name prop is passed as ${name}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await expect(namePreview(page)).toHaveText(name);
+ });
+ });
+
+ ([
+ [PROFILE_SIZES[0], 22],
+ [PROFILE_SIZES[1], 30],
+ [PROFILE_SIZES[2], 38],
+ [PROFILE_SIZES[3], 54],
+ [PROFILE_SIZES[4], 70],
+ [PROFILE_SIZES[5], 102],
+ [PROFILE_SIZES[6], 126],
+ ] as [ProfileProps["size"], number][]).forEach(([size, heightAndWidth]) => {
+ test(`should render with size prop is passed as ${size}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await expect(initialPreview(page)).toHaveCSS(
+ "height",
+ `${heightAndWidth}px`
+ );
+ await expect(initialPreview(page)).toHaveCSS(
+ "width",
+ `${heightAndWidth}px`
+ );
+ });
+ });
+
+ ([
+ [PROFILE_SIZES[0], 22],
+ [PROFILE_SIZES[1], 30],
+ [PROFILE_SIZES[2], 38],
+ [PROFILE_SIZES[3], 54],
+ [PROFILE_SIZES[4], 70],
+ [PROFILE_SIZES[5], 102],
+ [PROFILE_SIZES[6], 126],
+ ] as [ProfileProps["size"], number][]).forEach(([size, heightAndWidth]) => {
+ test(`should render with size prop is passed as ${size} and initials prop is passed`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await expect(initialPreview(page)).toHaveCSS(
+ "height",
+ `${heightAndWidth}px`
+ );
+ await expect(initialPreview(page)).toHaveCSS(
+ "width",
+ `${heightAndWidth}px`
+ );
+ });
+ });
+
+ imageURLs.forEach((url) => {
+ test(`should render with src prop passed as ${url}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await expect(portraitImage(page)).toHaveCSS("height", "40px");
+ await expect(portraitImage(page)).toHaveCSS("width", "40px");
+ await expect(portraitImage(page)).toHaveAttribute("src", url);
+ });
+ });
+});
+
+test.describe("should check Accessibility tests for Profile component", () => {
+ test(`should pass accessibility tests when className prop is passed`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await checkAccessibility(page);
+ });
+
+ testData.forEach((email) => {
+ test(`should pass accessibility tests when email prop is passed as ${email}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await checkAccessibility(page);
+ });
+ });
+
+ testData.forEach((name) => {
+ test(`should pass accessibility tests when name prop is passed as ${name}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await checkAccessibility(page);
+ });
+ });
+
+ (["XS", "S", "M", "ML", "L", "XL", "XXL"] as const).forEach((size) => {
+ test(`should pass accessibility tests when size prop is passed as ${size}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await checkAccessibility(page);
+ });
+ });
+
+ [
+ ["Dan Jin", "DJ"],
+ ["Sid Ford", "SF"],
+ ].forEach(([name, passInitials]) => {
+ test(`should pass accessibility tests when initials prop is passed as ${passInitials}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await checkAccessibility(page);
+ });
+ });
+
+ imageURLs.forEach((url) => {
+ test(`should pass accessibility tests when src prop is passed as ${url}`, async ({
+ mount,
+ page,
+ }) => {
+ await mount();
+
+ await checkAccessibility(page);
+ });
+ });
+});