diff --git a/package-lock.json b/package-lock.json
index c9bb6181c4..83524d1ac6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
 				"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 				"@babel/preset-env": "7.20.2",
 				"@babel/preset-react": "^7.18.6",
-				"@playwright/test": "^1.34.3",
+				"@playwright/test": "^1.38.1",
 				"@sentry/webpack-plugin": "^1.20.0",
 				"@testing-library/jest-dom": "^5.16.5",
 				"@testing-library/react": "^14.0.0",
@@ -3355,22 +3355,18 @@
 			}
 		},
 		"node_modules/@playwright/test": {
-			"version": "1.34.3",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
-			"integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
+			"version": "1.38.1",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+			"integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
 			"dev": true,
 			"dependencies": {
-				"@types/node": "*",
-				"playwright-core": "1.34.3"
+				"playwright": "1.38.1"
 			},
 			"bin": {
 				"playwright": "cli.js"
 			},
 			"engines": {
-				"node": ">=14"
-			},
-			"optionalDependencies": {
-				"fsevents": "2.3.2"
+				"node": ">=16"
 			}
 		},
 		"node_modules/@polka/url": {
@@ -12746,16 +12742,34 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/playwright": {
+			"version": "1.38.1",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+			"integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+			"dev": true,
+			"dependencies": {
+				"playwright-core": "1.38.1"
+			},
+			"bin": {
+				"playwright": "cli.js"
+			},
+			"engines": {
+				"node": ">=16"
+			},
+			"optionalDependencies": {
+				"fsevents": "2.3.2"
+			}
+		},
 		"node_modules/playwright-core": {
-			"version": "1.34.3",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
-			"integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
+			"version": "1.38.1",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+			"integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
 			"dev": true,
 			"bin": {
 				"playwright-core": "cli.js"
 			},
 			"engines": {
-				"node": ">=14"
+				"node": ">=16"
 			}
 		},
 		"node_modules/postcss": {
@@ -20503,14 +20517,12 @@
 			}
 		},
 		"@playwright/test": {
-			"version": "1.34.3",
-			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.34.3.tgz",
-			"integrity": "sha512-zPLef6w9P6T/iT6XDYG3mvGOqOyb6eHaV9XtkunYs0+OzxBtrPAAaHotc0X+PJ00WPPnLfFBTl7mf45Mn8DBmw==",
+			"version": "1.38.1",
+			"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.38.1.tgz",
+			"integrity": "sha512-NqRp8XMwj3AK+zKLbZShl0r/9wKgzqI/527bkptKXomtuo+dOjU9NdMASQ8DNC9z9zLOMbG53T4eihYr3XR+BQ==",
 			"dev": true,
 			"requires": {
-				"@types/node": "*",
-				"fsevents": "2.3.2",
-				"playwright-core": "1.34.3"
+				"playwright": "1.38.1"
 			}
 		},
 		"@polka/url": {
@@ -27605,10 +27617,20 @@
 				"find-up": "^4.0.0"
 			}
 		},
+		"playwright": {
+			"version": "1.38.1",
+			"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.38.1.tgz",
+			"integrity": "sha512-oRMSJmZrOu1FP5iu3UrCx8JEFRIMxLDM0c/3o4bpzU5Tz97BypefWf7TuTNPWeCe279TPal5RtPPZ+9lW/Qkow==",
+			"dev": true,
+			"requires": {
+				"fsevents": "2.3.2",
+				"playwright-core": "1.38.1"
+			}
+		},
 		"playwright-core": {
-			"version": "1.34.3",
-			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.34.3.tgz",
-			"integrity": "sha512-2pWd6G7OHKemc5x1r1rp8aQcpvDh7goMBZlJv6Co5vCNLVcQJdhxRL09SGaY6HcyHH9aT4tiynZabMofVasBYw==",
+			"version": "1.38.1",
+			"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.38.1.tgz",
+			"integrity": "sha512-tQqNFUKa3OfMf4b2jQ7aGLB8o9bS3bOY0yMEtldtC2+spf8QXG9zvXLTXUeRsoNuxEYMgLYR+NXfAa1rjKRcrg==",
 			"dev": true
 		},
 		"postcss": {
diff --git a/package.json b/package.json
index 94d10e3415..61cd95b6a5 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
 		"@babel/plugin-syntax-dynamic-import": "^7.8.3",
 		"@babel/preset-env": "7.20.2",
 		"@babel/preset-react": "^7.18.6",
-		"@playwright/test": "^1.34.3",
+		"@playwright/test": "^1.38.1",
 		"@sentry/webpack-plugin": "^1.20.0",
 		"@testing-library/jest-dom": "^5.16.5",
 		"@testing-library/react": "^14.0.0",
diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js
index 5955bd156a..9612da40a2 100644
--- a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js
+++ b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js
@@ -9,12 +9,12 @@ test("Topbar page exist", async ({ page }) => {
 		})
 		.click();
 	await expect(page.getByRole("link", { name: "Topbar" })).toHaveCount(
-		page.viewportSize().width < 991 ? 1 : 2,
+		page.viewportSize().width < 991 ? 1 : 2
 	);
 	await page.getByText("call_to_actionTopbararrow_forward").click();
 	await expect(page).toHaveTitle(/Topbar/);
 	await expect(
-		page.getByRole("heading", { name: "Topbar", exact: true, level: 1 }),
+		page.getByRole("heading", { name: "Topbar", exact: true, level: 1 })
 	).toBeVisible();
 });
 
@@ -44,7 +44,9 @@ let brand;
  * @param {string} tabBtnText text of the doc preview container tab
  */
 const clickDocPreviewTab = async (page, tabBtnText) => {
-	await page.getByRole("link", { name: tabBtnText, exact: true }).click();
+	await page
+		.getByRole("link", { name: tabBtnText, exact: true })
+		.click({ force: true });
 };
 
 test.describe("visual regressions topbar", () => {
@@ -56,14 +58,14 @@ test.describe("visual regressions topbar", () => {
 
 	test(`general UI closed`, async ({ page }) => {
 		await expect(
-			page.getByRole("heading", { name: "Topbar", exact: true }),
+			page.getByRole("heading", { name: "Topbar", exact: true })
 		).toBeVisible();
 
 		for (const topbarTab of topbarTabs) {
 			clickDocPreviewTab(page, topbarTab.btnText);
 
 			await expect(
-				page.locator(".component-preview-content > div"),
+				page.locator(".component-preview-content > div")
 			).toHaveScreenshot(`${brand}-topbar-${topbarTab.name}-closed.png`);
 		}
 	});
@@ -77,9 +79,9 @@ test.describe("visual regressions topbar", () => {
 
 			await page.locator("#demo-topbar").getByRole("link").nth(2).hover();
 			await expect(
-				page.locator("#demo-topbar").getByRole("navigation"),
+				page.locator("#demo-topbar").getByRole("navigation")
 			).toHaveScreenshot(
-				`${brand}-topbar-${topbarTab.name}-links-ui-feedbacks.png`,
+				`${brand}-topbar-${topbarTab.name}-links-ui-feedbacks.png`
 			);
 		}
 	});
@@ -96,7 +98,7 @@ test.describe("visual regressions topbar", () => {
 				: page.locator(".component-preview-content > div");
 
 			await expect(modalContainer).toHaveScreenshot(
-				`${brand}-topbar-${topbarTab.name}-opened.png`,
+				`${brand}-topbar-${topbarTab.name}-opened.png`
 			);
 		}
 	});
@@ -105,7 +107,7 @@ test.describe("visual regressions topbar", () => {
 		page,
 	}) => {
 		for (const topbarTab of topbarTabs.filter(
-			(tab) => tab.desktopTopbar && !tab.isLegacy,
+			(tab) => tab.desktopTopbar && !tab.isLegacy
 		)) {
 			clickDocPreviewTab(page, topbarTab.btnText);