diff --git a/core/src/components/note/test/basic/e2e.ts b/core/src/components/note/test/basic/e2e.ts
deleted file mode 100644
index b9746a95fd..0000000000
--- a/core/src/components/note/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('note: basic', async () => {
- const page = await newE2EPage({
- url: '/src/components/note/test/basic?ionic:_testing=true',
- });
-
- const compare = await page.compareScreenshot();
- expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/note/test/basic/note.e2e.ts b/core/src/components/note/test/basic/note.e2e.ts
new file mode 100644
index 0000000000..f7c77bdbcc
--- /dev/null
+++ b/core/src/components/note/test/basic/note.e2e.ts
@@ -0,0 +1,75 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('note: rendering', () => {
+ test.beforeEach(({ skip }) => {
+ skip.rtl('Note has no custom RTL logic');
+ });
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(`
+ 99
+ `);
+ const note = page.locator('ion-note');
+ expect(await note.screenshot()).toMatchSnapshot(`note-diff-${page.getSnapshotSettings()}.png`);
+ });
+
+ test('should render color correctly', async ({ page }) => {
+ await page.setContent(`
+ 99
+ `);
+ const note = page.locator('ion-note');
+ expect(await note.screenshot()).toMatchSnapshot(`note-color-${page.getSnapshotSettings()}.png`);
+ });
+});
+
+test.describe('note: item', () => {
+ test.beforeEach(({ skip }) => {
+ skip.mode('ios', 'Only MD ion-item has ion-note specific logic');
+ });
+ test('should not have visual regressions when in the start slot of an item', async ({ page }) => {
+ await page.setContent(`
+
+ Label
+ Start Note
+
+ `);
+ const item = page.locator('ion-item');
+ expect(await item.screenshot()).toMatchSnapshot(`note-item-start-${page.getSnapshotSettings()}.png`);
+ });
+
+ test('should not have visual regressions when in the end slot of an item', async ({ page }) => {
+ await page.setContent(`
+
+ Label
+ End Note
+
+ `);
+ const item = page.locator('ion-item');
+ expect(await item.screenshot()).toMatchSnapshot(`note-item-end-${page.getSnapshotSettings()}.png`);
+ });
+});
+
+test.describe('note: item-divider', () => {
+ test.beforeEach(({ skip }) => {
+ skip.mode('ios', 'Only MD ion-item-divider has ion-note specific logic');
+ });
+ test('should not have visual regressions when in the start slot of an item-divider', async ({ page }) => {
+ await page.setContent(`
+
+ Start Note
+
+ `);
+ const itemDivider = page.locator('ion-item-divider');
+ expect(await itemDivider.screenshot()).toMatchSnapshot(`note-item-divider-start-${page.getSnapshotSettings()}.png`);
+ });
+
+ test('should not have visual regressions when in the end slot of an item-divider', async ({ page }) => {
+ await page.setContent(`
+
+ End Note
+
+ `);
+ const itemDivider = page.locator('ion-item-divider');
+ expect(await itemDivider.screenshot()).toMatchSnapshot(`note-item-divider-end-${page.getSnapshotSettings()}.png`);
+ });
+});
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..561837d4ff
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f9581e44bc
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9610f33175
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b9edcee127
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..630a83d196
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..05f0946611
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5cb83f13e5
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a68fb0a5bf
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c5c21e6f18
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..25a696f4fd
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3406a75f2d
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..096f240178
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bc64cad834
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b12c921a75
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9897d31ea6
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9649767c45
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..580cf3c418
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..dcdc54d298
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..18d8412fa0
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..69e87a775f
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..6305233c81
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..00acbd9c16
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8d4f53bffa
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1b645e6aab
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-divider-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..fd295c39de
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..278992f5f3
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c8e4190ace
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..0f30db3dbc
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..78a2293099
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3bf1f6269a
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-end-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c7653eabf2
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e6770db580
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..07010e8eb1
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a9d9293890
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4abd78183d
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..30a530766a
Binary files /dev/null and b/core/src/components/note/test/basic/note.e2e.ts-snapshots/note-item-start-md-rtl-Mobile-Safari-linux.png differ