1
import { test, createTestPage, loginPage, waitForCanvasSceneCount } from "../fixtures/bland-test";
2
 
3
test.describe("canvas page - collaboration", () => {
4
  test("two peers on the same canvas replicate drawn elements", async ({
5
    authenticatedPage: { page, accessToken },
6
    e2eWorkspace,
7
    browser,
8
  }) => {
9
    const canvasPage = await createTestPage(page, accessToken, "Canvas Collab", e2eWorkspace, "canvas");
10
 
11
    // Peer A — load the canvas and draw a rectangle.
12
    await page.goto(`/${canvasPage.workspaceSlug}/${canvasPage.pageId}`);
13
    await page.locator(".excalidraw").waitFor({ state: "attached", timeout: 30_000 });
14
 
15
    await page.locator(".excalidraw").click();
16
    await page.keyboard.press("r");
17
 
18
    const canvas = page.locator("canvas.excalidraw__canvas.interactive").first();
19
    await canvas.waitFor({ timeout: 10_000 });
20
    const box = await canvas.boundingBox();
21
    if (!box) throw new Error("canvas has no bounding box");
22
 
23
    const startX = box.x + box.width * 0.3;
24
    const startY = box.y + box.height * 0.3;
25
    const endX = box.x + box.width * 0.6;
26
    const endY = box.y + box.height * 0.6;
27
 
28
    await page.mouse.move(startX, startY);
29
    await page.mouse.down();
30
    await page.mouse.move(endX, endY, { steps: 10 });
31
    await page.mouse.up();
32
 
33
    await waitForCanvasSceneCount(page, 1);
34
 
35
    // Peer B — open the same canvas in a fresh context.
36
    const peerBContext = await browser.newContext();
37
    const peerB = await peerBContext.newPage();
38
    await loginPage(peerB);
39
    await peerB.goto(`/${canvasPage.workspaceSlug}/${canvasPage.pageId}`);
40
    await peerB.locator(".excalidraw").waitFor({ state: "attached", timeout: 30_000 });
41
 
42
    await waitForCanvasSceneCount(peerB, 1);
43
 
44
    await peerBContext.close();
45
  });
46
});