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

package/dist/collection/components/popover/test/async/popover.e2e.js

@@ -0,0 +1,42 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('popover: alignment with async component'), async () => {
+    test('should align popover centered with button when component is added async', async ({ page }) => {
+      await page.goto('/src/components/popover/test/async', config);
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const button = page.locator('#button');
+      await button.click();
+      await ionPopoverDidPresent.next();
+      await expect(page).toHaveScreenshot(screenshot(`popover-async`));
+    });
+    /**
+     * Framework delegate should fall back to returning the host
+     * component when no child content is passed otherwise
+     * the overlay will get stuck when trying to re-present.
+     */
+    test('should open popover even if nothing was passed', async ({ page }) => {
+      await page.setContent(`
+        <ion-popover></ion-popover>
+      `, config);
+      const popover = page.locator('ion-popover');
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+      const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
+      await popover.evaluate((el) => el.present());
+      await ionPopoverDidPresent.next();
+      await expect(popover).toBeVisible();
+      await popover.evaluate((el) => el.dismiss());
+      await ionPopoverDidDismiss.next();
+      await expect(popover).toBeHidden();
+      await popover.evaluate((el) => el.present());
+      await ionPopoverDidPresent.next();
+      await expect(popover).toBeVisible();
+    });
+  });
+});

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

@@ -12,7 +12,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-color-checked`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-color-checked`));
     });
     test('should not apply color when unchecked', async ({ page }) => {
       await page.setContent(`
@@ -21,7 +21,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-color-unchecked`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-color-unchecked`));
     });
   });
 });

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

@@ -16,7 +16,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`toggle-list`));
+      await expect(list).toHaveScreenshot(screenshot(`toggle-list`));
     });
     test('should render correctly in inset list', async ({ page }) => {
       await page.setContent(`
@@ -29,7 +29,7 @@ configs().forEach(({ title, screenshot, config }) => {
         </ion-list>
       `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-inset-list`));
+      await expect(list).toHaveScreenshot(screenshot(`radio-inset-list`));
     });
   });
 });
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
           </ion-list>
         `, config);
       const list = page.locator('ion-list');
-      expect(await list.screenshot()).toMatchSnapshot(screenshot(`radio-long-label-in-item`));
+      await expect(list).toHaveScreenshot(screenshot(`radio-long-label-in-item`));
     });
   });
 });

package/dist/collection/components/radio/test/label-placement/radio.e2e.js

@@ -21,7 +21,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
            `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-start-justify-start`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-start-justify-start`));
       });
       test('should render an end justification with label in the start position', async ({ page }) => {
         await page.setContent(`
@@ -30,7 +30,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-start-justify-end`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-start-justify-end`));
       });
       test('should render a space between justification with label in the start position', async ({ page }) => {
         await page.setContent(`
@@ -39,7 +39,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-start-justify-space-between`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-start-justify-space-between`));
       });
     });
     test.describe('radio: end placement', () => {
@@ -50,7 +50,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-end-justify-start`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-end-justify-start`));
       });
       test('should render an end justification with label in the end position', async ({ page }) => {
         await page.setContent(`
@@ -59,7 +59,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-end-justify-end`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-end-justify-end`));
       });
       test('should render a space between justification with label in the end position', async ({ page }) => {
         await page.setContent(`
@@ -68,7 +68,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-end-justify-space-between`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-end-justify-space-between`));
       });
     });
     test.describe('radio: fixed placement', () => {
@@ -79,7 +79,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-fixed-justify-start`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-fixed-justify-start`));
       });
       test('should render an end justification with label in the fixed position', async ({ page }) => {
         await page.setContent(`
@@ -88,7 +88,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-fixed-justify-end`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-fixed-justify-end`));
       });
       test('should render a space between justification with label in the fixed position', async ({ page }) => {
         await page.setContent(`
@@ -97,7 +97,7 @@ configs().forEach(({ title, screenshot, config }) => {
            </ion-radio-group>
          `, config);
         const radio = page.locator('ion-radio');
-        expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-label-fixed-justify-space-between`));
+        await expect(radio).toHaveScreenshot(screenshot(`radio-label-fixed-justify-space-between`));
       });
     });
   });

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

@@ -12,7 +12,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-disabled`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-disabled`));
     });
     test('should render disabled checked radio correctly', async ({ page }) => {
       await page.setContent(`
@@ -21,7 +21,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-checked-disabled`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-checked-disabled`));
     });
     test('should render checked radio correctly', async ({ page }) => {
       await page.setContent(`
@@ -30,7 +30,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-checked`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-checked`));
     });
     test('should render unchecked radio correctly', async ({ page }) => {
       await page.setContent(`
@@ -39,7 +39,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         </ion-radio-group>
       `, config);
       const radio = page.locator('ion-radio');
-      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-unchecked`));
+      await expect(radio).toHaveScreenshot(screenshot(`radio-unchecked`));
     });
   });
 });

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

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

@@ -8,7 +8,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should be customizable', async ({ page }) => {
       await page.goto(`/src/components/range/test/custom`, config);
       const range = page.locator('ion-range');
-      expect(await range.screenshot()).toMatchSnapshot(screenshot(`range-custom`));
+      await expect(range).toHaveScreenshot(screenshot(`range-custom`));
     });
   });
 });

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/router-outlet/router-outlet.js

@@ -174,6 +174,7 @@ export class RouterOutlet {
     this.ionNavDidChange.emit();
     return true;
   }
+  // TODO: FW-5048 - Remove this code in favor of using lock controller from utils
   async lock() {
     const p = this.waitPromise;
     let resolve;

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`));
     });
   });
 });