diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts b/core/src/components/back-button/test/basic/back-button.e2e.ts
new file mode 100644
index 0000000000..e5484f7781
--- /dev/null
+++ b/core/src/components/back-button/test/basic/back-button.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('back-button: basic', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/back-button/test/basic`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`back-button-basic-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5134ccaf5b
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..916b79da37
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e452b99c52
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..78f1d449a3
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7b0b1ee97d
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..02c57698a5
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7649266619
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..183b8a2951
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8305b77ad5
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..03cb446d9f
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a8a832c69e
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..376eb24b37
Binary files /dev/null and b/core/src/components/back-button/test/basic/back-button.e2e.ts-snapshots/back-button-basic-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/test/basic/e2e.ts b/core/src/components/back-button/test/basic/e2e.ts
deleted file mode 100644
index e9167dd472..0000000000
--- a/core/src/components/back-button/test/basic/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('back-button: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/back-button/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('back-button: basic-rtl', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/back-button/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/back-button/test/standalone/e2e.ts b/core/src/components/back-button/test/standalone/e2e.ts
deleted file mode 100644
index b3bbf4ca2b..0000000000
--- a/core/src/components/back-button/test/standalone/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('back-button: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/back-button/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/back-button/test/standalone/index.html b/core/src/components/back-button/test/standalone/index.html
deleted file mode 100644
index b44bf4fe64..0000000000
--- a/core/src/components/back-button/test/standalone/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Back Button - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <h3>Default</h3>
-    <p>
-      <ion-back-button></ion-back-button>
-      <ion-back-button text="Back"></ion-back-button>
-      <ion-back-button icon="add"></ion-back-button>
-      <ion-back-button text="Text Only" icon=""></ion-back-button>
-      <ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
-    </p>
-
-    <h3>Colors</h3>
-    <p>
-      <ion-back-button color="primary"></ion-back-button>
-      <ion-back-button color="secondary"></ion-back-button>
-      <ion-back-button color="tertiary"></ion-back-button>
-      <ion-back-button color="success"></ion-back-button>
-      <ion-back-button color="warning"></ion-back-button>
-      <ion-back-button color="danger"></ion-back-button>
-      <ion-back-button color="light"></ion-back-button>
-      <ion-back-button color="medium"></ion-back-button>
-      <ion-back-button color="dark"></ion-back-button>
-    </p>
-    <p>
-      <ion-back-button color="primary" class="ion-activated"></ion-back-button>
-      <ion-back-button color="secondary" class="ion-activated"></ion-back-button>
-      <ion-back-button color="tertiary" class="ion-activated"></ion-back-button>
-      <ion-back-button color="success" class="ion-activated"></ion-back-button>
-      <ion-back-button color="warning" class="ion-activated"></ion-back-button>
-      <ion-back-button color="danger" class="ion-activated"></ion-back-button>
-      <ion-back-button color="light" class="ion-activated"></ion-back-button>
-      <ion-back-button color="medium" class="ion-activated"></ion-back-button>
-      <ion-back-button color="dark" class="ion-activated"></ion-back-button>
-    </p>
-
-    <h3>Custom</h3>
-
-    <!-- Custom Font -->
-    <ion-back-button class="wide" text="wide"></ion-back-button>
-    <ion-back-button class="large" text="large"></ion-back-button>
-    <ion-back-button class="round" text="round"></ion-back-button>
-
-    <!-- Custom Colors -->
-    <ion-back-button class="custom"></ion-back-button>
-    <ion-back-button class="custom ion-activated"></ion-back-button>
-    <ion-back-button color="secondary" class="custom"></ion-back-button>
-
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button></ion-back-button>
-        <ion-back-button class="ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Default</ion-title>
-    </ion-toolbar>
-
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button class="custom"></ion-back-button>
-        <ion-back-button class="custom ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Custom</ion-title>
-    </ion-toolbar>
-
-    <ion-toolbar>
-      <ion-buttons slot="start">
-        <ion-back-button color="secondary"></ion-back-button>
-        <ion-back-button color="secondary" class="ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Secondary</ion-title>
-    </ion-toolbar>
-
-    <ion-toolbar color="danger">
-      <ion-buttons slot="start">
-        <ion-back-button></ion-back-button>
-        <ion-back-button class="ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Danger</ion-title>
-    </ion-toolbar>
-
-    <ion-toolbar color="dark">
-      <ion-buttons slot="start">
-        <ion-back-button text="Back" icon=""></ion-back-button>
-        <ion-back-button text="Back" icon="" class="ion-activated"></ion-back-button>
-      </ion-buttons>
-      <ion-title>Dark</ion-title>
-    </ion-toolbar>
-
-    <style>
-      ion-back-button {
-        display: inline-block !important;
-      }
-
-      .wide {
-        --background: lightblue;
-
-        width: 200px;
-      }
-
-      .large {
-        font-size: 32px;
-        text-transform: capitalize;
-      }
-
-      .custom {
-        --background: lightpink;
-        --color: rgb(214, 60, 235);
-        --border-radius: 10px;
-        --padding-start: 10px;
-        --padding-end: 10px;
-      }
-    </style>
-  </body>
-</html>
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts b/core/src/components/back-button/test/toolbar/back-button.e2e.ts
new file mode 100644
index 0000000000..93aed0f02e
--- /dev/null
+++ b/core/src/components/back-button/test/toolbar/back-button.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('back-button: toolbar', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/back-button/test/toolbar`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`back-button-toolbar-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..73af2be291
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d96c1f5530
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f0e3ec1a2d
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..58ceba32b9
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d8a3d1c18e
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Safari-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..783b5273f1
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Chrome-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..71e82d3343
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Firefox-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7109f14d5c
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Safari-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c23f493148
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Chrome-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2af7d7f779
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Firefox-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8d0735d7f0
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Safari-linux.png b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2f94d12f06
Binary files /dev/null and b/core/src/components/back-button/test/toolbar/back-button.e2e.ts-snapshots/back-button-toolbar-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/back-button/test/toolbar/e2e.ts b/core/src/components/back-button/test/toolbar/e2e.ts
deleted file mode 100644
index 3a5dbf2e4d..0000000000
--- a/core/src/components/back-button/test/toolbar/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('back-button: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/back-button/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});