test(playwright-ct): fix issues and flake (#8016)

package.json

@@ -102,7 +102,7 @@
   "prettier": "@sanity/prettier-config",
   "devDependencies": {
     "@google-cloud/storage": "^7.11.0",
-    "@playwright/test": "1.44.1",
+    "@playwright/test": "1.49.1",
     "@repo/dev-aliases": "workspace:*",
     "@repo/package.config": "workspace:*",
     "@repo/test-config": "workspace:*",

packages/sanity/package.json

@@ -266,8 +266,8 @@
     "yargs": "^17.3.0"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.44.1",
-    "@playwright/test": "1.44.1",
+    "@playwright/experimental-ct-react": "1.49.1",
+    "@playwright/test": "1.49.1",
     "@repo/dev-aliases": "workspace:*",
     "@repo/package.config": "workspace:*",
     "@repo/test-config": "workspace:*",

packages/sanity/playwright-ct.config.ts

@@ -39,10 +39,10 @@ export default defineConfig({
       ],
 
   /* Maximum time one test can run for. */
-  timeout: 30 * 1000,
+  timeout: 60 * 1000,
   expect: {
     // Maximum time expect() should wait for the condition to be met.
-    timeout: 10 * 1000,
+    timeout: 40 * 1000,
   },
 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Decorators.spec.tsx

@@ -44,12 +44,6 @@ test.describe('Portable Text Input', () => {
       page,
       browserName,
     }) => {
-      // avoid flakiness to make sure the test has the best chance despite being slow
-      test.slow()
-
-      // For now, only test in Chromium due to flakiness in Firefox and WebKit
-      test.skip(browserName !== 'chromium')
-
       const {
         getModifierKey,
         getFocusedPortableTextEditor,
@@ -62,7 +56,7 @@ test.describe('Portable Text Input', () => {
       await mount(<DecoratorsStory />)
       const $portableTextInput = await getFocusedPortableTextInput('field-defaultDecorators')
       const $pte = await getFocusedPortableTextEditor('field-defaultDecorators')
-      const modifierKey = getModifierKey()
+      const modifierKey = getModifierKey({browserName})
 
       for (const decorator of DEFAULT_DECORATORS) {
         if (decorator.hotkey) {

packages/sanity/playwright-ct/tests/formBuilder/inputs/PortableText/Toolbar.spec.tsx

@@ -106,7 +106,7 @@ test.describe('Portable Text Input', () => {
     })
 
     // TODO - needs rewrite to avoid flakiness
-    test.skip('Opening block style', () => {
+    test.describe('Opening block style', () => {
       test('on a simple editor', async ({mount, page}) => {
         const {getFocusedPortableTextInput} = testHelpers({page})
         await mount(<ToolbarStory />)

packages/sanity/playwright-ct/tests/utils/testHelpers.tsx

@@ -13,7 +13,7 @@ export function testHelpers({page}: {page: PlaywrightTestArgs['page']}) {
       await $overlay.press('Space')
     }
 
-    await expect($overlay).not.toBeVisible({timeout: 1500})
+    await expect($overlay).not.toBeVisible()
   }
   return {
     /**
@@ -105,11 +105,20 @@ export function testHelpers({page}: {page: PlaywrightTestArgs['page']}) {
      * Gets the appropriate modifier key for the current platform.
      * @returns The modifier key name ('Meta' for macOS, 'Control' for other platforms).
      */
-    getModifierKey: () => {
-      if (process.platform === 'darwin') {
+    getModifierKey: (options?: {browserName?: string}) => {
+      // There's a bug with Firefox and Chromium on macOS where it use 'Control' instead of 'Meta' inside Playwright for some reason
+      if (
+        process.platform === 'darwin' &&
+        options?.browserName &&
+        ['chromium', 'firefox'].includes(options.browserName)
+      ) {
+        return 'Control'
+      }
+      // Webkit on Linux uses 'Meta' instead of 'Control' as the modifier key for some reason
+      if (process.platform === 'linux' && options?.browserName === 'webkit') {
         return 'Meta'
       }
-      return 'Control'
+      return 'ControlOrMeta'
     },
     /**
      * Types text with a delay using `page.keyboard.type`. Default delay emulates a human typing.

perf/tests/package.json

@@ -15,7 +15,7 @@
     "studio:dev": "cd perf/studio && SANITY_STUDIO_DATASET=dev pnpm dev"
   },
   "dependencies": {
-    "@playwright/test": "1.44.1",
+    "@playwright/test": "1.49.1",
     "@sanity/client": "^6.24.1",
     "@sanity/uuid": "^3.0.1",
     "dotenv": "^16.0.3",