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 0000000000..fa630d5164 Binary files /dev/null and b/frontend/playwright/ui/specs/workspace.spec.js-snapshots/User-draws-a-rect-1.png differ