wrap most clipboard related e2e tests with withExclusiveClipboardAccess

facebook · Nov 5, 2024 · 71390da · 71390da
1 parent d945701
commit 71390da
Show file tree

Hide file tree

Showing 16 changed files with 1,165 additions and 1,019 deletions.
diff --git a/.gitignore b/.gitignore
@@ -15,6 +15,7 @@ npm
 .env.production.local
 .ts-temp
 .docusaurus
+.playwright-clipboard.lock
 e2e-screenshots
 test-results
 playwright-report

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -134,6 +134,7 @@
     "@types/node": "^17.0.31",
     "@types/prettier": "^2.7.3",
     "@types/prismjs": "^1.26.0",
+    "@types/proper-lockfile": "^4.1.4",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/trusted-types": "^2.0.7",
@@ -178,6 +179,7 @@
     "prettier-plugin-hermes-parser": "^0.20.1",
     "prettier-plugin-organize-attributes": "^0.0.5",
     "prettier-plugin-tailwindcss": "^0.4.1",
+    "proper-lockfile": "^4.1.2",
     "react-test-renderer": "^17.0.2",
     "rollup": "^4.22.4",
     "size-limit": "^11.1.2",

diff --git a/packages/lexical-playground/__tests__/e2e/CodeActionMenu.spec.mjs b/packages/lexical-playground/__tests__/e2e/CodeActionMenu.spec.mjs
@@ -18,6 +18,7 @@ import {
   pasteFromClipboard,
   test,
   waitForSelector,
+  withExclusiveClipboardAccess,
 } from '../utils/index.mjs';
 
 test.describe('CodeActionMenu', () => {
@@ -84,31 +85,33 @@ test.describe('CodeActionMenu', () => {
 
     await mouseMoveToSelector(page, 'code.PlaygroundEditorTheme__code');
 
-    if (browserName === 'chromium') {
-      await context.grantPermissions(['clipboard-write']);
-      await click(page, 'button[aria-label=copy]');
-      await paste(page);
-      await context.clearPermissions();
-    } else {
-      await waitForSelector(page, 'button[aria-label=copy]');
+    await withExclusiveClipboardAccess(async () => {
+      if (browserName === 'chromium') {
+        await context.grantPermissions(['clipboard-write']);
+        await click(page, 'button[aria-label=copy]');
+        await paste(page);
+        await context.clearPermissions();
+      } else {
+        await waitForSelector(page, 'button[aria-label=copy]');
 
-      const copiedText = await evaluate(page, () => {
-        let text = null;
+        const copiedText = await evaluate(page, () => {
+          let text = null;
 
-        navigator.clipboard._writeText = navigator.clipboard.writeText;
-        navigator.clipboard.writeText = function (data) {
-          text = data;
-          this._writeText(data);
-        };
-        document.querySelector('button[aria-label=copy]').click();
+          navigator.clipboard._writeText = navigator.clipboard.writeText;
+          navigator.clipboard.writeText = function (data) {
+            text = data;
+            this._writeText(data);
+          };
+          document.querySelector('button[aria-label=copy]').click();
 
-        return text;
-      });
+          return text;
+        });
 
-      await pasteFromClipboard(page, {
-        'text/plain': copiedText,
-      });
-    }
+        await pasteFromClipboard(page, {
+          'text/plain': copiedText,
+        });
+      }
+    });
 
     await assertHTML(
       page,

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/LinksHTMLCopyAndPaste.spec.mjs
@@ -28,6 +28,7 @@ import {
   locate,
   pasteFromClipboard,
   test,
+  withExclusiveClipboardAccess,
 } from '../../../utils/index.mjs';
 
 test.describe('HTML Links CopyAndPaste', () => {
@@ -148,9 +149,11 @@ test.describe('HTML Links CopyAndPaste', () => {
     await page.keyboard.down('Shift');
     await moveLeft(page, 2);
     await page.keyboard.up('Shift');
-    const clipboard = await copyToClipboard(page);
-    await moveToEditorEnd(page);
-    await pasteFromClipboard(page, clipboard);
+    await withExclusiveClipboardAccess(async () => {
+      const clipboard = await copyToClipboard(page);
+      await moveToEditorEnd(page);
+      await pasteFromClipboard(page, clipboard);
+    });
 
     await assertHTML(
       page,

diff --git a/...es/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ContextMenuCopyAndPaste.spec.mjs b/...es/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/ContextMenuCopyAndPaste.spec.mjs
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
+
 import {moveToLineEnd} from '../../../keyboardShortcuts/index.mjs';
 import {
   assertHTML,
@@ -15,6 +16,7 @@ import {
   initialize,
   pasteFromClipboard,
   test,
+  withExclusiveClipboardAccess,
 } from '../../../utils/index.mjs';
 
 test.describe('ContextMenuCopyAndPaste', () => {
@@ -33,13 +35,15 @@ test.describe('ContextMenuCopyAndPaste', () => {
     await page.pause();
     await doubleClick(page, 'div[contenteditable="false"] span');
     await page.pause();
-    await click(page, 'div[contenteditable="false"] span', {button: 'right'});
-    await click(page, '#typeahead-menu [role="option"] :text("Copy")');
+    await withExclusiveClipboardAccess(async () => {
+      await click(page, 'div[contenteditable="false"] span', {button: 'right'});
+      await click(page, '#typeahead-menu [role="option"] :text("Copy")');
 
-    await click(page, '.unlock');
-    await focusEditor(page);
+      await click(page, '.unlock');
+      await focusEditor(page);
 
-    await pasteFromClipboard(page);
+      await pasteFromClipboard(page);
+    });
 
     await assertHTML(
       page,
@@ -60,27 +64,29 @@ test.describe('ContextMenuCopyAndPaste', () => {
   }) => {
     test.skip(isCollab || isPlainText || browserName !== 'chromium');
 
-    await page
-      .context()
-      .grantPermissions(['clipboard-read', 'clipboard-write']);
+    await withExclusiveClipboardAccess(async () => {
+      await page
+        .context()
+        .grantPermissions(['clipboard-read', 'clipboard-write']);
 
-    await click(page, '.font-increment');
-    await focusEditor(page);
-    await page.keyboard.type('MLH Fellowship');
-    //await page.pause();
-    await moveToLineEnd(page);
-    await page.keyboard.press('Enter');
-    await page.keyboard.type('Fall 2024');
+      await click(page, '.font-increment');
+      await focusEditor(page);
+      await page.keyboard.type('MLH Fellowship');
+      //await page.pause();
+      await moveToLineEnd(page);
+      await page.keyboard.press('Enter');
+      await page.keyboard.type('Fall 2024');
 
-    await click(page, '.lock');
+      await click(page, '.lock');
 
-    await doubleClick(page, 'div[contenteditable="false"] span');
-    await click(page, 'div[contenteditable="false"] span', {button: 'right'});
-    await click(page, '#typeahead-menu [role="option"] :text("Copy")');
+      await doubleClick(page, 'div[contenteditable="false"] span');
+      await click(page, 'div[contenteditable="false"] span', {button: 'right'});
+      await click(page, '#typeahead-menu [role="option"] :text("Copy")');
 
-    await click(page, '.unlock');
-    await focusEditor(page);
-    await pasteFromClipboard(page);
+      await click(page, '.unlock');
+      await focusEditor(page);
+      await pasteFromClipboard(page);
+    });
 
     await assertHTML(
       page,