Clipboard support for E2E tests

Author: luin

.github/workflows/_test.yml

@@ -17,8 +17,10 @@ jobs:
         run: npx playwright install --with-deps
         working-directory: packages/quill
       - name: Run Playwright tests
-        run: npm run test:e2e
-        working-directory: packages/quill
+        uses: coactions/setup-xvfb@v1
+        with:
+          run: npm run test:e2e -- --headed
+          working-directory: packages/quill
   fuzz:
     name: Fuzz Tests
     runs-on: ubuntu-latest

package-lock.json

@@ -17,7 +17,7 @@
     "@babel/core": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-typescript": "^7.23.3",
-    "@playwright/test": "1.38.1",
+    "@playwright/test": "1.44.1",
     "@types/highlight.js": "^9.12.4",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.10.0",
@@ -36,6 +36,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-require-extensions": "^0.1.3",
+    "glob": "10.4.2",
     "highlight.js": "^9.18.1",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.3",

packages/quill/package.json

@@ -21,7 +21,15 @@ export default defineConfig({
     ignoreHTTPSErrors: true,
   },
   projects: [
-    { name: 'Chrome', use: { ...devices['Desktop Chrome'] } },
+    {
+      name: 'Chrome',
+      use: {
+        ...devices['Desktop Chrome'],
+        contextOptions: {
+          permissions: ['clipboard-read', 'clipboard-write'],
+        },
+      },
+    },
     { name: 'Firefox', use: { ...devices['Desktop Firefox'] } },
     { name: 'Safari', use: { ...devices['Desktop Safari'] } },
   ],

packages/quill/playwright.config.ts

@@ -0,0 +1,93 @@
+import type { Page } from '@playwright/test';
+import { SHORTKEY } from '../utils/index.js';
+
+class Clipboard {
+  constructor(private page: Page) {}
+
+  async copy() {
+    await this.page.keyboard.press(`${SHORTKEY}+c`);
+  }
+
+  async cut() {
+    await this.page.keyboard.press(`${SHORTKEY}+x`);
+  }
+
+  async paste() {
+    await this.page.keyboard.press(`${SHORTKEY}+v`);
+  }
+
+  async writeText(value: string) {
+    // Playwright + Safari + Linux doesn't support async clipboard API
+    // https://github.com/microsoft/playwright/issues/18901
+    const hasFallbackWritten = await this.page.evaluate((value) => {
+      if (navigator.clipboard) return false;
+      const textArea = document.createElement('textarea');
+      textArea.value = value;
+
+      textArea.style.top = '0';
+      textArea.style.left = '0';
+      textArea.style.position = 'fixed';
+
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+
+      const isSupported = document.execCommand('copy');
+      textArea.remove();
+      return isSupported;
+    }, value);
+
+    if (!hasFallbackWritten) {
+      await this.write(value, 'text/plain');
+    }
+  }
+
+  async writeHTML(value: string) {
+    return this.write(value, 'text/html');
+  }
+
+  async readText() {
+    return this.read('text/plain');
+  }
+
+  async readHTML() {
+    const html = await this.read('text/html');
+    return html.replace(/<meta[^>]*>/g, '');
+  }
+
+  private async read(type: string) {
+    const isHTML = type === 'text/html';
+    await this.page.evaluate((isHTML) => {
+      const dataContainer = document.createElement(isHTML ? 'div' : 'textarea');
+      if (isHTML) dataContainer.setAttribute('contenteditable', 'true');
+      dataContainer.id = '_readClipboard';
+      document.body.appendChild(dataContainer);
+      dataContainer.focus();
+      return dataContainer;
+    }, isHTML);
+    await this.paste();
+    const locator = this.page.locator('#_readClipboard');
+    const data = await (isHTML ? locator.innerHTML() : locator.inputValue());
+    await locator.evaluate((node) => node.remove());
+    return data;
+  }
+
+  private async write(data: string, type: string) {
+    await this.page.evaluate(
+      async ({ data, type }) => {
+        if (type === 'text/html') {
+          await navigator.clipboard.write([
+            new ClipboardItem({
+              'text/html': new Blob([data], { type: 'text/html' }),
+            }),
+          ]);
+        } else {
+          await navigator.clipboard.writeText(data);
+        }
+      },
+      { data, type },
+    );
+  }
+}
+
+export default Clipboard;

packages/quill/test/e2e/fixtures/Clipboard.ts

@@ -1,6 +1,8 @@
 import { test as base } from '@playwright/test';
 import EditorPage from '../pageobjects/EditorPage.js';
 import Composition from './Composition.js';
+import Locker from './utils/Locker.js';
+import Clipboard from './Clipboard.js';
 
 export const test = base.extend<{
   editorPage: EditorPage;
@@ -18,6 +20,15 @@ export const test = base.extend<{
 
     use(new Composition(page, browserName));
   },
+  clipboard: [
+    async ({ page }, use) => {
+      const locker = new Locker('clipboard');
+      await locker.lock();
+      await use(new Clipboard(page));
+      await locker.release();
+    },
+    { timeout: 30000 },
+  ],
 });
 
 export const CHAPTER = 'Chapter 1. Loomings.';

packages/quill/test/e2e/fixtures/index.ts

@@ -0,0 +1,39 @@
+import { unlink, writeFile } from 'fs/promises';
+import { unlinkSync } from 'fs';
+import { tmpdir } from 'os';
+import { join } from 'path';
+import { globSync } from 'glob';
+
+const sleep = (ms: number) =>
+  new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+
+const PREFIX = 'playwright_locker_';
+
+class Locker {
+  public static clearAll() {
+    globSync(join(tmpdir(), `${PREFIX}*.txt`)).forEach(unlinkSync);
+  }
+
+  constructor(private key: string) {}
+
+  private get filePath() {
+    return join(tmpdir(), `${PREFIX}${this.key}.txt`);
+  }
+
+  async lock() {
+    try {
+      await writeFile(this.filePath, '', { flag: 'wx' });
+    } catch {
+      await sleep(50);
+      await this.lock();
+    }
+  }
+
+  async release() {
+    await unlink(this.filePath);
+  }
+}
+
+export default Locker;