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

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

@@ -20,7 +20,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="start" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-start-justify-start`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-start-justify-start`));
       });
       test('should render an end justification with label in the start position', async ({ page }) => {
         await page.setContent(`
@@ -28,7 +28,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="end" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-start-justify-end`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-start-justify-end`));
       });
       test('should render a space between justification with label in the start position', async ({ page }) => {
         await page.setContent(`
@@ -36,7 +36,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="space-between" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-start-justify-space-between`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-start-justify-space-between`));
       });
     });
     test.describe('select: end placement', () => {
@@ -46,7 +46,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="start" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-end-justify-start`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-end-justify-start`));
       });
       test('should render an end justification with label in the end position', async ({ page }) => {
         await page.setContent(`
@@ -54,7 +54,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="end" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-end-justify-end`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-end-justify-end`));
       });
       test('should render a space between justification with label in the end position', async ({ page }) => {
         await page.setContent(`
@@ -62,7 +62,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="space-between" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-end-justify-space-between`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-end-justify-space-between`));
       });
     });
     test.describe('select: fixed placement', () => {
@@ -72,7 +72,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="start" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-fixed-justify-start`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-fixed-justify-start`));
       });
       test('should render an end justification with label in the fixed position', async ({ page }) => {
         await page.setContent(`
@@ -80,7 +80,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="end" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-fixed-justify-end`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-fixed-justify-end`));
       });
       test('should render a space between justification with label in the fixed position', async ({ page }) => {
         await page.setContent(`
@@ -88,7 +88,7 @@ configs().forEach(({ title, screenshot, config }) => {
            <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="space-between" style="width: 200px"></ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-fixed-justify-space-between`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-fixed-justify-space-between`));
       });
     });
     test.describe('select: floating placement', () => {
@@ -99,7 +99,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-floating-value`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-floating-value`));
       });
       test('label should appear on top of the select when there is no value', async ({ page }) => {
         await page.setContent(`
@@ -108,7 +108,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-floating-no-value`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-floating-no-value`));
       });
       test('label should appear on top of the select when there is a placeholder and no value', async ({ page }) => {
         await page.setContent(`
@@ -117,7 +117,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-floating-no-value-placeholder`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-floating-no-value-placeholder`));
       });
       test('label should appear on top of the select when the select is expanded', async ({ page }) => {
         await page.setContent(`
@@ -126,7 +126,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-label-floating-expanded`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-floating-expanded`));
       });
       test('long text should truncate', async ({ page }) => {
         await page.setContent(`
@@ -135,7 +135,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-label-floating-long-text`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-floating-long-text`));
       });
     });
     test.describe('select: stacked placement', () => {
@@ -146,7 +146,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-stacked-value`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-value`));
       });
       test('label should appear above the select when there is no value', async ({ page }) => {
         await page.setContent(`
@@ -155,7 +155,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-stacked-no-value`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-no-value`));
       });
       test('label should appear on top of the select when the select is expanded', async ({ page }) => {
         await page.setContent(`
@@ -164,7 +164,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-label-stacked-expanded`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-expanded`));
       });
       test('long text should truncate', async ({ page }) => {
         await page.setContent(`
@@ -173,7 +173,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-select>
          `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-label-stacked-long-text`));
+        await expect(select).toHaveScreenshot(screenshot(`select-label-stacked-long-text`));
       });
     });
   });
@@ -185,7 +185,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             <ion-select label="Label Label Label Label Label" placeholder="Select an Item"></ion-select>
           `, config);
       const select = page.locator('ion-select');
-      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-truncate`));
+      await expect(select).toHaveScreenshot(screenshot(`select-label-truncate`));
     });
     test('label slot should be truncated with ellipses', async ({ page }) => {
       await page.setContent(`
@@ -194,7 +194,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
             </ion-select>
           `, config);
       const select = page.locator('ion-select');
-      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-label-slot-truncate`));
+      await expect(select).toHaveScreenshot(screenshot(`select-label-slot-truncate`));
     });
   });
 });

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

@@ -10,7 +10,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-select label="Favorite Fruit" placeholder="Select a fruit"></ion-select>
       `, config);
       const select = page.locator('ion-select');
-      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-placeholder`));
+      await expect(select).toHaveScreenshot(screenshot(`select-placeholder`));
     });
     test('should render enabled select with a value correctly', async ({ page }) => {
       await page.setContent(`
@@ -19,14 +19,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-select>
       `, config);
       const select = page.locator('ion-select');
-      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-value`));
+      await expect(select).toHaveScreenshot(screenshot(`select-value`));
     });
     test('should render disabled select with a placeholder correctly', async ({ page }) => {
       await page.setContent(`
         <ion-select label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
       `, config);
       const select = page.locator('ion-select');
-      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-disabled-placeholder`));
+      await expect(select).toHaveScreenshot(screenshot(`select-disabled-placeholder`));
     });
     test('should render disabled select with a value correctly', async ({ page }) => {
       await page.setContent(`
@@ -35,7 +35,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-select>
       `, config);
       const select = page.locator('ion-select');
-      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-disabled-value`));
+      await expect(select).toHaveScreenshot(screenshot(`select-disabled-value`));
     });
   });
 });

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

@@ -41,7 +41,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-textarea class="ion-invalid ion-touched custom-textarea" label="my label" error-text="my error"></ion-textarea>
         `, config);
         const errorText = page.locator('ion-textarea .error-text');
-        expect(await errorText.screenshot()).toMatchSnapshot(screenshot(`textarea-error-custom-color`));
+        await expect(errorText).toHaveScreenshot(screenshot(`textarea-error-custom-color`));
       });
     });
     test.describe('textarea: hint text rendering', () => {
@@ -49,12 +49,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-textarea helper-text="my helper" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-helper`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-helper`));
         });
         test('should not have visual regressions when rendering error text', async ({ page }) => {
           await page.setContent(`<ion-textarea class="ion-invalid ion-touched" error-text="my helper" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-error`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-error`));
         });
       });
     });
@@ -102,17 +102,17 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         test('should not have visual regressions when rendering counter', async ({ page }) => {
           await page.setContent(`<ion-textarea counter="true" maxlength="20" label="my textarea"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter`));
         });
         test('should not have visual regressions when rendering counter with helper text', async ({ page }) => {
           await page.setContent(`<ion-textarea label="my textarea" counter="true" maxlength="20" helper-text="my helper"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter-helper-text`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter-helper-text`));
         });
         test('should not have visual regressions when rendering counter with error text', async ({ page }) => {
           await page.setContent(`<ion-textarea class="ion-invalid ion-touched" label="my textarea" counter="true" maxlength="20" error-text="my error"></ion-textarea>`, config);
           const bottomEl = page.locator('ion-textarea .textarea-bottom');
-          expect(await bottomEl.screenshot()).toMatchSnapshot(screenshot(`textarea-bottom-content-counter-error-text`));
+          await expect(bottomEl).toHaveScreenshot(screenshot(`textarea-bottom-content-counter-error-text`));
         });
       });
     });

package/dist/collection/components/textarea/test/card/textarea.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(`textarea-card`));
+      await expect(card).toHaveScreenshot(screenshot(`textarea-card`));
     });
   });
 });

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

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

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

@@ -21,7 +21,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-solid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-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-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-solid-label-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-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-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-solid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-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-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-solid-custom`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-solid-custom`));
       });
     });
     test.describe('textarea: fill outline', () => {
@@ -91,7 +91,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-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-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-label-floating`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-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-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-outline`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-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-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-shaped-outline-custom`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-shaped-outline-custom`));
       });
     });
   });
@@ -179,7 +179,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-textarea>
       `, config);
       const textarea = page.locator('ion-textarea');
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-slotted-label`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-slotted-label`));
     });
     test('should render the notch correctly with a slotted label after the textarea was originally hidden', async ({ page, }) => {
       await page.setContent(`
@@ -199,7 +199,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       `, config);
       const textarea = page.locator('ion-textarea');
       await textarea.evaluate((el) => el.style.removeProperty('display'));
-      expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-fill-outline-hidden-slotted-label`));
+      await expect(textarea).toHaveScreenshot(screenshot(`textarea-fill-outline-hidden-slotted-label`));
     });
   });
 });

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

@@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-valid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -37,7 +37,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-invalid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -52,7 +52,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-no-fill-focus`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-no-fill-focus`));
       });
     });
     test.describe('textarea: solid', () => {
@@ -70,7 +70,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-valid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -86,7 +86,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-invalid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -102,7 +102,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-solid-focus`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-solid-focus`));
       });
     });
     test.describe('textarea: outline', () => {
@@ -120,7 +120,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-valid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-valid`));
       });
       test('should render invalid state correctly', async ({ page }) => {
         await page.setContent(`
@@ -136,7 +136,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-invalid`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-invalid`));
       });
       test('should render focused state correctly', async ({ page }) => {
         await page.setContent(`
@@ -152,7 +152,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
           ></ion-textarea>
         `, config);
         const textarea = page.locator('ion-textarea');
-        expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-outline-focus`));
+        await expect(textarea).toHaveScreenshot(screenshot(`textarea-outline-focus`));
       });
     });
   });

package/dist/collection/components/textarea/test/item/textarea.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(`textarea-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`textarea-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(`textarea-inset-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`textarea-inset-list-no-fill`));
     });
   });
 });