chore(deps): update playwright

core/Dockerfile

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

core/package.json

@@ -46,7 +46,7 @@
     "@capacitor/status-bar": "^8.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.60.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
@@ -67,7 +67,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "playwright-core": "^1.59.1",
+    "playwright-core": "^1.60.0",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -319,9 +319,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       await expect(calendarHeader).toHaveText(/June 2022/);
     });
-    test('should not re-render if swipe is in progress', async ({ page, skip }) => {
-      skip.browser('webkit', 'Wheel is not available in WebKit');
-
+    test('should not re-render while a swipe is in progress', async ({ page }) => {
       await page.setContent(
         `
         <ion-datetime value="2022-05-03"></ion-datetime>
@@ -336,15 +334,19 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       await expect(calendarHeader).toHaveText(/May 2022/);
 
-      const box = await calendarBody.boundingBox();
+      // Scroll the calendar a little, but not far enough to land on the next
+      // month. This mimics a swipe that the user started but did not finish.
+      await calendarBody.evaluate((el: HTMLElement) => {
+        const monthWidth = el.querySelector('.calendar-month')!.clientWidth;
+        el.scrollLeft = monthWidth + 30;
+      });
 
-      if (box) {
-        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-        await page.mouse.wheel(-50, 0);
-        await page.waitForChanges();
+      // Give the component time to react to the scroll
+      await page.waitForChanges();
 
-        await expect(calendarHeader).toHaveText(/May 2022/);
-      }
+      // Because the calendar never settled on a new month, the header should
+      // still show the original month.
+      await expect(calendarHeader).toHaveText(/May 2022/);
     });
   });
 });

core/src/components/modal/test/card/modal-card.e2e.ts

@@ -35,12 +35,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       await cardModalPage.openModalByTrigger('#card');
       await cardModalPage.openModalByTrigger('.add');
 
+      // Firefox only: Move the mouse away from the ".add" button
+      // so the button's hover state is not captured in the
+      // screenshot
+      await page.mouse.move(0, 0);
+
       await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present`));
     });
     test('should not have visual regressions with stacked custom cards', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card-custom');
       await cardModalPage.openModalByTrigger('.add');
 
+      // Firefox only: Move the mouse away from the ".add" button
+      // so the button's hover state is not captured in the
+      // screenshot
+      await page.mouse.move(0, 0);
+
       await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present`));
     });
   });
@@ -125,7 +135,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       expect(ionDragEnd.length).toBe(0);
 
       /**
-       * Drage the modal further to verify it does:
+       * Drag the modal further to verify it does:
        * - not emit the event again for `ionDragStart`
        * - emit more `ionDragMove` events
        * - emit the `ionDragEnd` event when the gesture ends

core/src/components/modal/test/card/modal-tablet.e2e.ts

@@ -28,12 +28,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       await cardModalPage.openModalByTrigger('#card');
       await cardModalPage.openModalByTrigger('.add');
 
+      // Firefox only: Move the mouse away from the ".add" button
+      // so the button's hover state is not captured in the
+      // screenshot
+      await page.mouse.move(0, 0);
+
       await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present-tablet`));
     });
     test('should not have visual regressions with stacked custom cards', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card-custom');
       await cardModalPage.openModalByTrigger('.add');
 
+      // Firefox only: Move the mouse away from the ".add" button
+      // so the button's hover state is not captured in the
+      // screenshot
+      await page.mouse.move(0, 0);
+
       await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present-tablet`));
     });
   });

core/src/components/picker-column-option/picker-column-option.md.scss

@@ -1,5 +1,17 @@
 @import "./picker-column-option";
 
-:host(.option-active) {
+/**
+ * The active option is colored when either:
+ * - picker-column applies the `option-active` class (standalone ion-picker,
+ *   where the column lives in the light DOM), or
+ * - datetime sets `part="... active"` on the option. This is the reliable
+ *   value-based source of truth and keeps the option colored when the column
+ *   lives inside datetime's shadow DOM, where the class can be missed
+ *   (WebKit's elementsFromPoint is unreliable in a shadow root). 
+ *   TODO(FW-6594): Determine if this workaround can be removed when iOS 16 is
+ *   no longer supported.
+ */
+:host(.option-active),
+:host([part~="active"]) {
   color: current-color(base);
 }