voyager-ionic-core 7.6.5 → 7.7.0

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

@@ -14,7 +14,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="date-time"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date-time`));
             });
@@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="time-date"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`));
             });
@@ -30,7 +30,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time`));
             });
@@ -38,7 +38,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime value="2022-02-22T16:30:00" presentation="date"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date`));
             });
@@ -56,7 +56,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="date-time"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date-time`));
             });
@@ -64,7 +64,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time-date"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`));
             });
@@ -72,7 +72,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time`));
             });
@@ -80,7 +80,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
                 await page.setContent(`
           <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="date"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date`));
             });
@@ -96,7 +96,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         test('month selection should work after changing presentation', async ({ page }) => {
             await page.goto('/src/components/datetime/test/display', config);
             const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const select = page.locator('select#presentation');
             await select.selectOption('date-time');
             await page.waitForChanges();

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

@@ -77,7 +77,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetimeButtons = page.locator('ion-datetime .calendar-day:not([disabled])');
             await expect(datetimeButtons.nth(0)).toHaveText('١');
             await expect(datetimeButtons.nth(1)).toHaveText('٢');
@@ -87,7 +87,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime prefer-wheel="true" locale="ar-EG" presentation="date" value="2022-01-01"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
             await expect(datetimeYear).toHaveText('٢٠٢٢');
         });
@@ -111,7 +111,7 @@ class DatetimeLocaleFixture {
       ></ion-datetime>
     `, config);
         this.datetime = this.page.locator('ion-datetime');
-        await this.page.waitForSelector('.datetime-ready');
+        await this.page.locator('.datetime-ready').waitFor();
     }
     async expectLocalizedDatePicker(screenshot) {
         await this.expectLocalizedPicker(screenshot);

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

@@ -32,7 +32,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           }
         </script>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)');
             const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)');
             await expect(nextButton).toHaveJSProperty('disabled', false);
@@ -48,21 +48,21 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         test('datetime: minmax months disabled', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
             const calendarMonths = page.locator('ion-datetime#inside .calendar-month');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').first().waitFor();
             await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(2)).toHaveClass(/calendar-month-disabled/);
         });
         test('datetime: minmax navigation disabled', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').first().waitFor();
             const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');
             await expect(navButtons.nth(0)).toHaveAttribute('disabled', '');
             await expect(navButtons.nth(1)).toHaveAttribute('disabled', '');
         });
         test('datetime: min including day should not disable month', async ({ page }) => {
             await page.goto('/src/components/datetime/test/minmax', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').first().waitFor();
             const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');
             await expect(calendarMonths.nth(0)).toHaveClass(/calendar-month-disabled/);
             await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
@@ -77,7 +77,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
                 await page.setContent(`
           <ion-datetime min="2022-04-22T04:10:00" max="2022-05-21T21:30:00"></ion-datetime>
       `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
                 await page.click('.time-body');
                 await ionPopoverDidPresent.next();
@@ -90,7 +90,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         test.describe('setting value outside bounds should show in-bounds month', () => {
             const testDisplayedMonth = async (page, content, expectedString = /June 2021/) => {
                 await page.setContent(content, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
                 await expect(calendarMonthYear).toHaveText(expectedString);
             };
@@ -126,7 +126,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           });
         </script>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
             const eventButton = page.locator('button#bind');
             await eventButton.click();
@@ -186,7 +186,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             value="2022-10-11T06:00"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
@@ -201,7 +201,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             value="2022-10-11T09:00"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayButton = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
@@ -220,7 +220,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
                 const datetime = page.locator('ion-datetime');
                 const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
                 const ionChange = await page.spyOnEvent('ionChange');
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 await monthColumnItems.nth(0).click(); // switch to January
                 await ionChange.next();
                 await expect(datetime).toHaveJSProperty('value', '2022-01-15T00:00:00');
@@ -248,7 +248,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 // Select Jan 10, 2022
                 const maxDate = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="1"][data-year="2022"]');
                 await maxDate.click();

package/dist/collection/components/datetime/test/month-year-picker/datetime.e2e.js

@@ -11,7 +11,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test.describe(title('datetime: month-year picker'), () => {
         test.beforeEach(async ({ page }) => {
             await page.goto('/src/components/datetime/test/month-year-picker', config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').first().waitFor();
         });
         test('should hide the footer when picker is open', async ({ page }) => {
             const datetimeFooter = page.locator('#date-time .datetime-footer');

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

@@ -5,7 +5,7 @@ import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 const SINGLE_DATE = '2022-06-01';
 const MULTIPLE_DATES = ['2022-06-01', '2022-06-02', '2022-06-03'];
-const MULTIPLE_DATES_SEPARATE_MONTHS = ['2022-04-01', '2022-05-01', '2022-06-01'];
+const MULTIPLE_DATES_SEPARATE_MONTHS = ['2022-03-01', '2022-04-01', '2022-05-01'];
 class DatetimeMultipleFixture {
     constructor(page) {
         this.page = page;
@@ -41,7 +41,7 @@ class DatetimeMultipleFixture {
       </script>
     `, config);
         this.datetime = this.page.locator('ion-datetime');
-        await this.page.waitForSelector('.datetime-ready');
+        await this.page.locator('.datetime-ready').waitFor();
         return this.datetime;
     }
     async expectMultipleDatePicker(id, screenshot) {
@@ -118,10 +118,27 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 value: ['2022-06-01', '2022-06-02'],
             });
         });
-        test('multiple default values across months should display at least one value', async () => {
+        test('should scroll to new month when value is updated with multiple dates in the same month', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/28602',
+            });
             const datetime = await datetimeFixture.goto(config, MULTIPLE_DATES_SEPARATE_MONTHS);
+            await datetime.evaluate((el, dates) => {
+                el.value = dates;
+            }, MULTIPLE_DATES);
+            await page.waitForChanges();
+            const monthYear = datetime.locator('.calendar-month-year');
+            await expect(monthYear).toHaveText(/June 2022/);
+        });
+        test('should not scroll to new month when value is updated with dates in different months', async ({ page }) => {
+            const datetime = await datetimeFixture.goto(config, MULTIPLE_DATES);
+            await datetime.evaluate((el, dates) => {
+                el.value = dates;
+            }, MULTIPLE_DATES_SEPARATE_MONTHS);
+            await page.waitForChanges();
             const monthYear = datetime.locator('.calendar-month-year');
-            await expect(monthYear).toHaveText(/April 2022/);
+            await expect(monthYear).toHaveText(/June 2022/);
         });
         test('with buttons, should only update value when confirm is called', async ({ page }) => {
             const datetime = await datetimeFixture.goto(config, SINGLE_DATE, { showDefaultButtons: true });
@@ -216,7 +233,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           }
         </script>
       `, config);
-            await page.waitForSelector(`.datetime-ready`);
+            await page.locator(`.datetime-ready`).waitFor();
             const datetime = page.locator('ion-datetime');
             const header = datetime.locator('.datetime-selected-date');
             await expect(header).toHaveText('Mon, Oct 10');

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

@@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => {
             const openDateTimeBtn = page.locator('ion-button#open-datetime');
             await openDateTimeBtn.click();
             await ionPopoverDidPresent.next();
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page).toHaveScreenshot(screenshot(`datetime-position-base`));
             const timepickerBtn = page.locator('ion-datetime .time-body');
             await timepickerBtn.click();

package/dist/collection/components/datetime/test/prefer-wheel/datetime.e2e.js

@@ -21,28 +21,28 @@ configs().forEach(({ title, screenshot, config }) => {
             await page.setContent(`
         <ion-datetime size="cover" presentation="date" prefer-wheel="true" value="2019-05-30" max="2022"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-diff`));
         });
         test('should not have visual regressions for date-time wheel', async ({ page }) => {
             await page.setContent(`
         <ion-datetime size="cover" presentation="date-time" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-time-diff`));
         });
         test('should not have visual regressions for time-date wheel', async ({ page }) => {
             await page.setContent(`
         <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-time-date-diff`));
         });
         test('should render a condense header when specified', async ({ page }) => {
             await page.setContent(`
         <ion-datetime size="cover" presentation="time-date" prefer-wheel="true" value="2019-05-30T16:30:00" max="2022"><div slot="title">My Custom Title</div></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             await expect(datetime).toHaveScreenshot(screenshot(`datetime-wheel-header-diff`));
         });
@@ -59,7 +59,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2019-05-30"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(27);
             });
@@ -67,7 +67,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2023-10-01"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(1);
             });
@@ -85,7 +85,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const disabledMonths = page.locator('.month-column .picker-item[disabled]');
                 const disabledYears = page.locator('.year-column .picker-item[disabled]');
                 const disabledDays = page.locator('.day-column .picker-item[disabled]');
@@ -104,7 +104,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
                 const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
                 const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
@@ -132,7 +132,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
                 const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
                 // Change month value
@@ -159,7 +159,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
                 // Change day value
@@ -173,7 +173,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             prefer-wheel="true"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
                 const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
                 /**
@@ -188,7 +188,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
             <ion-datetime presentation="date" prefer-wheel="true" min="2019-05-05" max="2023-10-01" value="2019-05-30"></ion-datetime>
           `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const datetime = page.locator('ion-datetime');
                 await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
                 await page.waitForChanges();
@@ -212,7 +212,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    await page.waitForSelector('.datetime-ready');
+                    await page.locator('.datetime-ready').waitFor();
                     const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
                     const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
                     await expect(monthValues).toHaveText(['1月', '2月', '3月']);
@@ -227,7 +227,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    await page.waitForSelector('.datetime-ready');
+                    await page.locator('.datetime-ready').waitFor();
                     const columns = page.locator('ion-picker-column-internal');
                     await expect(columns.nth(0)).toHaveClass(/month-column/);
                     await expect(columns.nth(1)).toHaveClass(/day-column/);
@@ -242,7 +242,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    await page.waitForSelector('.datetime-ready');
+                    await page.locator('.datetime-ready').waitFor();
                     const columns = page.locator('ion-picker-column-internal');
                     await expect(columns.nth(0)).toHaveClass(/day-column/);
                     await expect(columns.nth(1)).toHaveClass(/month-column/);
@@ -255,7 +255,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="date-time" prefer-wheel="true" min="2019-05-05" value="2019-05-10T16:30:00"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(57);
             });
@@ -263,7 +263,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="date-time" prefer-wheel="true" max="2023-06-10" value="2023-06-05T16:30:00"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(41);
             });
@@ -281,7 +281,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const disabledDates = page.locator('.date-column .picker-item[disabled]');
                 expect(await disabledDates.count()).toBe(44);
             });
@@ -296,7 +296,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(5);
             });
@@ -311,7 +311,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             value="2022-02-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
@@ -325,7 +325,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             max="2023-01-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateColumn = page.locator('.date-column');
                 const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(90);
@@ -347,7 +347,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             min="2010-01-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(92);
             });
@@ -361,7 +361,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             min="2022-05-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(15);
             });
@@ -372,7 +372,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             prefer-wheel="true"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const ionChange = await page.spyOnEvent('ionChange');
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 // Change day/month value
@@ -385,7 +385,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="time-date" prefer-wheel="true" min="2019-05-05" value="2019-05-10T16:30:00"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(57);
             });
@@ -393,7 +393,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
                 await page.setContent(`
           <ion-datetime presentation="time-date" prefer-wheel="true" max="2023-06-10" value="2023-06-05T16:30:00"></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
                 expect(await dayValues.count()).toEqual(41);
             });
@@ -411,7 +411,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const disabledDates = page.locator('.date-column .picker-item[disabled]');
                 expect(await disabledDates.count()).toBe(44);
             });
@@ -426,7 +426,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(5);
             });
@@ -441,7 +441,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             value="2022-02-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
@@ -455,7 +455,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             max="2023-01-01"
           ></ion-datetime>
         `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dateColumn = page.locator('.date-column');
                 const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
                 expect(await dateValues.count()).toBe(90);
@@ -477,7 +477,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           min="2010-01-01"
         ></ion-datetime>
       `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(92);
             });
@@ -491,7 +491,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           min="2022-05-01"
         ></ion-datetime>
       `, config);
-                await page.waitForSelector('.datetime-ready');
+                await page.locator('.datetime-ready').waitFor();
                 const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
                 expect(await dayValues.count()).toBe(15);
             });

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

@@ -85,7 +85,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime presentation="date"></ion-datetime>
       `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const datetime = page.locator('ion-datetime');
             const monthYearButton = page.locator('ion-datetime .calendar-month-year');
             await monthYearButton.click();
@@ -136,7 +136,7 @@ class DatetimePresentationFixture {
         await this.page.setContent(`
       <ion-datetime presentation="${presentation}" value="2010-03-10T13:00:00"></ion-datetime>
     `, config);
-        await this.page.waitForSelector('.datetime-ready');
+        await this.page.locator('.datetime-ready').waitFor();
         this.datetime = this.page.locator('ion-datetime');
     }
     async screenshot(name, screenshotFn) {
@@ -151,7 +151,7 @@ class TimePickerFixture {
         await this.page.setContent(`
       <ion-datetime presentation="time" value="${value}"></ion-datetime>
     `, config);
-        await this.page.waitForSelector('.datetime-ready');
+        await this.page.locator('.datetime-ready').waitFor();
         this.timePicker = this.page.locator('ion-datetime');
     }
     async setValue(value) {

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

@@ -20,7 +20,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
             await page.setContent(`
         <ion-datetime value="2022-02-28" readonly></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
             await expect(febFirstButton).toBeDisabled();
         });
@@ -29,7 +29,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
     `, config);
             const ionChange = await page.spyOnEvent('ionChange');
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarMonthYear).toHaveText('February 2022');
             await calendarMonthYear.click();
@@ -44,7 +44,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         <ion-datetime value="2022-02-22T16:30:00" readonly></ion-datetime>
     `, config);
             const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             const monthYearButton = page.locator('.calendar-month-year ion-item');
             await expect(calendarMonthYear).toHaveText('February 2022');
@@ -105,7 +105,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
 
         <ion-datetime value="2022-02-22T16:30:00" show-default-buttons="true" show-clear-button="true" readonly></ion-datetime>
     `, config);
-            await page.waitForSelector('.datetime-ready');
+            await page.locator('.datetime-ready').waitFor();
             const clearButton = page.locator('#clear-button button');
             await expect(clearButton).toBeDisabled();
         });