test(core): add copy paste e2e tests

package.json

@@ -102,7 +102,7 @@
     "@bjoerge/mutiny": "^0.5.3",
     "@google-cloud/storage": "^7.11.0",
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "1.41.2",
+    "@playwright/test": "1.44.1",
     "@repo/package.config": "workspace:*",
     "@repo/tsconfig": "workspace:*",
     "@sanity/client": "^6.20.0",

packages/@sanity/portable-text-editor/package.json

@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "1.41.2",
+    "@playwright/test": "1.44.1",
     "@portabletext/toolkit": "^2.0.15",
     "@repo/package.config": "workspace:*",
     "@sanity/diff-match-patch": "^3.1.1",

packages/sanity/package.json

@@ -255,8 +255,8 @@
   "devDependencies": {
     "@jest/expect": "^29.7.0",
     "@jest/globals": "^29.7.0",
-    "@playwright/experimental-ct-react": "1.41.2",
-    "@playwright/test": "1.41.2",
+    "@playwright/experimental-ct-react": "1.44.1",
+    "@playwright/test": "1.44.1",
     "@repo/package.config": "workspace:*",
     "@sanity/codegen": "3.46.1",
     "@sanity/generate-help-url": "^3.0.0",

packages/sanity/playwright-ct.config.ts

@@ -6,6 +6,7 @@ import {defineConfig, devices} from '@playwright/experimental-ct-react'
 const TESTS_PATH = path.join(__dirname, 'playwright-ct', 'tests')
 const HTML_REPORT_PATH = path.join(__dirname, 'playwright-ct', 'report')
 const ARTIFACT_OUTPUT_PATH = path.join(__dirname, 'playwright-ct', 'results')
+const isCI = !!process.env.CI
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -47,7 +48,8 @@ export default defineConfig({
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 40 * 1000,
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: isCI ? 'on-all-retries' : 'retain-on-failure',
+    video: isCI ? 'on-first-retry' : 'retain-on-failure',
     /* Port to use for Playwright component endpoint. */
     ctPort: 3100,
     /* Configure Playwright vite config */
@@ -69,8 +71,29 @@ export default defineConfig({
 
   /* Configure projects for major browsers */
   projects: [
-    {name: 'chromium', use: {...devices['Desktop Chrome']}},
-    {name: 'firefox', use: {...devices['Desktop Firefox']}},
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        permissions: ['clipboard-read', 'clipboard-write'],
+        contextOptions: {
+          // chromium-specific permissions
+          permissions: ['clipboard-read', 'clipboard-write'],
+        },
+      },
+    },
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        launchOptions: {
+          firefoxUserPrefs: {
+            'dom.events.asyncClipboard.readText': true,
+            'dom.events.testing.asyncClipboard': true,
+          },
+        },
+      },
+    },
     {name: 'webkit', use: {...devices['Desktop Safari']}},
   ],
 })

packages/sanity/playwright-ct/tests/fixtures/copyPasteFixture.ts

@@ -0,0 +1,89 @@
+import {test as base} from '@playwright/experimental-ct-react'
+
+export const test = base.extend<{
+  getClipboardItemByMimeTypeAsText: (mimeType: string) => Promise<string | null>
+  setClipboardItems: (items: ClipboardItem[]) => Promise<void>
+  getClipboardItems: () => Promise<ClipboardItem[]>
+  getClipboardItemsAsText: () => Promise<string>
+}>({
+  page: async ({page}, use) => {
+    const setupClipboardMocks = async () => {
+      await page.addInitScript(() => {
+        const mockClipboard = {
+          read: () => {
+            return Promise.resolve((window as any).__clipboardItems)
+          },
+          write: (newItems: ClipboardItem[]) => {
+            ;(window as any).__clipboardItems = newItems
+
+            return Promise.resolve()
+          },
+          readText: () => {
+            const items = (window as any).__clipboardItems as ClipboardItem[]
+            const textItem = items.find((item) => item.types.includes('text/plain'))
+            return textItem
+              ? textItem.getType('text/plain').then((blob: Blob) => blob.text())
+              : Promise.resolve('')
+          },
+          writeText: (text: string) => {
+            const textBlob = new Blob([text], {type: 'text/plain'})
+            ;(window as any).__clipboardItems = [new ClipboardItem({'text/plain': textBlob})]
+            return Promise.resolve()
+          },
+        }
+        Object.defineProperty(Object.getPrototypeOf(navigator), 'clipboard', {
+          value: mockClipboard,
+          writable: false,
+        })
+        ;(window as any).__clipboardItems = []
+      })
+    }
+
+    await setupClipboardMocks()
+
+    page.on('framenavigated', async () => {
+      await setupClipboardMocks()
+    })
+
+    await use(page)
+  },
+
+  setClipboardItems: async ({page}, use) => {
+    await use(async (items: ClipboardItem[]) => {
+      ;(window as any).__clipboardItems = items
+    })
+  },
+
+  getClipboardItems: async ({page}, use) => {
+    await use(() => {
+      return page.evaluate(() => navigator.clipboard.read())
+    })
+  },
+
+  getClipboardItemsAsText: async ({page}, use) => {
+    await use(async () => {
+      return page.evaluate(async () => {
+        const items = await navigator.clipboard.read()
+        const textItem = items.find((item) => item.types.includes('text/plain'))
+
+        return textItem
+          ? textItem.getType('text/plain').then((blob: Blob) => blob.text())
+          : Promise.resolve('')
+      })
+    })
+  },
+
+  getClipboardItemByMimeTypeAsText: async ({page}, use) => {
+    await use(async (mimeType: string) => {
+      return page.evaluate(async (mime) => {
+        const items = await navigator.clipboard.read()
+        const textItem = items.find((item) => item.types.includes(mime))
+        const content = textItem ? textItem.getType(mime).then((blob: Blob) => blob.text()) : null
+
+        return content
+      }, mimeType)
+    })
+  },
+})
+
+export const {expect} = test

packages/sanity/playwright-ct/tests/fixtures/debugFixture.ts

@@ -0,0 +1,31 @@
+import {test as base} from '@playwright/experimental-ct-react'
+
+export const test = base.extend<{
+  logActiveElement: () => Promise<{
+    tagName: string
+    id: string
+    className: string
+    name: string
+    attributes: Record<string, string>
+  }>
+}>({
+  logActiveElement: async ({page}, use) => {
+    await use(async () => {
+      const activeElementInfo = await page.evaluate(() => {
+        const active = document.activeElement as HTMLElement
+        return {
+          tagName: active.tagName,
+          id: active.id,
+          className: active.className,
+          name: active.nodeName,
+          attributes: Object.fromEntries(
+            Array.from(active.attributes).map((attr) => [attr.name, attr.value]),
+          ),
+        }
+      })
+      return Promise.resolve(activeElementInfo)
+    })
+  },
+})
+
+export {expect} from '@playwright/test'

packages/sanity/playwright-ct/tests/fixtures/index.ts

@@ -0,0 +1,10 @@
+import {test as base} from '@playwright/experimental-ct-react'
+import {mergeTests} from '@playwright/test'
+
+import {test as copyPasteFixture} from './copyPasteFixture'
+import {test as debugFixture} from './debugFixture'
+import {test as scrollToTopFixture} from './scrollToTopFixture'
+
+export const test = mergeTests(base, copyPasteFixture, scrollToTopFixture, debugFixture)
+
+export {expect} from '@playwright/test'

packages/sanity/playwright-ct/tests/fixtures/scrollToTopFixture.ts

@@ -0,0 +1,20 @@
+import {expect, type Locator, test as baseTest} from '@playwright/test'
+
+type ScrollToTop = (locator: Locator) => Promise<void>
+
+export const test = baseTest.extend<{
+  scrollToTop: ScrollToTop
+}>({
+  scrollToTop: async ({page}, use) => {
+    const scrollToTop: ScrollToTop = async (locator: Locator) => {
+      await locator.evaluate((element) => {
+        element.scrollIntoView({block: 'start', inline: 'nearest'})
+      })
+
+      const boundingBox = await locator.boundingBox()
+      await expect(boundingBox?.y).toBeLessThanOrEqual(1)
+    }
+
+    await use(scrollToTop)
+  },
+})

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

@@ -1,5 +1,4 @@
-import {expect, test} from '@playwright/experimental-ct-react'
-
+import {expect, test} from '../../../fixtures'
 import {testHelpers} from '../../../utils/testHelpers'
 import {ObjectBlockStory} from './ObjectBlockStory'
 
@@ -140,19 +139,20 @@ test.describe('Portable Text Input', () => {
       await expect($closeButton.or($closeButtonSvg).first()).toBeFocused()
 
       // Tab to the input
-      await page.keyboard.press('Tab')
-
-      const $dialogInput = await page.getByTestId('default-edit-object-dialog').locator('input')
+      await page.keyboard.press('Tab+Tab')
 
       // Assertion: Dialog should not be closed when you tab to input
-      await expect($dialog).not.toBeHidden()
+      await expect(page.getByTestId('default-edit-object-dialog')).not.toBeHidden()
 
       // Check that we have focus on the input
-      await expect($dialogInput).toBeFocused()
+      await expect(page.getByTestId('default-edit-object-dialog').locator('input')).toBeFocused()
 
       // Assertion: Focus should be locked
-      await page.keyboard.press('Tab+Tab')
-      await expect($dialogInput).toBeFocused()
+      await page.keyboard.press('Tab+Tab+Tab')
+
+      await expect(page.getByTestId('default-edit-object-dialog')).not.toBeHidden()
+
+      await expect(page.getByTestId('default-edit-object-dialog').locator('input')).toBeFocused()
     })
 
     test('Blocks that appear in the menu bar should always display a title', async ({

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

@@ -1,9 +1,10 @@
 /* eslint-disable max-nested-callbacks */
 import path from 'node:path'
 
-import {expect, test} from '@playwright/experimental-ct-react'
+// import {expect, test} from '@playwright/experimental-ct-react'
 import {type Path, type SanityDocument} from '@sanity/types'
 
+import {expect, test} from '../../../../fixtures'
 import {testHelpers} from '../../../../utils/testHelpers'
 import CopyPasteStory from './CopyPasteStory'
 import {