chore(deps): update playwright to v1.63.0

core/Dockerfile

@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.62.1
+FROM mcr.microsoft.com/playwright:v1.63.0
 
 # Set the working directory
 WORKDIR /ionic

core/package.json

@@ -80,7 +80,7 @@
     "@eslint/js": "^9.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.62.1",
+    "@playwright/test": "^1.63.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^1.4.1",
@@ -102,7 +102,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "playwright-core": "^1.62.1",
+    "playwright-core": "^1.63.0",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts

@@ -24,6 +24,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await dateButton.click();
       await ionModalDidPresent.next();
 
+      /**
+       * The calendar body is hidden until the datetime adds the
+       * `datetime-ready` class, which happens a frame after the
+       * IntersectionObserver reports the datetime as visible. Without
+       * this wait the screenshot can capture an empty calendar grid.
+       */
+      await page.locator('ion-datetime.datetime-ready').waitFor();
+
       await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-modal`));
     });
 
@@ -44,6 +52,14 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await dateButton.click();
       await ionPopoverDidPresent.next();
 
+      /**
+       * The calendar body is hidden until the datetime adds the
+       * `datetime-ready` class, which happens a frame after the
+       * IntersectionObserver reports the datetime as visible. Without
+       * this wait the screenshot can capture an empty calendar grid.
+       */
+      await page.locator('ion-datetime.datetime-ready').waitFor();
+
       await expect(page).toHaveScreenshot(screenshot(`datetime-overlay-popover`));
     });
   });