fix(pie-monorepo): DSW-1969 updated Playwright and Percy dependencies

.changeset/slow-chicken-allow.md

@@ -0,0 +1,5 @@
+---
+"pie-monorepo": patch
+---
+
+Updated Playwright and Percy CLI dependancies

.github/workflows/ci.yml

@@ -45,6 +45,11 @@ env:
   PERCY_TOKEN_PIE_TEXTAREA: ${{ secrets.PERCY_TOKEN_PIE_TEXTAREA }}
   PERCY_TOKEN_PIE_TOAST: ${{ secrets.PERCY_TOKEN_PIE_TOAST }}
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  PERCY_DEBUG: "*"
+  LOG_LEVEL: debug
+  PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS: true
+  PERCY_PAGE_LOAD_TIMEOUT: 60000
+  PERCY_NETWORK_IDLE_WAIT_TIMEOUT: 60000
 
 jobs:
   dependency-changeset:

configs/pie-components-config/playwright-lit-visual-config.js

@@ -30,6 +30,11 @@ export function getPlaywrightVisualConfig () {
             /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
             trace: 'on',
             testIdAttribute: 'data-test-id',
+            discovery: {
+                disallowedHostnames: [
+                    'unpkg.com'
+                ],
+            },
         },
 
         /* Configure projects for major browsers */

package.json

@@ -79,12 +79,12 @@
     "@justeattakeaway/pie-webc-testing": "0.13.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "@justeattakeaway/stylelint-config-pie": "0.7.0",
-    "@percy/cli": "1.26.3",
-    "@percy/playwright": "1.0.4",
-    "@playwright/experimental-ct-react": "1.32.3",
-    "@playwright/test": "1.32.3",
+    "@percy/cli": "1.28.8",
+    "@percy/playwright": "1.0.5",
+    "@playwright/experimental-ct-react": "1.41.0",
+    "@playwright/test": "1.41.0",
     "@rollup/plugin-node-resolve": "15.1.0",
-    "@sand4rt/experimental-ct-web": "1.0.8",
+    "@sand4rt/experimental-ct-web": "1.41.0",
     "@types/node": "20.4.8",
     "@types/react": "18.3.3",
     "@typescript-eslint/eslint-plugin": "5.62.0",
@@ -140,6 +140,7 @@
   "resolutions": {
     "@babel/traverse": "7.22.5",
     "lit": "3.1.2",
-    "tar": "6.2.1"
+    "tar": "6.2.1",
+    "@playwright/experimental-ct-core": "1.41.0"
   }
 }

packages/components/pie-button/test/component/pie-button.spec.ts

@@ -44,6 +44,11 @@ test('should correctly work with native click events', async ({ mount }) => {
 });
 
 test.describe('Form Actions', () => {
+    test.beforeEach(async ({ mount }) => {
+        const component = await mount(PieButton);
+        await component.unmount();
+    });
+
     test.describe('Submit', () => {
         test('should correctly submit an HTML form when type is `submit`', async ({ page }) => {
             // Arrange

packages/components/pie-button/test/visual/pie-button-size.spec.ts

@@ -13,6 +13,7 @@ import {
     WebComponentTestWrapper,
 } from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
 import { percyWidths } from '@justeattakeaway/pie-webc-testing/src/percy/breakpoints.ts';
+import { PieButton } from '../../src/index.ts';
 import { sizes } from '../../src/defs.ts';
 
 const props: PropObject = {
@@ -27,9 +28,10 @@ const renderTestPieButton = (propVals: WebComponentPropValues) => `<pie-button s
 
 const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
 
-// eslint-disable-next-line no-empty-pattern
-test.beforeEach(async ({ }, testInfo) => {
+test.beforeEach(async ({ mount }, testInfo) => {
     testInfo.setTimeout(testInfo.timeout + 40000);
+    const component = await mount(PieButton);
+    await component.unmount();
 });
 
 test('should render all size variations', async ({ page, mount }) => {

packages/components/pie-modal/test/component/pie-modal.spec.ts

@@ -18,8 +18,10 @@ import {
 let modalComponent: ModalComponent;
 
 test.describe('modal', () => {
-    test.beforeEach(async ({ page }) => {
+    test.beforeEach(async ({ page, mount }) => {
         modalComponent = new ModalComponent(page);
+        const component = await mount(PieModal);
+        await component.unmount();
     });
 
     test('should be visible when opened', async ({ mount }) => {
@@ -417,14 +419,18 @@ test.describe('modal', () => {
                 expect(isModalVisible).toBe(true);
             });
 
-            test('should NOT close the modal when the Escape key is pressed', async ({ mount, page }) => {
+            // To be addressed in ticket DSW-2218
+            test.skip('should NOT close the modal when the Escape key is pressed', async ({ mount, page }) => {
                 // Arrange
-                await mount(PieModal, {
-                    props: {
-                        isOpen: true,
-                        isDismissible: false,
+                await mount(
+                    PieModal,
+                    {
+                        props: {
+                            isOpen: true,
+                            isDismissible: false,
+                        },
                     },
-                });
+                );
 
                 // Act
                 await page.keyboard.press('Escape');

packages/components/pie-switch/test/component/pie-switch.spec.ts

@@ -12,6 +12,11 @@ const inputSelector = '[data-test-id="switch-input"]';
 const switchLabelSelector = (placement: LabelPlacement = 'leading') => `[data-test-id="switch-label-${placement}"]`;
 
 test.describe('Component: `Pie switch`', () => {
+    test.beforeEach(async ({ mount }) => {
+        const component = await mount(PieSwitch);
+        await component.unmount();
+    });
+
     test('should be visible', async ({ mount, page }) => {
         // Arrange
         await mount(PieSwitch, {