diff --git a/core/src/components/datetime/test/custom/datetime.e2e.ts b/core/src/components/datetime/test/custom/datetime.e2e.ts
index 5563bc6c107..60339fbf742 100644
--- a/core/src/components/datetime/test/custom/datetime.e2e.ts
+++ b/core/src/components/datetime/test/custom/datetime.e2e.ts
@@ -5,6 +5,8 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test.describe(title('datetime: custom'), () => {
test.beforeEach(async ({ page }) => {
await page.goto(`/src/components/datetime/test/custom`, config);
+
+ await page.locator('.datetime-ready').last().waitFor();
});
test('should allow styling wheel style datetimes', async ({ page }) => {
@@ -30,6 +32,13 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
test('should allow styling calendar days in grid style datetimes', async ({ page }) => {
const datetime = page.locator('#custom-calendar-days');
+ // Wait for calendar days to be rendered
+ await page.waitForFunction(() => {
+ const datetime = document.querySelector('#custom-calendar-days');
+ const calendarDays = datetime?.shadowRoot?.querySelectorAll('.calendar-day');
+ return calendarDays && calendarDays.length > 0;
+ });
+
await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
});
});
diff --git a/core/src/components/datetime/test/custom/index.html b/core/src/components/datetime/test/custom/index.html
index 25c4835c053..09895d9c591 100644
--- a/core/src/components/datetime/test/custom/index.html
+++ b/core/src/components/datetime/test/custom/index.html
@@ -164,7 +164,7 @@
Grid Style
const customDatetime = document.querySelector('#custom-calendar-days');
// Mock the current day to always have the same screenshots
- const mockToday = '2023-06-10T16:22';
+ const mockToday = '2023-06-10T16:22:00.000Z';
Date = class extends Date {
constructor(...args) {
if (args.length === 0) {
diff --git a/core/src/components/datetime/test/datetime.e2e.ts b/core/src/components/datetime/test/datetime.e2e.ts
index 2e26aad48e2..c95e4d20448 100644
--- a/core/src/components/datetime/test/datetime.e2e.ts
+++ b/core/src/components/datetime/test/datetime.e2e.ts
@@ -22,11 +22,23 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
await expect(monthYearToggle).toContainText('January 2022');
+ // Click to open the picker
await monthYearToggle.click();
await page.waitForChanges();
- // February
- await monthColumnItems.nth(1).click();
+ // Wait for the picker to be open
+ await page.locator('.month-year-picker-open').waitFor();
+
+ // Wait a bit for the picker to fully load
+ await page.waitForTimeout(200);
+
+ const ionChange = await page.spyOnEvent('ionChange');
+
+ // Click on February
+ await monthColumnItems.filter({ hasText: 'February' }).click();
+
+ // Wait for changes
+ await ionChange.next();
await page.waitForChanges();
await expect(monthYearToggle).toContainText('February 2022');
@@ -38,13 +50,23 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
const datetime = page.locator('ion-datetime');
const ionChange = await page.spyOnEvent('ionChange');
+ // Click to open the picker
await monthYearToggle.click();
await page.waitForChanges();
- // February
- await monthColumnItems.nth(1).click();
+ // Wait for the picker to be open
+ await page.locator('.month-year-picker-open').waitFor();
+
+ // Wait a bit for the picker to fully load
+ await page.waitForTimeout(200);
+
+ // Click on February
+ await monthColumnItems.filter({ hasText: 'February' }).click();
+ // Wait for changes
await ionChange.next();
+ await page.waitForChanges();
+
await expect(ionChange).toHaveReceivedEventTimes(1);
await expect(datetime).toHaveJSProperty('value', '2022-02-28');
});
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts b/core/src/components/input-otp/test/separators/input-otp.e2e.ts
index 37c9bb8bb4a..4c92a458950 100644
--- a/core/src/components/input-otp/test/separators/input-otp.e2e.ts
+++ b/core/src/components/input-otp/test/separators/input-otp.e2e.ts
@@ -95,6 +95,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
el.separators = [2, 3];
});
+ await page.waitForChanges();
+
await expect(await hasSeparatorAfter(page, 0)).toBe(false);
await expect(await hasSeparatorAfter(page, 1)).toBe(true);
await expect(await hasSeparatorAfter(page, 2)).toBe(true);