diff --git a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts
index 03e05ab84ea4..bdbdd0840b85 100644
--- a/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts
+++ b/e2e/visual-comparison/sheets/sheets-visual-comparison.spec.ts
@@ -17,6 +17,7 @@
 import { chromium, expect, test } from '@playwright/test';
 import { generateSnapshotName } from '../const';
 
+const SHEET_MAIN_CANVAS_ID = '#univer-sheet-main-canvas';
 test('diff default sheet content', async ({ page }) => {
     await page.goto('http://localhost:3000/sheets/');
     await page.waitForTimeout(2000);
@@ -24,17 +25,8 @@ test('diff default sheet content', async ({ page }) => {
     await page.evaluate(() => window.E2EControllerAPI.loadDefaultSheet());
     await page.waitForTimeout(5000);
 
-    // await expect(page).toHaveScreenshot(generateSnapshotName('default-sheet'), { maxDiffPixels: 5 });
     const filename = generateSnapshotName('default-sheet');
-    // ignore DOM part when comparison
-    const screenshot = await page.screenshot({
-        clip: {
-            x: 0,
-            y: 92,
-            width: 1280,
-            height: 592, // 720 - 92(header) - 36(bottom)
-        },
-    });
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
     await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 });
 const isCI = !!process.env.CI;
@@ -53,18 +45,8 @@ 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');
-    // ignore DOM part when comparison
-    const screenshot = await page.screenshot({
-        clip: {
-            x: 0,
-            y: 92,
-            width: 1280,
-            height: 592, // 720 - 92(header) - 36(bottom)
-        },
-    });
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
     await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
     await page.waitForTimeout(2000);
     expect(errored).toBeFalsy();
@@ -88,9 +70,8 @@ test('diff merged cells rendering', async () => {
     await page.evaluate(() => window.E2EControllerAPI.loadMergeCellSheet());
     await page.waitForTimeout(2000);
 
-    // await expect(page).toHaveScreenshot(generateSnapshotName('mergedCellsRendering'), { maxDiffPixels: 5 });
     const filename = generateSnapshotName('mergedCellsRendering');
-    const screenshot = await page.locator('#univer-sheet-main-canvas').screenshot();
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
     await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 
     await page.waitForTimeout(2000);
@@ -153,16 +134,8 @@ 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.screenshot({
-        clip: {
-            x: 0,
-            y: 92,
-            width: 1280,
-            height: 1152,
-        },
-    });
+    const screenshot = await page.locator(SHEET_MAIN_CANVAS_ID).screenshot();
     await expect(screenshot).toMatchSnapshot(filename, { maxDiffPixels: 5 });
 
     await page.waitForTimeout(2000);
diff --git a/packages/sheets-ui/src/services/sheets-render.service.ts b/packages/sheets-ui/src/services/sheets-render.service.ts
index 3429d205eea6..cb4beecb4a14 100644
--- a/packages/sheets-ui/src/services/sheets-render.service.ts
+++ b/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.
  */
@@ -85,7 +86,7 @@ export class SheetsRenderService extends RxDisposable {
         const unitId = workbook.getUnitId();
         this._renderManagerService.created$.subscribe((renderer) => {
             if (renderer.unitId === unitId) {
-                renderer.engine.getCanvas().setId('univer-sheet-main-canvas');
+                renderer.engine.getCanvas().setId(SHEET_MAIN_CANVAS_ID);
             }
         });
         this._renderManagerService.createRender(unitId);