From daedc660b9ba4a0466552cb25f4d0e96dc3745bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Mon, 26 Jan 2026 15:38:29 +0100 Subject: [PATCH] :wrench: Migrate workspace tests to user the wasm viewport --- frontend/playwright.config.js | 11 +++- frontend/playwright/ui/pages/WorkspacePage.js | 10 +-- .../playwright/ui/specs/render-wasm.spec.js | 2 +- .../playwright/ui/specs/workspace.spec.js | 61 +++++++++--------- .../User-draws-a-rect-1.png | Bin 0 -> 10572 bytes 5 files changed, 43 insertions(+), 41 deletions(-) create mode 100644 frontend/playwright/ui/specs/workspace.spec.js-snapshots/User-draws-a-rect-1.png diff --git a/frontend/playwright.config.js b/frontend/playwright.config.js index 09f33d68d1..4cf0af9a3c 100644 --- a/frontend/playwright.config.js +++ b/frontend/playwright.config.js @@ -43,12 +43,19 @@ export default defineConfig({ projects: [ { name: "default", - use: { ...devices["Desktop Chrome"] }, testDir: "./playwright/ui/specs", use: { + ...devices["Desktop Chrome"], + viewport: { width: 1920, height: 1080 }, // Add custom viewport size video: 'retain-on-failure', trace: 'retain-on-failure', - } + }, + snapshotPathTemplate: "{testDir}/{testFilePath}-snapshots/{arg}.png", + expect: { + toHaveScreenshot: { + maxDiffPixelRatio: 0.001, + }, + }, }, { name: "ds", diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 7947fb4368..4809749dfc 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -409,7 +409,7 @@ export class WorkspacePage extends BaseWebSocketPage { await this.viewport.click({ button: "right" }); return this.page.getByText("PasteCtrlV").click(); } - return this.page.keyboard.press("Control+V"); + return this.page.keyboard.press("ControlOrMeta+V"); } async panOnViewportAt(x, y, width, height) { @@ -495,13 +495,7 @@ export class WorkspacePage extends BaseWebSocketPage { async clickColorPalette(clickOptions = {}) { await this.palette - .getByRole("button", { name: "Color Palette (Alt+P)" }) - .click(clickOptions); - } - - async clickColorPalette(clickOptions = {}) { - await this.palette - .getByRole("button", { name: "Color Palette (Alt+P)" }) + .getByRole("button", { name: /Color Palette/ }) .click(clickOptions); } diff --git a/frontend/playwright/ui/specs/render-wasm.spec.js b/frontend/playwright/ui/specs/render-wasm.spec.js index d8b72d13be..1c336bf6a8 100644 --- a/frontend/playwright/ui/specs/render-wasm.spec.js +++ b/frontend/playwright/ui/specs/render-wasm.spec.js @@ -1,5 +1,5 @@ import { test, expect } from "@playwright/test"; -import { WasmWorkspacePage, WASM_FLAGS } from "../pages/WasmWorkspacePage"; +import { WasmWorkspacePage } from "../pages/WasmWorkspacePage"; test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index 8489cf122f..7813406720 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -1,13 +1,13 @@ import { test, expect } from "@playwright/test"; -import { WorkspacePage } from "../pages/WorkspacePage"; +import { WasmWorkspacePage } from "../pages/WasmWorkspacePage"; import { presenceFixture } from "../../data/workspace/ws-notifications"; test.beforeEach(async ({ page }) => { - await WorkspacePage.init(page); + await WasmWorkspacePage.init(page); }); test("User loads worskpace with empty file", async ({ page }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.goToWorkspace(); @@ -16,7 +16,7 @@ test("User loads worskpace with empty file", async ({ page }) => { }); test("User opens a file with a bad page id", async ({ page }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.goToWorkspace({ @@ -29,7 +29,7 @@ test("User opens a file with a bad page id", async ({ page }) => { test("User receives presence notifications updates in the workspace", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.goToWorkspace(); @@ -41,7 +41,7 @@ test("User receives presence notifications updates in the workspace", async ({ }); test("User draws a rect", async ({ page }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockRPC( "update-file?id=*", @@ -52,13 +52,12 @@ test("User draws a rect", async ({ page }) => { await workspacePage.rectShapeButton.click(); await workspacePage.clickWithDragViewportAt(128, 128, 200, 100); - const shape = await workspacePage.rootShape.locator("rect"); - await expect(shape).toHaveAttribute("width", "200"); - await expect(shape).toHaveAttribute("height", "100"); + await workspacePage.hideUI(); + await expect(workspacePage.canvas).toHaveScreenshot(); }); test("User makes a group", async ({ page }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockRPC( /get\-file\?/, @@ -74,14 +73,14 @@ test("User makes a group", async ({ page }) => { pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375", }); await workspacePage.clickLeafLayer("Rectangle"); - await workspacePage.page.keyboard.press("Control+g"); + await workspacePage.page.keyboard.press("ControlOrMeta+g"); await workspacePage.expectSelectedLayer("Group"); }); test("Bug 7654 - Toolbar keeps toggling on and off on spacebar press", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.goToWorkspace(); @@ -94,7 +93,7 @@ test("Bug 7654 - Toolbar keeps toggling on and off on spacebar press", async ({ test("Bug 7525 - User moves a scrollbar and no selciont rectangle appears", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockRPC( /get\-file\?/, @@ -130,7 +129,7 @@ test("Bug 7525 - User moves a scrollbar and no selciont rectangle appears", asyn test("User adds a library and its automatically selected in the color palette", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockRPC( "link-file-to-library", @@ -175,7 +174,7 @@ test("User adds a library and its automatically selected in the color palette", test("Bug 10179 - Drag & drop doesn't add colors to the Recent Colors palette", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.goToWorkspace(); await workspacePage.moveButton.click(); @@ -218,7 +217,7 @@ test("Bug 10179 - Drag & drop doesn't add colors to the Recent Colors palette", test("Bug 7489 - Workspace-palette items stay hidden when opening with keyboard-shortcut", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.goToWorkspace(); @@ -235,7 +234,7 @@ test("Bug 7489 - Workspace-palette items stay hidden when opening with keyboard- test("Bug 8784 - Use keyboard arrow to move inside a text input does not change tabs", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.goToWorkspace(); await workspacePage.pageName.click(); @@ -245,7 +244,7 @@ test("Bug 8784 - Use keyboard arrow to move inside a text input does not change }); test("Bug 9066 - Problem with grid layout", async ({ page }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-9066.json"); @@ -273,7 +272,7 @@ test("Bug 9066 - Problem with grid layout", async ({ page }) => { }); test("User have toolbar", async ({ page }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.goToWorkspace(); @@ -282,7 +281,7 @@ test("User have toolbar", async ({ page }) => { }); test("User have edition menu entries", async ({ page }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.goToWorkspace(); @@ -298,7 +297,7 @@ test("User have edition menu entries", async ({ page }) => { }); test("Copy/paste properties", async ({ page, context }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.mockRPC( /get\-file\?/, @@ -355,23 +354,23 @@ test("Copy/paste properties", async ({ page, context }) => { }); test("[Taiga #9929] Paste text in workspace", async ({ page, context }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.goToWorkspace(); await context.grantPermissions(["clipboard-read", "clipboard-write"]); await page.evaluate(() => navigator.clipboard.writeText("Lorem ipsum dolor")); await workspacePage.viewport.click({ button: "right" }); - await page.getByText("PasteCtrlV").click(); + await page.getByText(/^Paste/i).click(); await workspacePage.viewport .getByRole("textbox") .getByText("Lorem ipsum dolor"); }); -test("[Taiga #9930] Zoom fit all doesn't fits all", async ({ +test("[Taiga #9930] Zoom fit all doesn't fit all shapes", async ({ page, context, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-9930.json"); await workspacePage.goToWorkspace({ @@ -379,16 +378,18 @@ test("[Taiga #9930] Zoom fit all doesn't fits all", async ({ pageId: "fb9798e7-a547-80ae-8005-9ffda4a13e2c", }); - const zoom = await page.getByTitle("Zoom"); + const zoom = page.getByTitle("Zoom"); await zoom.click(); - const zoomIn = await page.getByRole("button", { name: "Zoom in" }); + const zoomIn = page.getByRole("button", { name: "Zoom in" }); await zoomIn.click(); await zoomIn.click(); await zoomIn.click(); // Zoom fit all await page.keyboard.press("Shift+1"); + // Select all shapes to display selrect + await workspacePage.page.keyboard.press("ControlOrMeta+a"); const ids = [ "shape-165d1e5a-5873-8010-8005-9ffdbeaeec59", @@ -410,7 +411,7 @@ test("[Taiga #9930] Zoom fit all doesn't fits all", async ({ const viewportBoundingBox = await workspacePage.viewport.boundingBox(); for (const id of ids) { - const shape = await page.locator(`.ws-shape-wrapper > g#${id}`); + const shape = page.locator(`.viewport-selrect`); const shapeBoundingBox = await shape.boundingBox(); expect(contains(viewportBoundingBox, shapeBoundingBox)).toBeTruthy(); } @@ -419,7 +420,7 @@ test("[Taiga #9930] Zoom fit all doesn't fits all", async ({ test("Bug 9877, user navigation to dashboard from header goes to blank page", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.goToWorkspace(); @@ -436,7 +437,7 @@ test("Bug 9877, user navigation to dashboard from header goes to blank page", as test("Bug 8371 - Flatten option is not visible in context menu", async ({ page, }) => { - const workspacePage = new WorkspacePage(page); + const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.mockGetFile("workspace/get-file-8371.json"); await workspacePage.goToWorkspace({ diff --git a/frontend/playwright/ui/specs/workspace.spec.js-snapshots/User-draws-a-rect-1.png b/frontend/playwright/ui/specs/workspace.spec.js-snapshots/User-draws-a-rect-1.png new file mode 100644 index 0000000000000000000000000000000000000000..fa630d516499976fbb2b324df5c7284b963b444a GIT binary patch literal 10572 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