@ionic/core 7.3.2 → 7.3.3-dev.11693533652.1969cc78

package/dist/collection/components/checkbox/test/label/checkbox.e2e.js

@@ -19,21 +19,21 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-checkbox label-placement="start" justify="start" style="width: 200px">Label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-start-justify-start`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-start`));
       });
       test('should render an end justification with label in the start position', async ({ page }) => {
         await page.setContent(`
            <ion-checkbox label-placement="start" justify="end" style="width: 200px">Label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-start-justify-end`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-end`));
       });
       test('should render a space between justification with label in the start position', async ({ page }) => {
         await page.setContent(`
            <ion-checkbox label-placement="start" justify="space-between" style="width: 200px">Label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-start-justify-space-between`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-space-between`));
       });
       test('should truncate long labels with ellipses', async ({ page }) => {
         await page.setContent(`
@@ -42,7 +42,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-long-label`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-long-label`));
       });
     });
     test.describe('checkbox: end placement', () => {
@@ -51,21 +51,21 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-checkbox label-placement="end" justify="start" style="width: 200px">Label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-end-justify-start`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-end-justify-start`));
       });
       test('should render an end justification with label in the end position', async ({ page }) => {
         await page.setContent(`
            <ion-checkbox label-placement="end" justify="end" style="width: 200px">Label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-end-justify-end`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-end-justify-end`));
       });
       test('should render a space between justification with label in the end position', async ({ page }) => {
         await page.setContent(`
            <ion-checkbox label-placement="end" justify="space-between" style="width: 200px">Label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-end-justify-space-between`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-end-justify-space-between`));
       });
     });
     test.describe('checkbox: fixed placement', () => {
@@ -74,21 +74,21 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-checkbox label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-fixed-justify-start`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-fixed-justify-start`));
       });
       test('should render an end justification with label in the fixed position', async ({ page }) => {
         await page.setContent(`
            <ion-checkbox label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-fixed-justify-end`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-fixed-justify-end`));
       });
       test('should render a space between justification with label in the fixed position', async ({ page }) => {
         await page.setContent(`
            <ion-checkbox label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-checkbox>
          `, config);
         const checkbox = page.locator('ion-checkbox');
-        expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-label-fixed-justify-space-between`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-fixed-justify-space-between`));
       });
     });
   });

package/dist/collection/components/checkbox/test/legacy/basic/checkbox.e2e.js

@@ -8,7 +8,7 @@ configs().forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/checkbox/test/legacy/basic`, config);
       await page.setIonViewport();
-      expect(await page.screenshot()).toMatchSnapshot(screenshot(`checkbox-legacy-basic`));
+      await expect(page).toHaveScreenshot(screenshot(`checkbox-legacy-basic`));
     });
   });
 });

package/dist/collection/components/checkbox/test/legacy/indeterminate/checkbox.e2e.js

@@ -8,7 +8,7 @@ configs().forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/checkbox/test/legacy/indeterminate`, config);
       const content = page.locator('#checkboxes');
-      expect(await content.screenshot()).toMatchSnapshot(screenshot(`checkbox-legacy-indeterminate`));
+      await expect(content).toHaveScreenshot(screenshot(`checkbox-legacy-indeterminate`));
     });
   });
 });

package/dist/collection/components/checkbox/test/states/checkbox.e2e.js

@@ -10,28 +10,28 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           <ion-checkbox disabled>Label</ion-checkbox>
       `, config);
       const checkbox = page.locator('ion-checkbox');
-      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-disabled`));
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-disabled`));
     });
     test('should render disabled checked checkbox correctly', async ({ page }) => {
       await page.setContent(`
           <ion-checkbox checked disabled>Label</ion-checkbox>
       `, config);
       const checkbox = page.locator('ion-checkbox');
-      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked-disabled`));
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-checked-disabled`));
     });
     test('should render checked checkbox correctly', async ({ page }) => {
       await page.setContent(`
           <ion-checkbox checked>Label</ion-checkbox>
       `, config);
       const checkbox = page.locator('ion-checkbox');
-      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked`));
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-checked`));
     });
     test('should render unchecked checkbox correctly', async ({ page }) => {
       await page.setContent(`
           <ion-checkbox>Label</ion-checkbox>
       `, config);
       const checkbox = page.locator('ion-checkbox');
-      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-unchecked`));
+      await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-unchecked`));
     });
   });
 });

package/dist/collection/components/datetime/test/custom/datetime.e2e.js

@@ -12,13 +12,6 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const datetime = page.locator('#custom-wheel');
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-wheel`));
     });
-    test('should allow styling month/year picker in grid style datetimes', async ({ page }) => {
-      const datetime = page.locator('#custom-grid');
-      const monthYearToggle = datetime.locator('.calendar-month-year');
-      await monthYearToggle.click();
-      await page.waitForChanges();
-      await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-month-year`));
-    });
     test('should allow styling time picker in grid style datetimes', async ({ page }) => {
       const timeButton = page.locator('ion-datetime .time-body');
       const popover = page.locator('.popover-viewport');

package/dist/collection/components/datetime/test/presentation/datetime.e2e.js

@@ -4,23 +4,39 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test(title('should not have visual regressions'), async ({ page }) => {
-    await page.goto(`/src/components/datetime/test/presentation`, config);
-    await page.waitForSelector('.datetime-ready');
-    const datetime = page.locator('ion-datetime');
-    const compares = [];
-    const presentations = ['date-time', 'time-date', 'time', 'date', 'month-year', 'month', 'year'];
-    for (const presentation of presentations) {
-      await page.locator('select').selectOption(presentation);
-      await page.waitForChanges();
-      compares.push({
-        presentation,
-        screenshot: datetime,
-      });
-    }
-    for (const compare of compares) {
-      await expect(compare.screenshot).toHaveScreenshot(screenshot(`datetime-presentation-${compare.presentation}-diff`));
-    }
+  test.describe(title('datetime: presentation rendering'), () => {
+    let presentationFixture;
+    test.beforeEach(({ page }) => {
+      presentationFixture = new DatetimePresentationFixture(page);
+    });
+    test('should not have visual regressions with date-time presentation', async () => {
+      await presentationFixture.goto('date-time', config);
+      await presentationFixture.screenshot('datetime-presentation-date-time-diff', screenshot);
+    });
+    test('should not have visual regressions with time-date presentation', async () => {
+      await presentationFixture.goto('time-date', config);
+      await presentationFixture.screenshot('datetime-presentation-time-date-diff', screenshot);
+    });
+    test('should not have visual regressions with time presentation', async () => {
+      await presentationFixture.goto('time', config);
+      await presentationFixture.screenshot('datetime-presentation-time-diff', screenshot);
+    });
+    test('should not have visual regressions with date presentation', async () => {
+      await presentationFixture.goto('date', config);
+      await presentationFixture.screenshot('datetime-presentation-date-diff', screenshot);
+    });
+    test('should not have visual regressions with month-year presentation', async () => {
+      await presentationFixture.goto('month-year', config);
+      await presentationFixture.screenshot('datetime-presentation-month-year-diff', screenshot);
+    });
+    test('should not have visual regressions with month presentation', async () => {
+      await presentationFixture.goto('month', config);
+      await presentationFixture.screenshot('datetime-presentation-month-diff', screenshot);
+    });
+    test('should not have visual regressions with year presentation', async () => {
+      await presentationFixture.goto('year', config);
+      await presentationFixture.screenshot('datetime-presentation-year-diff', screenshot);
+    });
   });
 });
 /**
@@ -112,6 +128,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+class DatetimePresentationFixture {
+  constructor(page) {
+    this.page = page;
+  }
+  async goto(presentation, config) {
+    await this.page.setContent(`
+      <ion-datetime presentation="${presentation}" value="2010-03-10T13:00:00"></ion-datetime>
+    `, config);
+    await this.page.waitForSelector('.datetime-ready');
+    this.datetime = this.page.locator('ion-datetime');
+  }
+  async screenshot(name, screenshotFn) {
+    await expect(this.datetime).toHaveScreenshot(screenshotFn(name));
+  }
+}
 class TimePickerFixture {
   constructor(page) {
     this.page = page;

package/dist/collection/components/input/test/bottom-content/input.e2e.js

@@ -10,21 +10,21 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-input value="hi@ionic.io" label="Email" helper-text="Enter an email" maxlength="20" counter="true"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-full-bottom-no-fill`));
+      await expect(input).toHaveScreenshot(screenshot(`input-full-bottom-no-fill`));
     });
     test('entire input component should render correctly with solid fill', async ({ page }) => {
       await page.setContent(`
         <ion-input fill="solid" value="hi@ionic.io" label="Email" helper-text="Enter an email" maxlength="20" counter="true"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-full-bottom-solid`));
+      await expect(input).toHaveScreenshot(screenshot(`input-full-bottom-solid`));
     });
     test('entire input component should render correctly with outline fill', async ({ page }) => {
       await page.setContent(`
         <ion-input fill="outline" value="hi@ionic.io" label="Email" helper-text="Enter an email" maxlength="20" counter="true"></ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-full-bottom-outline`));
+      await expect(input).toHaveScreenshot(screenshot(`input-full-bottom-outline`));
     });
   });
 });
@@ -72,7 +72,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-input class="ion-invalid ion-touched custom-input" label="my label" error-text="my error"></ion-input>
         `, config);
         const errorText = page.locator('ion-input .error-text');
-        expect(await errorText.screenshot()).toMatchSnapshot(screenshot(`input-error-custom-color`));
+        await expect(errorText).toHaveScreenshot(screenshot(`input-error-custom-color`));
       });
     });
     test.describe('input: hint text rendering', () => {
@@ -80,12 +80,12 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         test('should not have visual regressions when rendering helper text', async ({ page }) => {
           await page.setContent(`<ion-input helper-text="my helper" label="my input"></ion-input>`, config);
           const bottomEl = page.locator('ion-input .input-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`input-bottom-content-helper`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`input-bottom-content-helper`));
         });
         test('should not have visual regressions when rendering error text', async ({ page }) => {
           await page.setContent(`<ion-input class="ion-invalid ion-touched" error-text="my helper" label="my input"></ion-input>`, config);
           const bottomEl = page.locator('ion-input .input-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`input-bottom-content-error`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`input-bottom-content-error`));
         });
       });
     });
@@ -137,7 +137,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         test('should not have visual regressions when rendering counter', async ({ page }) => {
           await page.setContent(`<ion-input counter="true" maxlength="20" label="my input"></ion-input>`, config);
           const bottomEl = page.locator('ion-input .input-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`input-bottom-content-counter`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`input-bottom-content-counter`));
         });
       });
     });

package/dist/collection/components/input/test/card/input.e2e.js

@@ -16,7 +16,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-card>
       `, config);
       const card = page.locator('ion-card');
-      expect(await card.screenshot()).toMatchSnapshot(screenshot(`input-card`));
+      await expect(card).toHaveScreenshot(screenshot(`input-card`));
     });
   });
 });

package/dist/collection/components/input/test/color/input.e2e.js

@@ -21,35 +21,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-input class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-color-start`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-color-end`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-color-fixed`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-color-floating`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-color-stacked`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-color-stacked`));
       });
     });
     test.describe('input: fill solid', () => {
@@ -58,35 +58,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-input fill="solid" class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-color-start`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input fill="solid" class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-color-end`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input fill="solid" class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-color-fixed`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input fill="solid" class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-color-floating`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input fill="solid" class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-color-stacked`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-color-stacked`));
       });
     });
     test.describe('input: fill outline', () => {
@@ -95,35 +95,35 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-input fill="outline" class="has-focus" color="danger" label="Email" label-placement="start" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-color-start`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-color-start`));
       });
       test('should set label and highlight color on focus with end label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input fill="outline" class="has-focus" color="danger" label="Email" label-placement="end" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-color-end`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-color-end`));
       });
       test('should set label and highlight color on focus with fixed label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input fill="outline" class="has-focus" color="danger" label="Email" label-placement="fixed" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-color-fixed`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-color-fixed`));
       });
       test('should set label and highlight color on focus with floating label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input fill="outline" class="has-focus" color="danger" label="Email" label-placement="floating" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-color-floating`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-color-floating`));
       });
       test('should set label and highlight color on focus with stacked label placement', async ({ page }) => {
         await page.setContent(`
           <ion-input fill="outline" class="has-focus" color="danger" label="Email" label-placement="stacked" value="hi@ionic.io"></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-color-stacked`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-color-stacked`));
       });
     });
   });

package/dist/collection/components/input/test/fill/input.e2e.js

@@ -21,7 +21,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-solid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-solid`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -36,7 +36,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-solid-label-floating`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-solid-label-floating`));
       });
       test('should not have visual regressions with shaped solid', async ({ page }) => {
         await page.setContent(`
@@ -51,7 +51,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-shaped-solid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-solid`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -75,7 +75,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-shaped-solid-custom`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-solid-custom`));
       });
     });
     test.describe('input: fill outline', () => {
@@ -91,7 +91,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-outline`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -106,7 +106,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-label-floating`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-label-floating`));
       });
       test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(`
@@ -121,7 +121,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-shaped-outline`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-outline`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -145,7 +145,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-shaped-outline-custom`));
+        await expect(input).toHaveScreenshot(screenshot(`input-fill-shaped-outline-custom`));
       });
     });
   });
@@ -168,7 +168,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-input>
       `, config);
       const input = page.locator('ion-input');
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-slotted-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-slotted-label`));
     });
     test('should render the notch correctly with a slotted label after the input was originally hidden', async ({ page, }) => {
       await page.setContent(`
@@ -188,7 +188,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       `, config);
       const input = page.locator('ion-input');
       await input.evaluate((el) => el.style.removeProperty('display'));
-      expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-fill-outline-hidden-slotted-label`));
+      await expect(input).toHaveScreenshot(screenshot(`input-fill-outline-hidden-slotted-label`));
     });
   });
   test.describe(title('input: notch cutout'), () => {

package/dist/collection/components/input/test/highlight/input.e2e.js

@@ -19,7 +19,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-valid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -34,7 +34,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-invalid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -49,7 +49,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-no-fill-focus`));
+        await expect(input).toHaveScreenshot(screenshot(`input-no-fill-focus`));
       });
     });
     test.describe('input: solid', () => {
@@ -67,7 +67,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-valid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -83,7 +83,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-invalid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -99,7 +99,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-solid-focus`));
+        await expect(input).toHaveScreenshot(screenshot(`input-solid-focus`));
       });
     });
     test.describe('input: outline', () => {
@@ -117,7 +117,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-valid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -133,7 +133,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-invalid`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -149,7 +149,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-input>
         `, config);
         const input = page.locator('ion-input');
-        expect(await input.screenshot()).toMatchSnapshot(screenshot(`input-outline-focus`));
+        await expect(input).toHaveScreenshot(screenshot(`input-outline-focus`));
       });
     });
   });

package/dist/collection/components/input/test/item/input.e2e.js

@@ -20,7 +20,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`input-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`input-list-no-fill`));
     });
     test('should render correctly in inset list with no fill', async ({ page }) => {
       await page.setContent(`
@@ -37,7 +37,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`input-inset-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`input-inset-list-no-fill`));
     });
   });
 });