@ionic/core 7.6.7-dev.11706625796.1b3c1ab2 → 7.6.7-dev.11706894781.1cd59fde

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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetime = page.locator('ion-datetime');
             await expect(datetime).toHaveScreenshot(screenshot(`datetime-wheel-header-diff`));
         });
@@ -59,16 +59,16 @@ 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.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(27);
             });
             test('should respect the max bounds', async ({ page }) => {
                 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.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('ion-datetime .day-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(1);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -85,10 +85,10 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                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]');
+                await page.waitForSelector('.datetime-ready');
+                const disabledMonths = page.locator('.month-column ion-picker-column-option.option-disabled');
+                const disabledYears = page.locator('.year-column ion-picker-column-option.option-disabled');
+                const disabledDays = page.locator('.day-column ion-picker-column-option.option-disabled');
                 expect(await disabledMonths.count()).toBe(0);
                 expect(await disabledYears.count()).toBe(0);
                 expect(await disabledDays.count()).toBe(15);
@@ -104,10 +104,10 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                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)');
+                await page.waitForSelector('.datetime-ready');
+                const monthValues = page.locator('.month-column ion-picker-column-option');
+                const yearValues = page.locator('.year-column ion-picker-column-option');
+                const dayValues = page.locator('.day-column ion-picker-column-option');
                 expect(await monthValues.count()).toBe(2);
                 expect(await yearValues.count()).toBe(3);
                 expect(await dayValues.count()).toBe(5);
@@ -132,9 +132,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const ionChange = await page.spyOnEvent('ionChange');
-                const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+                const monthValues = page.locator('.month-column ion-picker-column-option');
                 // Change month value
                 await monthValues.nth(0).click();
                 await ionChange.next();
@@ -159,9 +159,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const ionChange = await page.spyOnEvent('ionChange');
-                const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.day-column ion-picker-column-option');
                 // Change day value
                 await dayValues.nth(0).click();
                 await ionChange.next();
@@ -173,9 +173,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             prefer-wheel="true"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const ionChange = await page.spyOnEvent('ionChange');
-                const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+                const yearValues = page.locator('.year-column ion-picker-column-option');
                 /**
                  * Change year value
                  * The 0th index is the current
@@ -188,13 +188,13 @@ 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.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const datetime = page.locator('ion-datetime');
                 await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
                 await page.waitForChanges();
-                const selectedMonth = datetime.locator('.month-column .picker-item-active');
-                const selectedDay = datetime.locator('.day-column .picker-item-active');
-                const selectedYear = datetime.locator('.year-column .picker-item-active');
+                const selectedMonth = datetime.locator('.month-column ion-picker-column-option.option-active');
+                const selectedDay = datetime.locator('.day-column ion-picker-column-option.option-active');
+                const selectedYear = datetime.locator('.year-column ion-picker-column-option.option-active');
                 await expect(selectedMonth).toHaveText(/May/);
                 await expect(selectedDay).toHaveText(/25/);
                 await expect(selectedYear).toHaveText(/2021/);
@@ -212,9 +212,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    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 page.waitForSelector('.datetime-ready');
+                    const monthValues = page.locator('.month-column ion-picker-column-option');
+                    const dayValues = page.locator('.day-column ion-picker-column-option');
                     await expect(monthValues).toHaveText(['1月', '2月', '3月']);
                     await expect(dayValues).toHaveText(['1日', '2日', '3日']);
                 });
@@ -227,8 +227,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    await page.locator('.datetime-ready').waitFor();
-                    const columns = page.locator('ion-picker-column-internal');
+                    await page.waitForSelector('.datetime-ready');
+                    const columns = page.locator('ion-picker-column');
                     await expect(columns.nth(0)).toHaveClass(/month-column/);
                     await expect(columns.nth(1)).toHaveClass(/day-column/);
                     await expect(columns.nth(2)).toHaveClass(/year-column/);
@@ -242,8 +242,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
               value="2022-01-01"
             ></ion-datetime>
           `, config);
-                    await page.locator('.datetime-ready').waitFor();
-                    const columns = page.locator('ion-picker-column-internal');
+                    await page.waitForSelector('.datetime-ready');
+                    const columns = page.locator('ion-picker-column');
                     await expect(columns.nth(0)).toHaveClass(/day-column/);
                     await expect(columns.nth(1)).toHaveClass(/month-column/);
                     await expect(columns.nth(2)).toHaveClass(/year-column/);
@@ -255,16 +255,16 @@ 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.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(57);
             });
             test('should respect the max bounds', async ({ page }) => {
                 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.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(41);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -281,8 +281,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const disabledDates = page.locator('.date-column .picker-item[disabled]');
+                await page.waitForSelector('.datetime-ready');
+                const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
                 expect(await disabledDates.count()).toBe(44);
             });
             test('should respect month, day, and year preferences', async ({ page }) => {
@@ -296,8 +296,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                await page.waitForSelector('.datetime-ready');
+                const dateValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dateValues.count()).toBe(5);
             });
             test('should correctly localize the date data', async ({ page }) => {
@@ -311,8 +311,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             value="2022-02-01"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                await page.waitForSelector('.datetime-ready');
+                const dateValues = page.locator('.date-column ion-picker-column-option');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
             test('should respect min and max bounds even across years', async ({ page }) => {
@@ -325,17 +325,18 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             max="2023-01-01"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const dateColumn = page.locator('.date-column');
-                const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
+                const dateColumnScrollEl = dateColumn.locator('.picker-opts');
+                const dateValues = dateColumn.locator('ion-picker-column-option');
                 expect(await dateValues.count()).toBe(90);
                 /**
                  * Select 1st item to change the dates rendered
                  */
-                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
-                await dateColumn.evaluate((el) => (el.scrollTop = 0));
+                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
+                await dateColumnScrollEl.evaluate((el) => (el.scrollTop = 0));
                 await page.waitForChanges();
-                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
+                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
             });
             test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
                 await page.setContent(`
@@ -347,8 +348,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             min="2010-01-01"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dayValues.count()).toBe(92);
             });
             test('should narrow sliding window if default window is not within min and max constraints', async ({ page }) => {
@@ -361,8 +362,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             min="2022-05-01"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dayValues.count()).toBe(15);
             });
             test('selecting date should update value when no value is set', async ({ page }) => {
@@ -372,9 +373,9 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             prefer-wheel="true"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const ionChange = await page.spyOnEvent('ionChange');
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 // Change day/month value
                 await dayValues.nth(0).click();
                 await ionChange.next();
@@ -385,16 +386,16 @@ 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.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(57);
             });
             test('should respect the max bounds', async ({ page }) => {
                 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.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('ion-datetime .date-column ion-picker-column-option');
                 expect(await dayValues.count()).toEqual(41);
             });
             test('should respect isDateEnabled preference', async ({ page }) => {
@@ -411,8 +412,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             }
           </script>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const disabledDates = page.locator('.date-column .picker-item[disabled]');
+                await page.waitForSelector('.datetime-ready');
+                const disabledDates = page.locator('.date-column ion-picker-column-option.option-disabled');
                 expect(await disabledDates.count()).toBe(44);
             });
             test('should respect month, day, and year preferences', async ({ page }) => {
@@ -426,8 +427,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             year-values="2022,2020,2019"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                await page.waitForSelector('.datetime-ready');
+                const dateValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dateValues.count()).toBe(5);
             });
             test('should correctly localize the date data', async ({ page }) => {
@@ -441,8 +442,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             value="2022-02-01"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                await page.waitForSelector('.datetime-ready');
+                const dateValues = page.locator('.date-column ion-picker-column-option');
                 await expect(dateValues).toHaveText(['2月1日(火)', '2月2日(水)', '2月3日(木)']);
             });
             test('should respect min and max bounds even across years', async ({ page }) => {
@@ -455,17 +456,18 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             max="2023-01-01"
           ></ion-datetime>
         `, config);
-                await page.locator('.datetime-ready').waitFor();
+                await page.waitForSelector('.datetime-ready');
                 const dateColumn = page.locator('.date-column');
-                const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
+                const dateColumnScrollEl = dateColumn.locator('.picker-opts');
+                const dateValues = dateColumn.locator('ion-picker-column-option');
                 expect(await dateValues.count()).toBe(90);
                 /**
                  * Select 1st item to change the dates rendered
                  */
-                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2022-1-1');
-                await dateColumn.evaluate((el) => (el.scrollTop = 0));
+                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2022-1-1');
+                await dateColumnScrollEl.evaluate((el) => (el.scrollTop = 0));
                 await page.waitForChanges();
-                await expect(dateValues.nth(0)).toHaveAttribute('data-value', '2021-12-1');
+                await expect(dateValues.nth(0)).toHaveJSProperty('value', '2021-12-1');
             });
             test('should keep sliding window if default window is within min and max constraints', async ({ page }) => {
                 await page.setContent(`
@@ -477,8 +479,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           min="2010-01-01"
         ></ion-datetime>
       `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 expect(await dayValues.count()).toBe(92);
             });
             test('should narrow sliding window if default window is not within min and max constraints', async ({ page }) => {
@@ -491,8 +493,8 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           min="2022-05-01"
         ></ion-datetime>
       `, config);
-                await page.locator('.datetime-ready').waitFor();
-                const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+                await page.waitForSelector('.datetime-ready');
+                const dayValues = page.locator('.date-column ion-picker-column-option');
                 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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             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.locator('.datetime-ready').waitFor();
+        await this.page.waitForSelector('.datetime-ready');
         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.locator('.datetime-ready').waitFor();
+        await this.page.waitForSelector('.datetime-ready');
         this.timePicker = this.page.locator('ion-datetime');
     }
     async setValue(value) {
@@ -161,7 +161,7 @@ class TimePickerFixture {
         await this.page.waitForChanges();
     }
     async expectTime(hour, minute, ampm) {
-        const pickerColumns = this.timePicker.locator('ion-picker-column-internal');
+        const pickerColumns = this.timePicker.locator('ion-picker-column');
         await expect(pickerColumns.nth(0)).toHaveJSProperty('value', hour);
         await expect(pickerColumns.nth(1)).toHaveJSProperty('value', minute);
         await expect(pickerColumns.nth(2)).toHaveJSProperty('value', ampm);

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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
             await expect(febFirstButton).toBeDisabled();
         });
@@ -29,12 +29,12 @@ 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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
             await expect(calendarMonthYear).toHaveText('February 2022');
             await calendarMonthYear.click();
             await page.waitForChanges();
-            await page.locator('.month-column .picker-item[data-value="3"]').click();
+            await page.locator('.month-column ion-picker-column-option').nth(2).click();
             await page.waitForChanges();
             await expect(calendarMonthYear).toHaveText('March 2022');
             await expect(ionChange).not.toHaveReceivedEvent();
@@ -44,16 +44,16 @@ 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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
-            const monthYearButton = page.locator('.calendar-month-year ion-item');
+            const monthYearButton = page.locator('.calendar-month-year-toggle');
             await expect(calendarMonthYear).toHaveText('February 2022');
             await page.keyboard.press(tabKey);
             await expect(monthYearButton).toBeFocused();
             await page.waitForChanges();
             await page.keyboard.press('Enter');
             await page.waitForChanges();
-            const marchPickerItem = page.locator('.month-column .picker-item[data-value="3"]');
+            const marchPickerItem = page.locator('.month-column ion-picker-column-option').nth(2);
             await expect(marchPickerItem).toBeVisible();
         });
         test('should view next month via next button', async ({ page }) => {
@@ -75,7 +75,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
     `, config);
             const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
             const datetime = page.locator('ion-datetime');
-            const monthYearButton = page.locator('.calendar-month-year ion-item');
+            const monthYearButton = page.locator('.calendar-month-year-toggle');
             const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
             const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
             const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
@@ -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.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const clearButton = page.locator('#clear-button button');
             await expect(clearButton).toBeDisabled();
         });

package/dist/collection/components/datetime/test/set-value/datetime.e2e.js

@@ -7,7 +7,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test.describe(title('datetime: set-value'), () => {
         test('should update the active date when value is initially set', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-11-25T12:40:00.000Z'));
             await page.waitForChanges();
@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test('should update the active time when value is initially set', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-11-25T12:40:00.000Z'));
             await page.waitForChanges();
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime presentation="date" locale="en-US"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetime = page.locator('ion-datetime');
             const activeDayButton = page.locator('.calendar-day-active');
             await datetime.evaluate((el) => (el.value = '2021-10-05'));
@@ -39,7 +39,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         });
         test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
             await page.goto('/src/components/datetime/test/set-value', config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const datetime = page.locator('ion-datetime');
             await datetime.evaluate((el) => (el.value = '2021-05-25T12:40:00.000Z'));
             await page.waitForChanges();

package/dist/collection/components/datetime/test/time-label/datetime.e2e.js

@@ -9,7 +9,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const timeLabel = page.locator('ion-datetime .time-header');
             await expect(timeLabel).toHaveText('Time');
         });
@@ -17,7 +17,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await page.setContent(`
         <ion-datetime show-default-time-label="false"></ion-datetime>
       `, config);
-            await page.locator('.datetime-ready').waitFor();
+            await page.waitForSelector('.datetime-ready');
             const timeLabel = page.locator('ion-datetime .time-header');
             await expect(timeLabel).toHaveText('');
         });