✅(frontend) add wopi editor e2e test

Verify that a docx file opens in the Collabora editor,
the canvas renders correctly via visual regression, and
clipboard copy-paste works within the iframe. The iframe
clipboard policy now uses wildcards to allow cross-origin
clipboard access needed by Collabora.

src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts

@@ -0,0 +1,86 @@
+import path from "path";
+import test, { expect } from "@playwright/test";
+import { clearDb, login } from "./utils-common";
+import { clickToMyFiles } from "./utils-navigate";
+import { uploadFile } from "./utils/upload-utils";
+import { grantClipboardPermissions } from "./utils/various-utils";
+
+test("Wopi editor", async ({ page, context, browserName }) => {
+  test.skip(browserName !== "chromium", "Only runs on chromium");
+  grantClipboardPermissions(browserName, context);
+  await clearDb();
+  await login(page, "drive@example.com");
+  await page.goto("/");
+  await clickToMyFiles(page);
+  await expect(page.getByText("This tab is empty")).toBeVisible();
+
+  //   Start waiting for file chooser before clicking. Note no await.
+  await uploadFile(page, path.join(__dirname, "/assets/empty_doc.docx"));
+
+  // Wait for the file to be uploaded and visible in the list
+  await expect(page.getByText("Drop your files here")).not.toBeVisible();
+  await expect(page.getByRole("cell", { name: "empty_doc.docx" })).toBeVisible({
+    timeout: 10000,
+  });
+
+  // Click on the HEIC file to open the preview
+  await page.getByRole("cell", { name: "empty_doc.docx" }).dblclick();
+
+  // Check that the file preview is visible
+  const filePreview = page.getByTestId("file-preview");
+  await expect(filePreview).toBeVisible();
+
+  const wopiIframe = filePreview.locator('iframe[name="office_frame"]');
+  await expect(wopiIframe).toBeVisible();
+
+  await expect(
+    page
+      .locator('iframe[name="office_frame"]')
+      .contentFrame()
+      .locator('iframe[name="iframe-welcome-form"]')
+      .contentFrame()
+      .getByRole("heading", { name: "Explore The New" }),
+  ).toBeVisible();
+
+  await page
+    .locator('iframe[name="office_frame"]')
+    .contentFrame()
+    .locator('iframe[name="iframe-welcome-form"]')
+    .contentFrame()
+    .getByRole("button", { name: "Close" })
+    .click();
+
+  const canvas = page
+    .locator('iframe[name="office_frame"]')
+    .contentFrame()
+    .locator('canvas[id="document-canvas"]');
+  await expect(canvas).toBeVisible();
+  await expect(canvas).toHaveScreenshot("empty-doc-canvas.png", {
+    maxDiffPixelRatio: 0.01,
+  });
+  await page
+    .locator('iframe[name="office_frame"]')
+    .contentFrame()
+    .locator(".leaflet-layer")
+    .click();
+  await page.waitForTimeout(1000);
+  await page
+    .locator('iframe[name="office_frame"]')
+    .contentFrame()
+    .locator("#clipboard-area")
+    .press("ControlOrMeta+a");
+  await page.waitForTimeout(1000);
+  await page.keyboard.press(`ControlOrMeta+KeyC`);
+  await page.waitForTimeout(1000);
+  await page
+    .locator('iframe[name="office_frame"]')
+    .contentFrame()
+    .locator("#clipboard-area")
+    .press("ArrowRight");
+  await page.waitForTimeout(1000);
+  await page.keyboard.press(`ControlOrMeta+KeyV`);
+  await page.waitForTimeout(1000);
+  await expect(canvas).toHaveScreenshot("empty-doc-canvas-after-paste.png", {
+    maxDiffPixelRatio: 0.01,
+  });
+});