milestone: publish alpha version (#637)

- document folder
- full-text search
- blob storage
- basic edgeless support

Co-authored-by: tzhangchi <terry.zhangchi@outlook.com>
Co-authored-by: QiShaoXuan <qishaoxuan777@gmail.com>
Co-authored-by: DiamondThree <diamond.shx@gmail.com>
Co-authored-by: MingLiang Wang <mingliangwang0o0@gmail.com>
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
Co-authored-by: Yifeng Wang <doodlewind@toeverything.info>
Co-authored-by: Himself65 <himself65@outlook.com>
Co-authored-by: lawvs <18554747+lawvs@users.noreply.github.com>
Co-authored-by: Qi <474021214@qq.com>

tests/change-page-mode.spec.ts

@@ -4,17 +4,17 @@ import { loadPage } from './libs/load-page';
 loadPage();
 
 test.describe('Change page mode(Paper or Edgeless)', () => {
-  test('Switch to edgeless', async ({ page }) => {
+  test('Switch to edgeless by switch edgeless item', async ({ page }) => {
     const switcher = page.locator('[data-testid=editor-mode-switcher]');
     const box = await switcher.boundingBox();
-    await expect(box?.x).not.toBeUndefined();
+    expect(box?.x).not.toBeUndefined();
 
-    // mouse hover trigger animation for showing full switcher
-    await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
+    //  mouse hover trigger animation for showing full switcher
+    // await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
+    await page.mouse.move((box?.x ?? 0) + 10, (box?.y ?? 0) + 10);
 
-    const edgelessButton = page.locator(
-      '[data-testid=editor-mode-switcher] [title=Edgeless]'
-    );
+    // await page.waitForTimeout(1000);
+    const edgelessButton = page.getByTestId('switch-edgeless-item'); // page.getByText('Edgeless').click()
     await edgelessButton.click();
 
     // // mouse move to edgeless button
@@ -31,8 +31,20 @@ test.describe('Change page mode(Paper or Edgeless)', () => {
     //   (box?.y ?? 0) + 5
     // );
 
-    const edgelessDom = page.locator('edgeless-page-block');
+    const edgeless = page.locator('affine-edgeless-page');
+    expect(await edgeless.isVisible()).toBe(true);
+  });
 
-    await expect(await edgelessDom.isVisible()).toBe(true);
+  test.skip('Convert to edgeless by editor header items', async ({ page }) => {
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+    const menusEdgelessItem = page.getByTestId('editor-option-menu-edgeless');
+    await menusEdgelessItem.click();
+
+    const edgeless = page.locator('affine-edgeless-page');
+    expect(await edgeless.isVisible()).toBe(true);
   });
 });

tests/contact-us.spec.ts

@@ -1,35 +1,35 @@
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import { loadPage } from './libs/load-page';
 
 loadPage();
 
 test.describe('Open contact us', () => {
-  test('Click left-top corner Logo', async ({ page }) => {
-    const leftTopCorner = page.locator('[data-testid=left-top-corner-logo]');
-    await leftTopCorner.click();
-
+  test.skip('Click about us', async ({ page }) => {
+    const currentWorkspace = page.getByTestId('current-workspace');
+    await currentWorkspace.click();
+    // await page.waitForTimeout(1000);
+    await page.getByText('About AFFiNE').click();
     const contactUsModal = page.locator(
       '[data-testid=contact-us-modal-content]'
     );
-    await expect(contactUsModal).toContainText('Join our community.');
+    await expect(contactUsModal).toContainText('AFFiNE Community');
   });
-
   test('Click right-bottom corner contact icon', async ({ page }) => {
     const faqIcon = page.locator('[data-testid=faq-icon]');
     const box = await faqIcon.boundingBox();
-    await expect(box?.x).not.toBeUndefined();
-    await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
+    expect(box?.x).not.toBeUndefined();
 
+    await page.mouse.move((box?.x ?? 0) + 10, (box?.y ?? 0) + 10);
+    await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
     const rightBottomContactUs = page.locator(
       '[data-testid=right-bottom-contact-us-icon]'
     );
-    await expect(await rightBottomContactUs.isVisible()).toEqual(true);
+    expect(await rightBottomContactUs.isVisible()).toEqual(true);
 
     await rightBottomContactUs.click();
-
     const contactUsModal = page.locator(
       '[data-testid=contact-us-modal-content]'
     );
-    await expect(contactUsModal).toContainText('Join our community.');
+    await expect(contactUsModal).toContainText('AFFiNE Community');
   });
 });

tests/exception-page.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+// ps aux | grep 8080
+test.describe('exception page', () => {
+  test('visit 404 page', async ({ page }) => {
+    await page.goto('http://localhost:8080/404');
+    await page.waitForTimeout(1000);
+    const notFoundTip = page.getByText('404 - Page Not Found');
+    expect(await notFoundTip.isVisible()).toBe(true);
+  });
+});

tests/invite-code-page.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+// ps aux | grep 8080
+test.describe('invite code page', () => {
+  test('the link has expired', async ({ page }) => {
+    await page.goto('http://localhost:8080//invite/abc');
+    await page.waitForTimeout(1000);
+    expect(page.getByText('The link has expired')).not.toBeUndefined();
+  });
+});

tests/layout.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Layout ui', () => {
+  test('Collapse Sidebar', async ({ page }) => {
+    await page.getByTestId('sliderBar-arrowButton').click();
+    const sliderBarArea = page.getByTestId('sliderBar');
+    await expect(sliderBarArea).not.toBeVisible();
+  });
+
+  test('Expand Sidebar', async ({ page }) => {
+    await page.getByTestId('sliderBar-arrowButton').click();
+    const sliderBarArea = page.getByTestId('sliderBar');
+    await expect(sliderBarArea).not.toBeVisible();
+
+    await page.getByTestId('sliderBar-arrowButton').click();
+    await expect(sliderBarArea).toBeVisible();
+  });
+});

tests/libs/keyboard.ts

@@ -0,0 +1,65 @@
+import type { Page } from '@playwright/test';
+
+const IS_MAC = process.platform === 'darwin';
+
+async function keyDownCtrlOrMeta(page: Page) {
+  if (IS_MAC) {
+    await page.keyboard.down('Meta');
+  } else {
+    await page.keyboard.down('Control');
+  }
+}
+
+async function keyUpCtrlOrMeta(page: Page) {
+  if (IS_MAC) {
+    await page.keyboard.up('Meta');
+  } else {
+    await page.keyboard.up('Control');
+  }
+}
+
+// It's not good enough, but better than calling keyDownCtrlOrMeta and keyUpCtrlOrMeta separately
+export const withCtrlOrMeta = async (page: Page, fn: () => Promise<void>) => {
+  await keyDownCtrlOrMeta(page);
+  await fn();
+  await keyUpCtrlOrMeta(page);
+};
+
+export async function pressEnter(page: Page) {
+  // avoid flaky test by simulate real user input
+  await page.keyboard.press('Enter', { delay: 50 });
+}
+
+export async function pressTab(page: Page) {
+  await page.keyboard.press('Tab', { delay: 50 });
+}
+
+export async function pressShiftTab(page: Page) {
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Tab', { delay: 50 });
+  await page.keyboard.up('Shift');
+}
+
+export async function pressShiftEnter(page: Page) {
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Enter', { delay: 50 });
+  await page.keyboard.up('Shift');
+}
+
+export async function copyByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('c', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}
+
+export async function cutByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('x', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}
+
+export async function pasteByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('v', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}

tests/libs/load-page.ts

@@ -2,8 +2,8 @@ import { test } from '@playwright/test';
 
 export function loadPage() {
   test.beforeEach(async ({ page }) => {
-    await page.goto('http://localhost:3000');
+    await page.goto('http://localhost:8080');
     // waiting for page loading end
-    await page.waitForTimeout(1000);
+    // await page.waitForTimeout(1000);
   });
 }

tests/local-first-delete-page.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Local first delete page', () => {
+  test.skip('New a page , then delete it in all pages, permanently delete it', async ({
+    page,
+  }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to restore');
+    const originPageUrl = page.url();
+    const newPageId = page.url().split('/').reverse()[0];
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to restore',
+    });
+    expect(cell).not.toBeUndefined();
+
+    await page
+      .getByTestId('more-actions-' + newPageId)
+      .getByRole('button')
+      .first()
+      .click();
+    const deleteBtn = page.getByRole('button', { name: 'Delete' });
+    await deleteBtn.click();
+    const confirmTip = page.getByText('Delete page?');
+    expect(confirmTip).not.toBeUndefined();
+
+    await page.getByRole('button', { name: 'Delete' }).click();
+
+    await page.getByRole('link', { name: 'Trash' }).click();
+    // permanently delete it
+    await page
+      .getByTestId('more-actions-' + newPageId)
+      .getByRole('button')
+      .nth(1)
+      .click();
+    await page.getByText('Delete permanently?').dblclick();
+
+    // show empty tip
+    expect(
+      page.getByText(
+        'Tips: Click Add to Favourites/Trash and the page will appear here.'
+      )
+    ).not.toBeUndefined();
+  });
+});

tests/local-first-export-page.spec.ts

@@ -0,0 +1,69 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('Local first export page', () => {
+  test('New a page ,then open it and export html', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page
+      .getByPlaceholder('Title')
+      .fill('this is a new page to export html content');
+    await page.getByRole('link', { name: 'All pages' }).click();
+
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to export html content',
+    });
+    expect(cell).not.toBeUndefined();
+
+    await cell.click();
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+    const exportParentBtn = page.getByRole('tooltip', {
+      name: 'Add to favourites Convert to Edgeless Export Delete',
+    });
+    await exportParentBtn.click();
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      page.getByRole('button', { name: 'Export to HTML' }).click(),
+    ]);
+    expect(download.suggestedFilename()).toBe(
+      'this is a new page to export html content.html'
+    );
+  });
+
+  test('New a page ,then open it and export markdown', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page
+      .getByPlaceholder('Title')
+      .fill('this is a new page to export markdown content');
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to export markdown content',
+    });
+    expect(cell).not.toBeUndefined();
+
+    await cell.click();
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+    const exportParentBtn = page.getByRole('tooltip', {
+      name: 'Add to favourites Convert to Edgeless Export Delete',
+    });
+    await exportParentBtn.click();
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      page.getByRole('button', { name: 'Export to Markdown' }).click(),
+    ]);
+    expect(download.suggestedFilename()).toBe(
+      'this is a new page to export markdown content.md'
+    );
+  });
+});

tests/local-first-favorite-page.spec.ts

@@ -0,0 +1,72 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('Local first favorite and cancel favorite  page', () => {
+  test('New a page and open it ,then favorite it', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to favorite');
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to favorite',
+    });
+    expect(cell).not.toBeUndefined();
+
+    await cell.click();
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+    await favoriteBtn.click();
+  });
+  test('Cancel favorite', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to favorite');
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to favorite',
+    });
+    expect(cell).not.toBeUndefined();
+
+    await cell.click();
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+    await favoriteBtn.click();
+
+    // expect it in favorite list
+    await page.getByRole('link', { name: 'Favourites' }).click();
+    expect(
+      page.getByRole('cell', { name: 'this is a new page to favorite' })
+    ).not.toBeUndefined();
+
+    // cancel favorite
+
+    await page.getByRole('link', { name: 'All pages' }).click();
+
+    const box = await page
+      .getByRole('cell', { name: 'this is a new page to favorite' })
+      .boundingBox();
+    //hover table record
+    await page.mouse.move((box?.x ?? 0) + 10, (box?.y ?? 0) + 10);
+
+    await page.getByTestId('favourited-icon').click();
+
+    // expect it not in favorite list
+    await page.getByRole('link', { name: 'Favourites' }).click();
+    expect(
+      page.getByText(
+        'Tips: Click Add to Favourites/Trash and the page will appear here.'
+      )
+    ).not.toBeUndefined();
+  });
+});

tests/local-first-favorites-items.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('Local first favorite items ui', () => {
+  test('Show favorite items in sidebar', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to favorite');
+    const newPageId = page.url().split('/').reverse()[0];
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to favorite',
+    });
+    expect(cell).not.toBeUndefined();
+    await cell.click();
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+    await favoriteBtn.click();
+    const favoriteListItemInSidebar = page.getByTestId(
+      'favorite-list-item-' + newPageId
+    );
+    expect(await favoriteListItemInSidebar.textContent()).toBe(
+      'this is a new page to favorite'
+    );
+  });
+
+  test('Show favorite items in favorite list', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to favorite');
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to favorite',
+    });
+    expect(cell).not.toBeUndefined();
+    await cell.click();
+    await page
+      .getByTestId('editor-header-items')
+      .getByRole('button')
+      .nth(2)
+      .click();
+
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+    await favoriteBtn.click();
+
+    await page.getByRole('link', { name: 'Favourites' }).click();
+    expect(
+      page.getByRole('cell', { name: 'this is a new page to favorite' })
+    ).not.toBeUndefined();
+  });
+});

tests/local-first-new-page.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('local first new page', () => {
+  test('click btn new page', async ({ page }) => {
+    const originPageId = page.url().split('/').reverse()[0];
+    await page.getByText('New Page').click();
+    const newPageId = page.url().split('/').reverse()[0];
+    expect(newPageId).not.toBe(originPageId);
+  });
+
+  test('click btn bew page and find it in all pages', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page');
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', { name: 'this is a new page' });
+    expect(cell).not.toBeUndefined();
+  });
+});

tests/local-first-openpage-newtab.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('local first new page', () => {
+  test('click btn bew page and open in tab', async ({ page }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page');
+    const newPageUrl = page.url();
+    const newPageId = page.url().split('/').reverse()[0];
+
+    await page.getByRole('link', { name: 'All pages' }).click();
+
+    await page
+      .getByTestId('more-actions-' + newPageId)
+      .getByRole('button')
+      .first()
+      .click();
+    const [newTabPage] = await Promise.all([
+      page.waitForEvent('popup'),
+      page.getByRole('button', { name: 'Open in new tab' }).click(),
+    ]);
+
+    expect(newTabPage.url()).toBe(newPageUrl);
+  });
+});

tests/local-first-restore-page.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe('Local first delete page', () => {
+  test('New a page , then delete it in all pages, restore it', async ({
+    page,
+  }) => {
+    await page.getByText('New Page').click();
+    await page.getByPlaceholder('Title').click();
+    await page.getByPlaceholder('Title').fill('this is a new page to restore');
+    const originPageUrl = page.url();
+    const newPageId = page.url().split('/').reverse()[0];
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to restore',
+    });
+    expect(cell).not.toBeUndefined();
+
+    await page
+      .getByTestId('more-actions-' + newPageId)
+      .getByRole('button')
+      .first()
+      .click();
+    const deleteBtn = page.getByRole('button', { name: 'Delete' });
+    await deleteBtn.click();
+    const confirmTip = page.getByText('Delete page?');
+    expect(confirmTip).not.toBeUndefined();
+
+    await page.getByRole('button', { name: 'Delete' }).click();
+
+    await page.getByRole('link', { name: 'Trash' }).click();
+    // restore it
+    await page
+      .getByTestId('more-actions-' + newPageId)
+      .getByRole('button')
+      .first()
+      .click();
+
+    // go to page detail
+    expect(page.url()).toBe(originPageUrl);
+
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const restoreCell = page.getByRole('cell', {
+      name: 'this is a new page to restore',
+    });
+    expect(restoreCell).not.toBeUndefined();
+  });
+});

tests/local-first-show-delete-modal.spec.ts

@@ -0,0 +1,52 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('Local first delete page', () => {
+  test('New a page ,then open it 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 = 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();
+  });
+
+  test('New a page ,then go to all pages 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');
+    const newPageId = page.url().split('/').reverse()[0];
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to delete',
+    });
+    expect(cell).not.toBeUndefined();
+
+    await page
+      .getByTestId('more-actions-' + newPageId)
+      .getByRole('button')
+      .first()
+      .click();
+    const deleteBtn = page.getByRole('button', { name: 'Delete' });
+    await deleteBtn.click();
+    const confirmTip = page.getByText('Delete page?');
+    expect(confirmTip).not.toBeUndefined();
+  });
+});

tests/local-first-trash-page.spec.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('Local first trash page', () => {
+  test('New a page , then delete it in all pages, finally find it in trash', 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');
+    const newPageId = page.url().split('/').reverse()[0];
+    await page.getByRole('link', { name: 'All pages' }).click();
+    const cell = page.getByRole('cell', {
+      name: 'this is a new page to delete',
+    });
+    expect(cell).not.toBeUndefined();
+
+    await page
+      .getByTestId('more-actions-' + newPageId)
+      .getByRole('button')
+      .first()
+      .click();
+    const deleteBtn = page.getByRole('button', { name: 'Delete' });
+    await deleteBtn.click();
+    const confirmTip = page.getByText('Delete page?');
+    expect(confirmTip).not.toBeUndefined();
+
+    await page.getByRole('button', { name: 'Delete' }).click();
+
+    await page.getByRole('link', { name: 'Trash' }).click();
+    expect(
+      page.getByRole('cell', { name: 'this is a new page to delete' })
+    ).not.toBeUndefined();
+  });
+});

tests/local-first-workspace.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('Local first default workspace', () => {
+  test('Default workspace name', async ({ page }) => {
+    const workspaceName = page.getByTestId('workspace-name');
+    expect(await workspaceName.textContent()).toBe('AFFiNE');
+  });
+
+  test('Default workspace avatar', async ({ page }) => {
+    const workspaceAvatar = page.getByTestId('workspace-avatar');
+    expect(await workspaceAvatar.innerHTML()).toBe(
+      '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="39" height="39" rx="19.5" stroke="#6880FF" fill="#FFF"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M18.6303 8.79688L11.2559 29.8393H15.5752L20.2661 15.2858L24.959 29.8393H29.2637L21.8881 8.79688H18.6303Z" fill="#6880FF"></path></svg>'
+    );
+  });
+});

tests/login.spec.ts

@@ -0,0 +1,44 @@
+import { test, expect } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+
+loadPage();
+
+test.describe.skip('Login Flow', () => {
+  test('Open login modal by click current workspace', async ({ page }) => {
+    await page.getByTestId('current-workspace').click();
+    await page.waitForTimeout(800);
+    // why don't we use waitForSelector, It seems that waitForSelector not stable?
+    await page.getByTestId('open-login-modal').click();
+    await page.waitForTimeout(800);
+    await page
+      .getByRole('heading', { name: 'Currently not logged in' })
+      .click();
+  });
+
+  test('Open login modal by click cloud-unsync-icon', async ({ page }) => {
+    await page.getByTestId('cloud-unsync-icon').click();
+
+    await page.waitForTimeout(800);
+    await page
+      .getByRole('heading', { name: 'Currently not logged in' })
+      .click();
+  });
+
+  test('Open google firebase page', async ({ page }) => {
+    await page.getByTestId('current-workspace').click();
+    await page.waitForTimeout(800);
+    // why don't we use waitForSelector, It seems that waitForSelector not stable?
+    await page.getByTestId('open-login-modal').click();
+    await page.waitForTimeout(800);
+    const [firebasePage] = await Promise.all([
+      page.waitForEvent('popup'),
+      page
+        .getByRole('button', {
+          name: 'Google Continue with Google Set up an AFFiNE account to sync data',
+        })
+        .click(),
+    ]);
+
+    expect(firebasePage.url()).toContain('.firebaseapp.com/__/auth/handler');
+  });
+});

tests/quick-search.spec.ts

@@ -0,0 +1,108 @@
+import { test, expect, type Page } from '@playwright/test';
+import { loadPage } from './libs/load-page';
+import { withCtrlOrMeta } from './libs/keyboard';
+
+loadPage();
+
+const openQuickSearchByShortcut = async (page: Page) =>
+  await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
+
+async function assertTitleTexts(
+  page: Page,
+  texts: string[],
+  option?: { delay: number }
+) {
+  await page.mouse.move(100, 100);
+  const actual = await page
+    .locator('[class=affine-default-page-block-title]')
+    .allInnerTexts();
+  await page.waitForTimeout(option?.delay || 0);
+
+  expect(actual).toEqual(texts);
+}
+async function assertResultList(
+  page: Page,
+  texts: string[],
+  option?: { delay: number }
+) {
+  await page.mouse.move(100, 100);
+  const actual = await page.locator('[cmdk-item]').allInnerTexts();
+  await page.waitForTimeout(option?.delay || 0);
+  expect(actual).toEqual(texts);
+}
+
+test.describe('Open quick search', () => {
+  test('Click slider bar button', async ({ page }) => {
+    const quickSearchButton = page.locator(
+      '[data-testid=sliderBar-quickSearchButton]'
+    );
+    await quickSearchButton.click();
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    await expect(quickSearch).toBeVisible();
+  });
+
+  test('Click arrowDown icon after title', async ({ page }) => {
+    //header-quickSearchButton
+    const quickSearchButton = page.locator(
+      '[data-testid=header-quickSearchButton]'
+    );
+    await quickSearchButton.click();
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    await expect(quickSearch).toBeVisible();
+  });
+
+  // test('Press the shortcut key cmd+k', async ({ page }) => {
+  //   // why 1000ms page wait?
+  //   page.waitForTimeout(1000);
+  //   await openQuickSearchByShortcut(page);
+  //   const quickSearch = page.locator('[data-testid=quickSearch]');
+
+  //   await expect(quickSearch).toBeVisible();
+  // });
+});
+
+test.describe('Add new page in quick search', () => {
+  // FIXME: not working
+  test.skip('Create a new page without keyword', async ({ page }) => {
+    await openQuickSearchByShortcut(page);
+    const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
+    await addNewPage.click();
+    await assertTitleTexts(page, [''], { delay: 50 });
+  });
+
+  test.skip('Create a new page with keyword', async ({ page }) => {
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.insertText('test');
+    const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
+    await addNewPage.click();
+    await assertTitleTexts(page, ['test'], { delay: 50 });
+  });
+});
+
+test.describe('Search and select', () => {
+  // test('Search and get results', async ({ page }) => {
+  //   // why 1000ms page wait?
+  //   await openQuickSearchByShortcut(page);
+  //   await page.keyboard.insertText('Welcome');
+  //   await assertResultList(page, ['Welcome to the AFFiNE Alpha'], {
+  //     delay: 50,
+  //   });
+  // });
+  //TODO FIXME: This test is not working
+  test.skip('Create a new page and search this page', async ({ page }) => {
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.insertText('Welcome');
+    const addNewPage = page.locator('[data-testid=quickSearch-addNewPage]');
+    await addNewPage.click();
+    await page.waitForTimeout(500);
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.insertText('Welcome');
+    await assertResultList(page, ['Welcome to the AFFiNE Alpha', 'Welcome']);
+
+    await page.keyboard.press('ArrowDown', { delay: 50 });
+    await page.keyboard.press('Enter', { delay: 50 });
+    await assertTitleTexts(page, ['Welcome'], {
+      delay: 50,
+    });
+  });
+});

tests/shortcuts.spec.ts

@@ -7,14 +7,14 @@ test.describe('Shortcuts Modal', () => {
   test('Open shortcuts modal', async ({ page }) => {
     const faqIcon = page.locator('[data-testid=faq-icon]');
     const box = await faqIcon.boundingBox();
-    await expect(box?.x).not.toBeUndefined();
+    expect(box?.x).not.toBeUndefined();
     await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
 
     const shortcutsIcon = page.locator('[data-testid=shortcuts-icon]');
-    await expect(await shortcutsIcon.isVisible()).toEqual(true);
+    expect(await shortcutsIcon.isVisible()).toEqual(true);
 
     await shortcutsIcon.click();
-
+    await page.waitForTimeout(800);
     const shortcutsModal = page.locator('[data-testid=shortcuts-modal]');
     await expect(shortcutsModal).toContainText('Keyboard Shortcuts');
   });

tests/theme.spec.ts

@@ -1,22 +1,22 @@
-import { test, expect, type Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import { loadPage } from './libs/load-page';
 
 loadPage();
 
 test.describe('Change Theme', () => {
   test('default white', async ({ page }) => {
+    await page.waitForSelector('html');
     const root = page.locator('html');
     const themeMode = await root.evaluate(element =>
       window.getComputedStyle(element).getPropertyValue('--affine-theme-mode')
     );
-
-    await expect(themeMode).toBe('light');
+    expect(themeMode).toBe('light');
 
     const lightButton = page.locator('[data-testid=change-theme-light]');
     const buttonPositionTop = await lightButton.evaluate(
       element => window.getComputedStyle(element).top
     );
-    await expect(buttonPositionTop).toBe('0px');
+    expect(buttonPositionTop).toBe('0px');
   });
 
   test('change theme to dark', async ({ page }) => {
@@ -24,24 +24,21 @@ test.describe('Change Theme', () => {
       '[data-testid=change-theme-container]'
     );
     const box = await changeThemeContainer.boundingBox();
-    await expect(box?.x).not.toBeUndefined();
+    expect(box?.x).not.toBeUndefined();
+
     await page.mouse.move((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
-
     await page.waitForTimeout(1000);
-
     const darkButton = page.locator('[data-testid=change-theme-dark]');
     const darkButtonPositionTop = await darkButton.evaluate(
       element => element.getBoundingClientRect().y
     );
-    await expect(darkButtonPositionTop).toBe(box?.y);
+    expect(darkButtonPositionTop).toBe(box?.y);
 
     await page.mouse.click((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
-
     const root = page.locator('html');
     const themeMode = await root.evaluate(element =>
       window.getComputedStyle(element).getPropertyValue('--affine-theme-mode')
     );
-
-    await expect(themeMode).toBe('dark');
+    expect(themeMode).toBe('dark');
   });
 });