fix: snapshot area (#3715)

Co-authored-by: GitHub Actions <actions@github.com>

e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts

@@ -17,16 +17,42 @@
 import { chromium, expect, test } from '@playwright/test';
 import { generateSnapshotName } from '../const';
 
+const SHEET_MAIN_CANVAS_ID = '#univer-sheet-main-canvas';
+const isCI = !!process.env.CI;
+test('diff default sheet toolbar', async () => {
+    const browser = await chromium.launch({
+        headless: !!isCI, // Set to false to see the browser window
+    });
+    const context = await browser.newContext({
+        viewport: { width: 1280, height: 720 },
+        deviceScaleFactor: 2, // Set your desired DPR
+    });
+    const page = await context.newPage();
+    await page.goto('http://localhost:3000/sheets/');
+    await page.waitForTimeout(2000);
+    await page.evaluate(() => window.E2EControllerAPI.loadDefaultSheet());
+    await page.waitForTimeout(3000);
+
+    const filename = generateSnapshotName('default-sheet-fullpage');
+    const screenshot = await page.screenshot({
+        mask: [
+            page.locator('.univer-headerbar'),
+        ],
+        fullPage: true,
+    });
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
+});
 test('diff default sheet content', async ({ page }) => {
     await page.goto('http://localhost:3000/sheets/');
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadDefaultSheet());
-    await page.waitForTimeout(5000);
+    await page.waitForTimeout(2000);
 
-    await expect(page).toHaveScreenshot(generateSnapshotName('default-sheet'), { maxDiffPixels: 5 });
+    const filename = generateSnapshotName('default-sheet');
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 });
-const isCI = !!process.env.CI;
 
 test('diff demo sheet content', async ({ page }) => {
     let errored = false;
@@ -42,7 +68,9 @@ test('diff demo sheet content', async ({ page }) => {
     await page.evaluate(() => window.E2EControllerAPI.loadDemoSheet());
     await page.waitForTimeout(2000);
 
-    await expect(page).toHaveScreenshot(generateSnapshotName('demo-sheet'), { maxDiffPixels: 5 });
+    const filename = generateSnapshotName('demo-sheet');
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
     await page.waitForTimeout(2000);
     expect(errored).toBeFalsy();
 });
@@ -63,9 +91,11 @@ test('diff merged cells rendering', async () => {
     await page.waitForTimeout(2000);
 
     await page.evaluate(() => window.E2EControllerAPI.loadMergeCellSheet());
-    await page.waitForTimeout(5000);
+    await page.waitForTimeout(2000);
 
-    await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRendering'), { maxDiffPixels: 5 });
+    const filename = generateSnapshotName('mergedCellsRendering');
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 
     await page.waitForTimeout(2000);
     await browser.close();
@@ -127,7 +157,9 @@ test('diff merged cells rendering after scrolling', async () => {
     });
     await page.waitForTimeout(2000);
 
-    await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRenderingScrolling'), { maxDiffPixels: 5 });
+    const filename = generateSnapshotName('mergedCellsRenderingScrolling');
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
+    await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 
     await page.waitForTimeout(2000);
     await browser.close();

packages/engine-render/src/canvas.ts

@@ -40,6 +40,7 @@ interface ICanvasProps {
     height?: number;
     pixelRatio?: number;
     mode?: CanvasRenderMode;
+    id?: string;
 }
 
 /**
@@ -126,6 +127,10 @@ export class Canvas {
         return this._height;
     }
 
+    setId(id: string) {
+        this._canvasEle!.id = id;
+    }
+
     setSize(width?: number, height?: number, pixelRatioParam?: number) {
         // this.setWidth(width || 0);
         // this.setHeight(height || 0);

packages/engine-render/src/engine.ts

@@ -133,6 +133,8 @@ export class Engine extends ThinEngine<Scene> {
 
     private _previousHeight = -1000;
 
+    private _unitId: string = ''; // unitId
+
     constructor(elemWidth: number = 1, elemHeight: number = 1, pixelRatio?: number, mode?: CanvasRenderMode) {
         super();
         this._canvas = new Canvas({

packages/engine-render/src/render-manager/render-manager.service.ts

@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import { createIdentifier, Disposable, Inject, Injector, IUniverInstanceService, remove, toDisposable, UniverInstanceType } from '@univerjs/core';
-import { BehaviorSubject, Subject } from 'rxjs';
 import type { Dependency, DependencyIdentifier, IDisposable, Nullable, UnitModel, UnitType } from '@univerjs/core';
 import type { Observable } from 'rxjs';
-
-import { Engine } from '../engine';
-import { Scene } from '../scene';
-import { type IRender, RenderUnit } from './render-unit';
 import type { BaseObject } from '../base-object';
 import type { DocComponent } from '../components/docs/doc-component';
+
 import type { SheetComponent } from '../components/sheets/sheet-component';
 import type { Slide } from '../components/slides/slide';
+import { createIdentifier, Disposable, Inject, Injector, IUniverInstanceService, remove, toDisposable, UniverInstanceType } from '@univerjs/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { Engine } from '../engine';
+import { Scene } from '../scene';
+import { type IRender, RenderUnit } from './render-unit';
 
 export type RenderComponentType = SheetComponent | DocComponent | Slide | BaseObject;
 

packages/sheets-ui/src/services/sheets-render.service.ts

@@ -25,6 +25,7 @@ import {
 import { IRenderManagerService, RENDER_RAW_FORMULA_KEY, Spreadsheet } from '@univerjs/engine-render';
 import { distinctUntilChanged, takeUntil } from 'rxjs';
 
+const SHEET_MAIN_CANVAS_ID = 'univer-sheet-main-canvas';
 /**
  * This controller is responsible for managing units of a specific kind to be rendered on the canvas.
  */
@@ -83,6 +84,11 @@ export class SheetsRenderService extends RxDisposable {
 
     private _createRenderer(workbook: Workbook): void {
         const unitId = workbook.getUnitId();
+        this._renderManagerService.created$.subscribe((renderer) => {
+            if (renderer.unitId === unitId) {
+                renderer.engine.getCanvas().setId(SHEET_MAIN_CANVAS_ID);
+            }
+        });
         this._renderManagerService.createRender(unitId);
 
         // NOTE@wzhudev: maybe not in univer mode