🔧 Make visual regression tests to hide the UI when taking a screenshot (render-wasm tests only)

frontend/playwright/ui/pages/WasmWorkspacePage.js

@@ -21,14 +21,24 @@ export class WasmWorkspacePage extends WorkspacePage {
     this.canvas = page.getByTestId("canvas-wasm-shapes");
   }
 
-  async waitForFirstRender() {
+  async waitForFirstRender(config = {}) {
+    const options = { hideUI: true, ...config };
+
     await expect(this.pageName).toHaveText("Page 1");
+    if (options.hideUI) {
+      await this.hideUI();
+    }
     await this.canvas.waitFor({ state: "visible" });
     await this.page.waitForFunction(() => {
       return window.wasmSetObjectsFinished;
     });
   }
 
+  async hideUI() {
+    await this.page.keyboard.press("\\");
+    await expect(this.pageName).not.toBeVisible();
+  }
+
   static async mockGoogleFont(page, fontSlug, assetFilename, options = {}) {
     const url = new RegExp(`/internal/gfonts/font/${fontSlug}`);
     return await page.route(url, (route) =>

frontend/playwright/ui/render-wasm-specs/texts.spec.js

@@ -31,12 +31,16 @@ test("Updates a text font", async ({ page }) => {
     id: "3b0d758a-8c9d-8013-8006-52c8337e5c72",
     pageId: "3b0d758a-8c9d-8013-8006-52c8337e5c73",
   });
-  await workspace.waitForFirstRender();
+  await workspace.waitForFirstRender({ hideUI: false });
+
   await workspace.clickLeafLayer("this is a text");
   const fontStyle = workspace.page.getByTitle("Font Style");
   await fontStyle.click();
   const boldOption = fontStyle.getByText("bold").first();
   await boldOption.click();
+
+  await workspace.hideUI();
+
   await expect(workspace.canvas).toHaveScreenshot();
 });