diff --git a/packages/app/src/components/header/header-right-items/editor-option-menu.tsx b/packages/app/src/components/header/header-right-items/editor-option-menu.tsx
index 6bf07fdb74..017a090cfd 100644
--- a/packages/app/src/components/header/header-right-items/editor-option-menu.tsx
+++ b/packages/app/src/components/header/header-right-items/editor-option-menu.tsx
@@ -77,6 +77,7 @@ const PopoverContent = () => {
         </MenuItem>
       </Menu>
       <MenuItem
+        data-testid="editor-option-menu-delete"
         onClick={() => {
           confirm({
             title: 'Delete page?',
diff --git a/tests/local-first-delete-page.spec.ts b/tests/local-first-delete-page.spec.ts
new file mode 100644
index 0000000000..1ec94b5738
--- /dev/null
+++ b/tests/local-first-delete-page.spec.ts
@@ -0,0 +1,36 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Local first delete page', () => {
+  test('Click delete page and show delete modal', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to delete');
+
+    await page.getByRole('link', { name: 'All pages' }).click();
+
+    const cell = await page.getByRole('cell', {
+      name: 'this is a new page to delete',
+    });
+
+    expect(cell).not.toBeUndefined();
+
+    await cell.click();
+
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+
+    const deleteBtn = page.getByTestId('editor-option-menu-delete');
+
+    await deleteBtn.click();
+
+    const confirmTip = page.getByText('Delete page?');
+
+    expect(confirmTip).not.toBeUndefined();
+  });
+});