@ionic/core 7.3.2 → 7.3.3-nightly.20230831

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

@@ -14,7 +14,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`range-list`));
+      await expect(list).toHaveScreenshot(screenshot(`range-list`));
     });
     test('should render correctly in inset list', async ({ page }) => {
       await page.setContent(`
@@ -25,7 +25,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`range-inset-list`));
+      await expect(list).toHaveScreenshot(screenshot(`range-inset-list`));
     });
   });
 });
@@ -38,7 +38,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-item>
       `, config);
       const item = page.locator('ion-item');
-      expect(await item.screenshot()).toMatchSnapshot(screenshot(`range-item-color`));
+      await expect(item).toHaveScreenshot(screenshot(`range-item-color`));
     });
   });
 });

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

@@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => {
           <ion-range legacy="true"></ion-range>
         `, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-no-items-no-label`));
+        await expect(range).toHaveScreenshot(screenshot(`range-no-items-no-label`));
       });
       test('should render label in the start placement', async ({ page }) => {
         await page.setContent(`
@@ -20,7 +20,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-range>
         `, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-no-items-start`));
+        await expect(range).toHaveScreenshot(screenshot(`range-no-items-start`));
       });
       test('should render label in the end placement', async ({ page }) => {
         await page.setContent(`
@@ -29,7 +29,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-range>
         `, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-no-items-end`));
+        await expect(range).toHaveScreenshot(screenshot(`range-no-items-end`));
       });
       test('should render label in the fixed placement', async ({ page }) => {
         await page.setContent(`
@@ -38,7 +38,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-range>
         `, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-no-items-fixed`));
+        await expect(range).toHaveScreenshot(screenshot(`range-no-items-fixed`));
       });
     });
     test.describe('range: start and end items', () => {
@@ -50,7 +50,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-range>
         `, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-items-no-label`));
+        await expect(range).toHaveScreenshot(screenshot(`range-items-no-label`));
       });
       test('should render label in the start placement', async ({ page }) => {
         await page.setContent(`
@@ -61,7 +61,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-range>
         `, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-items-start`));
+        await expect(range).toHaveScreenshot(screenshot(`range-items-start`));
       });
       test('should render label in the end placement', async ({ page }) => {
         await page.setContent(`
@@ -72,7 +72,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-range>
         `, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-items-end`));
+        await expect(range).toHaveScreenshot(screenshot(`range-items-end`));
       });
       test('should render label in the fixed placement', async ({ page }) => {
         await page.setContent(`
@@ -83,24 +83,24 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-range>
         `, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-items-fixed`));
+        await expect(range).toHaveScreenshot(screenshot(`range-items-fixed`));
       });
     });
     test.describe('range: label prop', () => {
       test('should render label in the start placement', async ({ page }) => {
         await page.setContent(`<ion-range label-placement="start" label="Volume"></ion-range>`, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-start`));
+        await expect(range).toHaveScreenshot(screenshot(`range-label-prop-start`));
       });
       test('should render label in the end placement', async ({ page }) => {
         await page.setContent(`<ion-range label-placement="end" label="Volume"></ion-range>`, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-end`));
+        await expect(range).toHaveScreenshot(screenshot(`range-label-prop-end`));
       });
       test('should render label in the fixed placement', async ({ page }) => {
         await page.setContent(`<ion-range label-placement="fixed" label="Volume"></ion-range>`, config);
         const range = page.locator('ion-range');
-        expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-prop-fixed`));
+        await expect(range).toHaveScreenshot(screenshot(`range-label-prop-fixed`));
       });
     });
   });
@@ -114,7 +114,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
         </ion-range>
       `, config);
       const range = page.locator('ion-range');
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-label-truncate`));
+      await expect(range).toHaveScreenshot(screenshot(`range-label-truncate`));
     });
   });
 });

package/dist/collection/components/range/test/legacy/a11y/range.e2e.js

@@ -19,14 +19,14 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       const rangeHandle = range.locator('.range-knob-handle');
       await rangeHandle.evaluate((el) => el.classList.add('ion-focused'));
       await page.waitForChanges();
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-focus`));
+      await expect(range).toHaveScreenshot(screenshot(`range-focus`));
       const box = (await rangeHandle.boundingBox());
       const centerX = box.x + box.width / 2;
       const centerY = box.y + box.height / 2;
       await page.mouse.move(centerX, centerY);
       await page.mouse.down();
       await page.waitForChanges();
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-active`));
+      await expect(range).toHaveScreenshot(screenshot(`range-active`));
     });
   });
 });
@@ -43,7 +43,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const rangeHandle = range.locator('.range-knob-handle');
       await rangeHandle.evaluate((el) => el.classList.add('ion-focused'));
       await page.waitForChanges();
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-focus-with-pin`));
+      await expect(range).toHaveScreenshot(screenshot(`range-focus-with-pin`));
     });
   });
 });

package/dist/collection/components/range/test/legacy/active-bar-start/range.e2e.js

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

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

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

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

@@ -14,7 +14,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-range>
       `, config);
       const range = page.locator('ion-range');
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-enabled`));
+      await expect(range).toHaveScreenshot(screenshot(`range-enabled`));
     });
     test('should render disabled state', async ({ page }) => {
       await page.setContent(`
@@ -25,7 +25,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-range>
       `, config);
       const range = page.locator('ion-range');
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled`));
+      await expect(range).toHaveScreenshot(screenshot(`range-disabled`));
     });
     test('should render disabled state with a value', async ({ page }) => {
       await page.setContent(`
@@ -36,7 +36,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-range>
       `, config);
       const range = page.locator('ion-range');
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled-value`));
+      await expect(range).toHaveScreenshot(screenshot(`range-disabled-value`));
     });
     test('should render disabled state with ticks', async ({ page }) => {
       await page.setContent(`
@@ -47,7 +47,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-range>
       `, config);
       const range = page.locator('ion-range');
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-disabled-ticks`));
+      await expect(range).toHaveScreenshot(screenshot(`range-disabled-ticks`));
     });
   });
 });

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

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

@@ -13,7 +13,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-no-fill-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-color`));
       });
     });
     test.describe('input: fill solid', () => {
@@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-solid-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-solid-color`));
       });
     });
     test.describe('input: fill outline', () => {
@@ -35,7 +35,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-outline-color`));
+        await expect(select).toHaveScreenshot(screenshot(`select-outline-color`));
       });
     });
   });

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

@@ -17,7 +17,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-solid`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -31,7 +31,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-solid-label-floating`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-solid-label-floating`));
       });
       test('should not have visual regressions with shaped solid', async ({ page }) => {
         await page.setContent(`
@@ -45,7 +45,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-shaped-solid`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -67,7 +67,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-shaped-solid-custom`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid-custom`));
       });
     });
     test.describe('select: fill outline', () => {
@@ -82,7 +82,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline`));
       });
       test('should render correctly with floating label', async ({ page }) => {
         await page.setContent(`
@@ -96,7 +96,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-label-floating`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-label-floating`));
       });
       test('should not have visual regressions with shaped outline', async ({ page }) => {
         await page.setContent(`
@@ -110,7 +110,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-shaped-outline`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline`));
       });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(`
@@ -132,7 +132,7 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
           </ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-shaped-outline-custom`));
+        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline-custom`));
       });
     });
   });
@@ -156,7 +156,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-fill-outline-slotted-label`));
+      await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-slotted-label`));
     });
     test('should render the notch correctly with a slotted label after the select was originally hidden', async ({ page, }) => {
       await page.setContent(`
@@ -177,7 +177,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       `, config);
       const select = page.locator('ion-select');
       await select.evaluate((el) => el.style.removeProperty('display'));
-      expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-hidden-slotted-label`));
+      await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-hidden-slotted-label`));
     });
   });
   test.describe(title('select: notch cutout'), () => {

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

@@ -100,7 +100,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-select label="Label" class="select-expanded"></ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-no-fill-highlight`));
+        await expect(select).toHaveScreenshot(screenshot(`select-no-fill-highlight`));
       });
     });
     test.describe('select: solid', () => {
@@ -109,7 +109,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-select fill="solid" label="Label" class="select-expanded"></ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-solid-highlight`));
+        await expect(select).toHaveScreenshot(screenshot(`select-solid-highlight`));
       });
     });
     test.describe('select: outline', () => {
@@ -118,7 +118,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
           <ion-select fill="outline" label="Label" class="select-expanded"></ion-select>
         `, config);
         const select = page.locator('ion-select');
-        expect(await select.screenshot({ animations: 'disabled' })).toMatchSnapshot(screenshot(`select-outline-highlight`));
+        await expect(select).toHaveScreenshot(screenshot(`select-outline-highlight`));
       });
     });
   });

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

@@ -19,7 +19,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`select-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`select-list-no-fill`));
     });
     test('should render correctly in inset list with no fill', async ({ page }) => {
       await page.setContent(`
@@ -35,7 +35,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`select-inset-list-no-fill`));
+      await expect(list).toHaveScreenshot(screenshot(`select-inset-list-no-fill`));
     });
   });
 });

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/toggle/test/color/toggle.e2e.js

@@ -10,14 +10,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         <ion-toggle color="danger" checked="true">Label</ion-toggle>
       `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-color-checked`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-color-checked`));
     });
     test('should not apply color when unchecked', async ({ page }) => {
       await page.setContent(`
         <ion-toggle color="danger">Label</ion-toggle>
       `, config);
       const toggle = page.locator('ion-toggle');
-      expect(await toggle.screenshot()).toMatchSnapshot(screenshot(`toggle-color-unchecked`));
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-color-unchecked`));
     });
   });
 });