Add serialization locks around copy/paste to workaround a lack of cli…

…pboard isolation

package.json

@@ -97,6 +97,7 @@
     "autoprefixer": "^10.4.20",
     "bundlesize": "^0.18.2",
     "chai": "^5.1.1",
+    "cross-process-lock": "^2.1.1",
     "csso-cli": "^4.0.2",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-base": "^15.0.0",

test-e2e/test-suit.ts

@@ -1,4 +1,6 @@
 import { expect, type Locator, type Page } from '@playwright/test';
+import { lock } from 'cross-process-lock';
+import { writeFileSync, existsSync } from 'fs';
 
 export class TestSuit {
   readonly testId: string;
@@ -176,4 +178,20 @@ export class TestSuit {
   async expectedItemCount(count: number): Promise<void> {
     await expect(this.items).toHaveCount(count);
   }
+
+  // eslint-disable-next-line class-methods-use-this
+  async crossProcessLock(func: () => Promise<void>): Promise<void> {
+    // playwright lacks clipboard isolation, so use a lock to ensure other tests don't modify the clipboard at the same time
+    // https://github.com/microsoft/playwright/issues/13097#issuecomment-1445271511
+    const name = 'test-results/clipboard';
+    if (!existsSync(name)) {
+      writeFileSync(name, '', 'utf8');
+    }
+    const unlock = await lock(name, { waitTimeout: 30000 });
+    try {
+      await func();
+    } finally {
+      await unlock();
+    }
+  }
 }

test-e2e/tests/select-multiple.spec.ts

@@ -653,8 +653,10 @@ describe(`Choices - select multiple`, () => {
             await suite.startWithClick();
             await suite.expectVisibleDropdown();
 
-            await page.evaluate(`navigator.clipboard.writeText('${country}')`);
-            await suite.ctrlV();
+            await suite.crossProcessLock(async () => {
+              await page.evaluate(`navigator.clipboard.writeText('${country}')`);
+              await suite.ctrlV();
+            });
 
             const choice = suite.selectableChoices.first();
             await expect(choice).toHaveText(city);

test-e2e/tests/select-one.spec.ts

@@ -528,8 +528,10 @@ describe(`Choices - select one`, () => {
             await suite.startWithClick();
             await suite.expectVisibleDropdown();
 
-            await page.evaluate(`navigator.clipboard.writeText('${country}')`);
-            await suite.ctrlV();
+            await suite.crossProcessLock(async () => {
+              await page.evaluate(`navigator.clipboard.writeText('${country}')`);
+              await suite.ctrlV();
+            });
 
             const choice = suite.selectableChoices.first();
             await expect(choice).toHaveText(city);