test: add mutex to clipboard copy & paste operation to reduce flaky (#11884)

tests/kit/src/utils/keyboard.ts

@@ -1,4 +1,5 @@
-import type { Page } from '@playwright/test';
+import { type Page } from '@playwright/test';
+import { AsyncLock } from '@toeverything/infra/utils';
 
 const IS_MAC = process.platform === 'darwin';
 
@@ -102,13 +103,18 @@ export async function undoByKeyboard(page: Page) {
   await keyUpCtrlOrMeta(page);
 }
 
-export async function writeTextToClipboard(page: Page, text: string) {
+const clipboardMutex = new AsyncLock();
+
+export async function writeTextToClipboard(
+  page: Page,
+  text: string,
+  paste = true
+) {
+  using _release = await clipboardMutex.acquire();
   // paste the url
   await page.evaluate(
     async ([text]) => {
-      const clipData = {
-        'text/plain': text,
-      };
+      navigator.clipboard.writeText('');
       const e = new ClipboardEvent('paste', {
         clipboardData: new DataTransfer(),
       });
@@ -116,11 +122,14 @@ export async function writeTextToClipboard(page: Page, text: string) {
         writable: false,
         value: document,
       });
-      Object.entries(clipData).forEach(([key, value]) => {
-        e.clipboardData?.setData(key, value);
-      });
+      e.clipboardData!.setData('text/plain', text);
       document.dispatchEvent(e);
     },
     [text]
   );
+  if (paste) {
+    await keyDownCtrlOrMeta(page);
+    await page.keyboard.press('v', { delay: 50 });
+    await keyUpCtrlOrMeta(page);
+  }
 }

tests/kit/src/utils/page-logic.ts

@@ -60,8 +60,7 @@ export async function type(page: Page, content: string, delay = 50) {
 }
 
 export const createLinkedPage = async (page: Page, pageName?: string) => {
-  // fixme: workaround for @ popover not showing up when editor is not ready
-  await page.waitForTimeout(500);
+  await waitForEditorLoad(page);
   await page.keyboard.type('@', { delay: 50 });
   const linkedPagePopover = page.locator('.linked-doc-popover');
   await expect(linkedPagePopover).toBeVisible();