diff --git a/docs/constants/index.ts b/docs/constants/index.ts
new file mode 100644
index 00000000..f9d338ac
--- /dev/null
+++ b/docs/constants/index.ts
@@ -0,0 +1,2 @@
+// Playwright constants
+export * from "./playwright";
diff --git a/docs/constants/playwright.ts b/docs/constants/playwright.ts
new file mode 100644
index 00000000..ecd6ecf3
--- /dev/null
+++ b/docs/constants/playwright.ts
@@ -0,0 +1,3 @@
+export const PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO = 0.01; // Default DIFF Pixel
+
+export const PLAYWRIGHT_DEFAULT_TIMEOUT = 500; // We wait max for .5 second for mounting
diff --git a/docs/e2e/accordion.spec.ts b/docs/e2e/accordion.spec.ts
index d2bfc76e..09a4dbb8 100644
--- a/docs/e2e/accordion.spec.ts
+++ b/docs/e2e/accordion.spec.ts
@@ -1,20 +1,21 @@
 import { test, expect } from "@playwright/test";
+import {
+  PLAYWRIGHT_DEFAULT_TIMEOUT,
+  PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
+} from "@/constants";
 
 const COMPONENT_NAME = "accordion";
-const MAX_DIFF_PIXEL_RATIO = 0.01;
-
-const DEFAULT_TIMEOUT = 1000; // We wait max for 1 second for mounting
 
 test.beforeEach(async ({ page }, testInfo) => {
   const example = testInfo.title?.split(":")?.[0] ?? "Default";
   const title = testInfo.title?.split(":")?.[1] || "";
   await page.goto(`/client/accordion/${example}`);
-  await page.waitForTimeout(DEFAULT_TIMEOUT);
+  await page.waitForTimeout(PLAYWRIGHT_DEFAULT_TIMEOUT);
 });
 
 test("Default: should be visible in a short term", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Default.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -29,7 +30,7 @@ test("Default: should open default accordion", async ({ page }) => {
   await expect(state).toEqual("open");
 
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Default-Open.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -86,7 +87,7 @@ test("Default: should close test accordion", async ({ page }) => {
 
 test("OpenByDefault: should be visible in a short term", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-OpenByDefault.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -123,7 +124,7 @@ test("OpenByDefault: should open accordion", async ({ page }) => {
 
 test("SingleOpen: should be visible in a short term", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-SingleOpen.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -183,7 +184,7 @@ test("SingleOpen: should open first accordion and close second", async ({
 
 test("Disabled: should be visible in a short term", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Disabled.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -194,7 +195,7 @@ test("Disabled: should be disabled", async ({ page }) => {
 
 test("HeaderContent: should be visible in a short term", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Disabled.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -231,7 +232,7 @@ test("HeaderContent: should close accordion", async ({ page }) => {
 
 test("Sizes: should be visible in a short term", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Sizes.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -361,7 +362,7 @@ test("Sizes: should close SM accordion", async ({ page }) => {
 
 test("Customization: should be visible in a short term", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Customization.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -380,7 +381,7 @@ test("Customization: should open accordion", async ({ page }) => {
   await expect(page).toHaveScreenshot(
     `${COMPONENT_NAME}-Customization-Open.png`,
     {
-      maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+      maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
     },
   );
 });
@@ -411,7 +412,7 @@ test("Customization: should close accordion", async ({ page }) => {
 
 test("ControlOutside: should be visible in a short term", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-ControlOutside.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
diff --git a/docs/e2e/authcode.spec.ts b/docs/e2e/authcode.spec.ts
index c9bf8f93..7c9a098a 100644
--- a/docs/e2e/authcode.spec.ts
+++ b/docs/e2e/authcode.spec.ts
@@ -1,14 +1,15 @@
 import { test, expect } from "@playwright/test";
+import {
+  PLAYWRIGHT_DEFAULT_TIMEOUT,
+  PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
+} from "@/constants";
 
 const COMPONENT_NAME = "authcode";
-const MAX_DIFF_PIXEL_RATIO = 0.01;
-
-const DEFAULT_TIMEOUT = 500; // We wait max for .5 second for mounting
 
 test.beforeEach(async ({ page }, testInfo) => {
   const example = testInfo.title?.split(":")?.[0] ?? "Default";
   await page.goto(`/client/authcode/${example}`);
-  await page.waitForTimeout(DEFAULT_TIMEOUT);
+  await page.waitForTimeout(PLAYWRIGHT_DEFAULT_TIMEOUT);
 });
 test.afterEach(async ({ page }) => {
   // Cleanup from route
@@ -17,13 +18,13 @@ test.afterEach(async ({ page }) => {
 
 test("Default: should render and match screenshot", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
 test("ErrorState: should render and match screenshot", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-ErrorState.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -33,44 +34,44 @@ test("AllowedCharacters: should render and match screenshot", async ({
   await expect(page).toHaveScreenshot(
     `${COMPONENT_NAME}-AllowedCharacters.png`,
     {
-      maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+      maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
     },
   );
 });
 
 test("CustomLength: should render and match screenshot", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-CustomLength.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
 test("DifferentGaps: should render and match screenshot", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-DifferentGaps.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
 test("HintMessage: should render and match screenshot", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-HintMessage.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
 test("Password: should render and match screenshot", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Password.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
 test("Placeholder: should render and match screenshot", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Placeholder.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
 test("WithAutoSubmit: should render and match screenshot", async ({ page }) => {
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-WithAutoSubmit.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });
 
@@ -80,7 +81,7 @@ test("WithManualSubmit: should render and match screenshot", async ({
   await expect(page).toHaveScreenshot(
     `${COMPONENT_NAME}-WithManualSubmit.png`,
     {
-      maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+      maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
     },
   );
 });
@@ -130,7 +131,7 @@ test("Password: should not print any character", async ({ page }) => {
   await page.getByLabel("Character 5").fill("1");
   await page.getByLabel("Character 6").fill("1");
   await expect(page).toHaveScreenshot(`${COMPONENT_NAME}-Password-filled.png`, {
-    maxDiffPixelRatio: MAX_DIFF_PIXEL_RATIO,
+    maxDiffPixelRatio: PLAYWRIGHT_MAX_DIFF_PIXEL_RATIO,
   });
 });