diff --git a/core/src/components/toggle/test/basic/e2e.ts b/core/src/components/toggle/test/basic/e2e.ts
deleted file mode 100644
index 709496539f..0000000000
--- a/core/src/components/toggle/test/basic/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('toggle:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toggle/test/basic/index.html b/core/src/components/toggle/test/basic/index.html
index 991c385661..e2a7eb260f 100644
--- a/core/src/components/toggle/test/basic/index.html
+++ b/core/src/components/toggle/test/basic/index.html
@@ -27,6 +27,11 @@
 
       <ion-content id="content">
         <ion-list>
+          <ion-item>
+            <ion-label>Orange</ion-label>
+            <ion-toggle id="orange" slot="start" name="orange"></ion-toggle>
+          </ion-item>
+
           <ion-item>
             <ion-label>Apple</ion-label>
             <ion-toggle slot="start" name="apple" checked></ion-toggle>
@@ -44,7 +49,7 @@
 
           <ion-item>
             <ion-label>Grape, checked, disabled</ion-label>
-            <ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
+            <ion-toggle slot="start" id="grapeChecked" value="grape" name="grape" checked disabled></ion-toggle>
           </ion-item>
 
           <ion-item>
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts b/core/src/components/toggle/test/basic/toggle.e2e.ts
new file mode 100644
index 0000000000..6900e39e76
--- /dev/null
+++ b/core/src/components/toggle/test/basic/toggle.e2e.ts
@@ -0,0 +1,95 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: basic', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/basic`);
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-diff-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should have proper class and aria role when checked', async ({ page }) => {
+    const toggle = page.locator('#orange');
+
+    expect(toggle).not.toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(toggle).toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(toggle).not.toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+  });
+
+  test('should fire change event with detail', async ({ page }) => {
+    const toggle = page.locator('#orange');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: true,
+      value: 'on',
+    });
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: false,
+      value: 'on',
+    });
+  });
+
+  test('should fire change event if checked prop is changed directly', async ({ page }) => {
+    const toggle = page.locator('#orange');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    await toggle.evaluate((el: HTMLIonToggleElement) => (el.checked = true));
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEvent();
+  });
+
+  test('should pass properties down to hidden input', async ({ page }) => {
+    const toggle = page.locator('#grapeChecked');
+
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveJSProperty('value', 'grape');
+    expect(toggle).toHaveJSProperty('name', 'grape');
+
+    const hiddenInput = page.locator('#grapeChecked input[type=hidden]');
+
+    expect(hiddenInput).toBeDisabled();
+    expect(hiddenInput).toHaveJSProperty('value', 'grape');
+    expect(hiddenInput).toHaveJSProperty('name', 'grape');
+
+    await toggle.evaluate((el: HTMLIonToggleElement) => {
+      el.disabled = false;
+      el.checked = false;
+      el.value = 'new-value';
+      el.name = 'new-name';
+    });
+
+    await page.waitForChanges();
+
+    expect(hiddenInput).not.toBeDisabled();
+    expect(hiddenInput).toHaveJSProperty('name', 'new-name');
+
+    // shouldn't have a value because it's unchecked
+    // note: using toHaveJSProperty to check empty string triggers error for some reason
+    const value = await hiddenInput.evaluate((el: HTMLInputElement) => el.value);
+    expect(value).toBe('');
+  });
+});
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..caf063924a
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ae3796619b
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f2933f4a34
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9a27ffa051
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..09b1476551
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..af82c38ccb
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..148d59497b
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2cedd0c3a7
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..11e15ca2ff
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..73bd17c7de
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d3c1f28317
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4b2dd4f8a4
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/e2e.ts b/core/src/components/toggle/test/e2e.ts
deleted file mode 100644
index 374a628402..0000000000
--- a/core/src/components/toggle/test/e2e.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('toggle', () => {
-  it('should create standalone, unchecked by default', async () => {
-    // create a new e2e test page
-    const page = await newE2EPage();
-
-    // set the page content
-    await page.setContent(`
-      <ion-toggle class="some-class"></ion-toggle>
-    `);
-
-    // add an event spy to the page
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    // find the elemnt in the page
-    const toggle = await page.find('ion-toggle');
-
-    // check it has the expected css classes
-    expect(toggle).toHaveClass('some-class');
-    expect(toggle).toHaveClass('hydrated');
-
-    // toggle should not have checked css
-    expect(toggle).not.toHaveClass('toggle-checked');
-
-    // set checked property
-    toggle.setProperty('checked', true);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // make sure the property was updated
-    const checkedValue1 = await toggle.getProperty('checked');
-    expect(checkedValue1).toBe(true);
-
-    // toggle should have checked css
-    expect(toggle).toHaveClass('toggle-checked');
-
-    // make sure we received the correct event detail
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: true,
-      value: 'on',
-    });
-
-    // set unchecked
-    toggle.setProperty('checked', false);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // make sure the property was updated
-    const checkedValue2 = await toggle.getProperty('checked');
-    expect(checkedValue2).toBe(false);
-
-    // toggle should not be checked
-    expect(toggle).not.toHaveClass('toggle-checked');
-
-    // we should have received the event two times now
-    expect(ionChange).toHaveReceivedEventTimes(2);
-
-    // make sure we received the correct event detail
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: false,
-      value: 'on',
-    });
-  });
-
-  it('should create standalone, checked by default', async () => {
-    const page = await newE2EPage({
-      html: `
-      <ion-toggle checked></ion-toggle>
-    `,
-    });
-
-    // find the elemnt in the page
-    const toggle = await page.find('ion-toggle');
-
-    // spy on the ionChange event
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    // check aria
-    expect(toggle).toEqualAttribute('aria-checked', 'true');
-
-    // find the hidden input in the light dom
-    const hiddenInput = await page.find('ion-toggle input[type=hidden]');
-
-    // hidden input property should have value
-    expect(hiddenInput).toEqualAttribute('value', 'on');
-
-    // hidden in put should have aux-input class
-    expect(hiddenInput).toHaveClass('aux-input');
-
-    // set checked true again, no actual change
-    toggle.setProperty('checked', true);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // shouldn't have fired the ionChange event cuz it didn't change
-    expect(ionChange).not.toHaveReceivedEvent();
-
-    // uncheck
-    toggle.setProperty('checked', false);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // toggle should not be checked
-    const checkedValue2 = await toggle.getProperty('checked');
-    expect(checkedValue2).toBe(false);
-
-    // hidden input property should no value
-    expect(toggle).toEqualAttribute('aria-checked', 'false');
-
-    expect(ionChange).toHaveReceivedEventTimes(1);
-
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: false,
-      value: 'on',
-    });
-  });
-
-  it('should pass properties down to hidden input', async () => {
-    const page = await newE2EPage({
-      html: `
-      <ion-toggle disabled checked value="coding" name="primary"></ion-toggle>
-    `,
-    });
-
-    const toggle = await page.find('ion-toggle');
-
-    expect(await toggle.getProperty('disabled')).toBe(true);
-    expect(await toggle.getProperty('checked')).toBe(true);
-    expect(await toggle.getProperty('value')).toBe('coding');
-    expect(await toggle.getProperty('name')).toBe('primary');
-
-    const hiddenInput = await page.find('ion-toggle input[type=hidden]');
-
-    expect(await hiddenInput.getProperty('disabled')).toBe(true);
-    expect(await hiddenInput.getProperty('value')).toBe('coding');
-    expect(await hiddenInput.getProperty('name')).toBe('primary');
-
-    toggle.setProperty('disabled', false);
-    toggle.setProperty('checked', false);
-    toggle.setProperty('value', 'design');
-    toggle.setProperty('name', 'secondary');
-
-    await page.waitForChanges();
-
-    expect(await hiddenInput.getProperty('disabled')).toBe(false);
-    expect(await hiddenInput.getProperty('value')).toBe('');
-    expect(await hiddenInput.getProperty('name')).toBe('secondary');
-  });
-});
diff --git a/core/src/components/toggle/test/rtl/e2e.ts b/core/src/components/toggle/test/rtl/e2e.ts
deleted file mode 100644
index 4c250be9eb..0000000000
--- a/core/src/components/toggle/test/rtl/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: RTL', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/rtl?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toggle/test/rtl/index.html b/core/src/components/toggle/test/rtl/index.html
deleted file mode 100644
index be3d4cda93..0000000000
--- a/core/src/components/toggle/test/rtl/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Toggle - RTL</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/ionic.bundle.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>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Toggle - RTL</ion-title>
-          <ion-buttons slot="primary">
-            <ion-toggle aria-label="Toggle"></ion-toggle>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-list>
-          <ion-item>
-            <ion-label>Toggle</ion-label>
-            <ion-toggle dir="rtl" slot="start" name="item-1" checked></ion-toggle>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/core/src/components/toggle/test/sizes/e2e.ts b/core/src/components/toggle/test/sizes/e2e.ts
deleted file mode 100644
index 24131929bc..0000000000
--- a/core/src/components/toggle/test/sizes/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: sizes', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/sizes?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('toggle:rtl: sizes', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/sizes?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts b/core/src/components/toggle/test/sizes/toggle.e2e.ts
new file mode 100644
index 0000000000..0069639637
--- /dev/null
+++ b/core/src/components/toggle/test/sizes/toggle.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: sizes', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/sizes`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-sizes-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..fb7da8921b
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..77bf55d597
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..224f8c721c
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1b001d0b93
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..56cf99d251
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4015c70615
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..211126cbb5
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4415d19ece
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..46abc25011
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5ceff35afa
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..175e334bf5
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4037daed0d
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/e2e.ts b/core/src/components/toggle/test/standalone/e2e.ts
deleted file mode 100644
index 8ff9df8747..0000000000
--- a/core/src/components/toggle/test/standalone/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts b/core/src/components/toggle/test/standalone/toggle.e2e.ts
new file mode 100644
index 0000000000..9af6cd5785
--- /dev/null
+++ b/core/src/components/toggle/test/standalone/toggle.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: standalone', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/standalone`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-standalone-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..26a3b4d8ae
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1e5a80a658
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..af8d93909c
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a158bf9c59
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6e8305a717
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4f4eb46904
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..210e01775b
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b9af1deaa8
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d2aa81013c
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8cd23579b4
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d521302bf2
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c46251fd87
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Safari-linux.png differ