refactor: test directory structure (#1677)

tests/parallels/change-page-mode.spec.ts

@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { clickPageMoreActions } from '../libs/page-logic';
+import { test } from '../libs/playwright';
+
+test.describe('Change page mode(Page or Edgeless)', () => {
+  test('Switch to edgeless by switch edgeless item', async ({ page }) => {
+    await openHomePage(page);
+    const btn = await page.getByTestId('switch-edgeless-mode-button');
+    await btn.click();
+
+    const edgeless = page.locator('affine-edgeless-page');
+    expect(await edgeless.isVisible()).toBe(true);
+  });
+
+  test('Convert to edgeless by editor header items', async ({ page }) => {
+    await openHomePage(page);
+    await clickPageMoreActions(page);
+    const menusEdgelessItem = page.getByTestId('editor-option-menu-edgeless');
+    await menusEdgelessItem.click({ delay: 100 });
+
+    const edgeless = page.locator('affine-edgeless-page');
+    expect(await edgeless.isVisible()).toBe(true);
+  });
+});

tests/parallels/contact-us.spec.ts

@@ -0,0 +1,21 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+
+test.describe('Open contact us', () => {
+  test('Click right-bottom corner contact icon', async ({ page }) => {
+    await openHomePage(page);
+    await page.locator('[data-testid=help-island]').click();
+    const rightBottomContactUs = page.locator(
+      '[data-testid=right-bottom-contact-us-icon]'
+    );
+    expect(await rightBottomContactUs.isVisible()).toEqual(true);
+
+    await rightBottomContactUs.click();
+    const contactUsModal = page.locator(
+      '[data-testid=contact-us-modal-content]'
+    );
+    await expect(contactUsModal).toContainText('Check Our Docs');
+  });
+});

tests/parallels/debug-page-broadcast.spec.ts

@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../libs/playwright';
+
+test.describe('Debug page broadcast', () => {
+  test('should broadcast a message to all debug pages', async ({
+    page,
+    context,
+  }) => {
+    await page.goto('http://localhost:8080/_debug/broadcast');
+    const page2 = await context.newPage();
+    await page2.goto('http://localhost:8080/_debug/broadcast');
+    await page.waitForSelector('#__next');
+    await page2.waitForSelector('#__next');
+    await page.click('[data-testid="create-page"]');
+    expect(await page.locator('tr').count()).toBe(2);
+    expect(await page2.locator('tr').count()).toBe(2);
+    await page2.click('[data-testid="create-page"]');
+    expect(await page.locator('tr').count()).toBe(3);
+    expect(await page2.locator('tr').count()).toBe(3);
+  });
+});

tests/parallels/exception-page.spec.ts

@@ -0,0 +1,11 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../libs/playwright';
+
+test.describe('exception page', () => {
+  test('visit 404 page', async ({ page }) => {
+    await page.goto('http://localhost:8080/404');
+    const notFoundTip = page.locator('[data-testid=notFound]');
+    await expect(notFoundTip).toBeVisible();
+  });
+});

tests/parallels/invite-code-page.spec.ts

@@ -0,0 +1,11 @@
+import { expect } from '@playwright/test';
+
+import { test } from '../libs/playwright';
+
+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/parallels/layout.spec.ts

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

tests/parallels/local-first-avatar.spec.ts

@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { newPage } from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first create page', () => {
+  test('should create a page with a local first avatar', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await page.getByTestId('workspace-name').click();
+    await page.getByTestId('new-workspace').click({ delay: 50 });
+    await page
+      .getByTestId('create-workspace-input')
+      .type('Test Workspace 1', { delay: 50 });
+    await page.getByTestId('create-workspace-button').click();
+    await page.getByTestId('workspace-name').click();
+    await page.getByTestId('workspace-card').nth(1).click();
+    await page.getByTestId('slider-bar-workspace-setting-button').click();
+    await page
+      .getByTestId('upload-avatar')
+      .setInputFiles('./tests/fixtures/smile.png');
+    await page.getByTestId('workspace-name').click();
+    await page.getByTestId('workspace-card').nth(0).click();
+    await page.waitForTimeout(1000);
+    const text = await page.getByTestId('workspace-avatar').textContent();
+    // default avatar for default workspace
+    expect(text).toBe('D');
+    await page.getByTestId('workspace-name').click();
+    await page.getByTestId('workspace-card').nth(1).click();
+    const blobUrl = await page
+      .getByTestId('workspace-avatar')
+      .locator('img')
+      .getAttribute('src');
+    // out user uploaded avatar
+    expect(blobUrl).toContain('blob:');
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { getBlockSuiteEditorTitle, newPage } from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first delete page', () => {
+  test('New a page , then delete it in all pages, permanently delete it', async ({
+    page,
+  }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).fill('this is a new page to restore');
+    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.getByTestId('move-to-trash');
+    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 Favorites/Trash and the page will appear here.'
+      )
+    ).not.toBeUndefined();
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

tests/parallels/local-first-delete-workspace.spec.ts

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+import { clickSideBarSettingButton } from '../libs/sidebar';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first delete workspace', () => {
+  test('New a workspace , then delete it in all workspaces, permanently delete it', async ({
+    page,
+  }) => {
+    await openHomePage(page);
+    await clickSideBarSettingButton(page);
+    await page.getByTestId('delete-workspace-button').click();
+    const workspaceNameDom = await page.getByTestId('workspace-name');
+    const currentWorkspaceName = await workspaceNameDom.evaluate(
+      node => node.textContent
+    );
+    await page
+      .getByTestId('delete-workspace-input')
+      .type(currentWorkspaceName as string);
+    await page.getByTestId('delete-workspace-confirm-button').click();
+    expect(await page.getByTestId('workspace-card').count()).toBe(0);
+    await page.mouse.click(1, 1);
+    expect(await page.getByTestId('workspace-card').count()).toBe(0);
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,71 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import {
+  clickPageMoreActions,
+  getBlockSuiteEditorTitle,
+  newPage,
+} from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first export page', () => {
+  test.skip('New a page ,then open it and export html', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).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 clickPageMoreActions(page);
+    const exportParentBtn = page.getByRole('tooltip', {
+      name: 'Add to favorites 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.skip('New a page ,then open it and export markdown', async ({
+    page,
+  }) => {
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).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 clickPageMoreActions(page);
+    const exportParentBtn = page.getByRole('tooltip', {
+      name: 'Add to favorites 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'
+    );
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,74 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import {
+  clickPageMoreActions,
+  getBlockSuiteEditorTitle,
+  newPage,
+} from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first favorite and cancel favorite  page', () => {
+  test('New a page and open it ,then favorite it', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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 clickPageMoreActions(page);
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+    await favoriteBtn.click();
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+  test('Cancel favorite', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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 clickPageMoreActions(page);
+
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+    await favoriteBtn.click();
+
+    // expect it in favorite list
+    await page.getByRole('link', { name: 'Favorites' }).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('favorited-icon').click();
+
+    // expect it not in favorite list
+    await page.getByRole('link', { name: 'Favorites' }).click();
+    expect(
+      page.getByText(
+        'Tips: Click Add to Favorites/Trash and the page will appear here.'
+      )
+    ).not.toBeUndefined();
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,66 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import {
+  clickPageMoreActions,
+  getBlockSuiteEditorTitle,
+  newPage,
+} from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first favorite items ui', () => {
+  test('Show favorite items in sidebar', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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',
+    });
+    await expect(cell).toBeVisible();
+    await cell.click();
+    await clickPageMoreActions(page);
+
+    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 openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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 clickPageMoreActions(page);
+
+    const favoriteBtn = page.getByTestId('editor-option-menu-favorite');
+    await favoriteBtn.click();
+
+    await page.getByRole('link', { name: 'Favorites' }).click();
+    expect(
+      page.getByRole('cell', { name: 'this is a new page to favorite' })
+    ).not.toBeUndefined();
+
+    await page.getByRole('cell').getByRole('button').nth(0).click();
+    expect(
+      await page
+        .getByText('Click Add to Favorites and the page will appear here.')
+        .isVisible()
+    ).toBe(true);
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { getBlockSuiteEditorTitle, newPage } from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('local first new page', () => {
+  test('click btn new page', async ({ page }) => {
+    await openHomePage(page);
+    const originPageId = page.url().split('/').reverse()[0];
+    await newPage(page);
+    const newPageId = page.url().split('/').reverse()[0];
+    expect(newPageId).not.toBe(originPageId);
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+
+  test('click btn bew page and find it in all pages', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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();
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { getBlockSuiteEditorTitle, newPage } from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('local first new page', () => {
+  test('click btn bew page and open in tab', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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);
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,54 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { getBlockSuiteEditorTitle, newPage } from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first delete page', () => {
+  test('New a page , then delete it in all pages, restore it', async ({
+    page,
+  }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).fill('this is a new page to restore');
+    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.getByTestId('move-to-trash');
+    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();
+    await page.waitForTimeout(50);
+    const trashPage = page.url();
+    // restore it
+    await page
+      .getByTestId('more-actions-' + newPageId)
+      .getByRole('button')
+      .first()
+      .click();
+
+    // stay in trash page
+    expect(page.url()).toBe(trashPage);
+    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();
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,58 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import {
+  clickPageMoreActions,
+  getBlockSuiteEditorTitle,
+  newPage,
+} from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first delete page', () => {
+  test('New a page ,then open it and show delete modal', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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 clickPageMoreActions(page);
+    const deleteBtn = page.getByTestId('editor-option-menu-delete');
+    await deleteBtn.click();
+    const confirmTip = page.getByText('Delete page?');
+    expect(confirmTip).not.toBeUndefined();
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+
+  test('New a page ,then go to all pages and show delete modal', async ({
+    page,
+  }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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.getByTestId('move-to-trash');
+    await deleteBtn.click();
+    const confirmTip = page.getByText('Delete page?');
+    expect(confirmTip).not.toBeUndefined();
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

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

@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { getBlockSuiteEditorTitle, newPage } from '../libs/page-logic';
+import { test } from '../libs/playwright';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first trash page', () => {
+  test('New a page , then delete it in all pages, finally find it in trash', async ({
+    page,
+  }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await getBlockSuiteEditorTitle(page).click();
+    await getBlockSuiteEditorTitle(page).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.getByTestId('move-to-trash');
+    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();
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

tests/parallels/local-first-workspace-list.spec.ts

@@ -0,0 +1,62 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+import { clickSideBarAllPageButton } from '../libs/sidebar';
+import { createWorkspace } from '../libs/workspace';
+
+test.describe('Local first workspace list', () => {
+  test('just one item in the workspace list at first', async ({ page }) => {
+    await openHomePage(page);
+    const workspaceName = page.getByTestId('workspace-name');
+    await workspaceName.click();
+    expect(
+      page
+        .locator('div')
+        .filter({ hasText: 'AFFiNE TestLocal WorkspaceAvailable Offline' })
+        .nth(3)
+    ).not.toBeNull();
+  });
+
+  test('create one workspace in the workspace list', async ({ page }) => {
+    await openHomePage(page);
+    const newWorkspaceNameStr = 'New Workspace';
+    await createWorkspace({ name: newWorkspaceNameStr }, page);
+
+    // check new workspace name
+    const newWorkspaceName = page.getByTestId('workspace-name');
+    await newWorkspaceName.click();
+
+    //check workspace list length
+    const workspaceCards = await page.$$('data-testid=workspace-card');
+    expect(workspaceCards.length).toBe(2);
+
+    //check page list length
+    const closeWorkspaceModal = page.getByTestId('close-workspace-modal');
+    await closeWorkspaceModal.click();
+    await clickSideBarAllPageButton(page);
+    await page.waitForTimeout(1000);
+    const pageList = page.locator('[data-testid=page-list-item]');
+    const result = await pageList.count();
+    expect(result).toBe(0);
+    await page.reload();
+    await page.waitForTimeout(1000);
+    const pageList1 = page.locator('[data-testid=page-list-item]');
+    const result1 = await pageList1.count();
+    expect(result1).toBe(0);
+  });
+
+  test('create multi workspace in the workspace list', async ({ page }) => {
+    await openHomePage(page);
+    await createWorkspace({ name: 'New Workspace 2' }, page);
+    await createWorkspace({ name: 'New Workspace 3' }, page);
+
+    // show workspace list
+    const workspaceName = page.getByTestId('workspace-name');
+    await workspaceName.click();
+
+    //check workspace list length
+    const workspaceCards = await page.$$('data-testid=workspace-card');
+    expect(workspaceCards.length).toBe(3);
+  });
+});

tests/parallels/local-first-workspace.spec.ts

@@ -0,0 +1,33 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+import { clickSideBarCurrentWorkspaceBanner } from '../libs/sidebar';
+import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
+
+test.describe('Local first default workspace', () => {
+  test('preset workspace name', async ({ page }) => {
+    await openHomePage(page);
+    const workspaceName = page.getByTestId('workspace-name');
+    expect(await workspaceName.textContent()).toBe('Demo Workspace');
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+
+  // test('default workspace avatar', async ({ page }) => {
+  //   const workspaceAvatar = page.getByTestId('workspace-avatar');
+  //   expect(
+  //     await workspaceAvatar.locator('img').getAttribute('src')
+  //   ).not.toBeNull();
+  // });
+});
+test.describe('Language switch', () => {
+  test('Open language switch menu', async ({ page }) => {
+    await openHomePage(page);
+    await clickSideBarCurrentWorkspaceBanner(page);
+    const languageMenuButton = page.getByTestId('language-menu-button');
+    await expect(languageMenuButton).toBeVisible();
+    const actual = await languageMenuButton.innerText();
+    expect(actual).toEqual('English');
+    await assertCurrentWorkspaceFlavour('local', page);
+  });
+});

tests/parallels/open-affine.spec.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+import { createWorkspace } from '../libs/workspace';
+
+test.describe('Open AFFiNE', () => {
+  test('Open last workspace when back to affine', async ({ page }) => {
+    await openHomePage(page);
+    await createWorkspace({ name: 'New Workspace 2' }, page);
+    // FIXME: can not get when the new workspace is surely created, hack a timeout to wait
+    // waiting for page loading end
+    await page.waitForTimeout(3000);
+    // show workspace list
+    await page.getByTestId('workspace-name').click();
+
+    //check workspace list length
+    const workspaceCards = await page.$$('data-testid=workspace-card');
+    expect(workspaceCards.length).toBe(2);
+    await workspaceCards[1].click();
+    await page.goto('http://localhost:8080');
+
+    const workspaceNameDom = await page.getByTestId('workspace-name');
+    const currentWorkspaceName = await workspaceNameDom.evaluate(
+      node => node.textContent
+    );
+    expect(currentWorkspaceName).toEqual('New Workspace 2');
+  });
+});

tests/parallels/quick-search.spec.ts

@@ -0,0 +1,177 @@
+import { expect, type Page } from '@playwright/test';
+
+import { withCtrlOrMeta } from '../libs/keyboard';
+import { openHomePage } from '../libs/load-page';
+import { newPage } from '../libs/page-logic';
+import { test } from '../libs/playwright';
+
+const openQuickSearchByShortcut = async (page: Page) =>
+  await withCtrlOrMeta(page, () => page.keyboard.press('k', { delay: 50 }));
+
+async function assertTitle(page: Page, text: string) {
+  const edgeless = page.locator('affine-edgeless-page');
+  if (!edgeless) {
+    const locator = page.locator('.affine-default-page-block-title').nth(0);
+    const actual = await locator.inputValue();
+    expect(actual).toBe(text);
+  }
+}
+async function assertResultList(page: Page, texts: string[]) {
+  const actual = await page.locator('[cmdk-item]').allInnerTexts();
+  expect(actual).toEqual(texts);
+}
+async function titleIsFocused(page: Page) {
+  const edgeless = page.locator('affine-edgeless-page');
+  if (!edgeless) {
+    const title = page.locator('.affine-default-page-block-title');
+    await expect(title).toBeVisible();
+    await expect(title).toBeFocused();
+  }
+}
+
+test.describe('Open quick search', () => {
+  test('Click slider bar button', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    const quickSearchButton = page.locator(
+      '[data-testid=slider-bar-quick-search-button]'
+    );
+    await quickSearchButton.click();
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    await expect(quickSearch).toBeVisible();
+  });
+
+  test('Click arrowDown icon after title', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    const quickSearchButton = page.locator(
+      '[data-testid=slider-bar-quick-search-button]'
+    );
+    await quickSearchButton.click();
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    await expect(quickSearch).toBeVisible();
+  });
+
+  test('Press the shortcut key cmd+k', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    await expect(quickSearch).toBeVisible();
+  });
+});
+
+test.describe('Add new page in quick search', () => {
+  test('Create a new page without keyword', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    const addNewPage = page.locator('[data-testid=quick-search-add-new-page]');
+    await addNewPage.click();
+    await page.waitForTimeout(300);
+    await assertTitle(page, '');
+  });
+
+  test('Create a new page with keyword', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.insertText('test123456');
+    const addNewPage = page.locator('[data-testid=quick-search-add-new-page]');
+    await addNewPage.click();
+    await page.waitForTimeout(300);
+    await assertTitle(page, 'test123456');
+  });
+});
+
+test.describe('Search and select', () => {
+  test('Enter a keyword to search for', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.insertText('test123456');
+    const actual = await page.locator('[cmdk-input]').inputValue();
+    expect(actual).toBe('test123456');
+  });
+  test('Create a new page and search this page', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.insertText('test123456');
+    const addNewPage = page.locator('[data-testid=quick-search-add-new-page]');
+    await addNewPage.click();
+    await page.waitForTimeout(300);
+    await assertTitle(page, 'test123456');
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.insertText('test123456');
+    await page.waitForTimeout(50);
+    await assertResultList(page, ['test123456']);
+    await page.keyboard.press('Enter');
+    await page.waitForTimeout(300);
+    await assertTitle(page, 'test123456');
+  });
+});
+test.describe('Disable search on 404 page', () => {
+  test('Navigate to the 404 page and try to open quick search', async ({
+    page,
+  }) => {
+    await page.goto('http://localhost:8080/404');
+    const notFoundTip = page.locator('[data-testid=notFound]');
+    await expect(notFoundTip).toBeVisible();
+    await openQuickSearchByShortcut(page);
+    const quickSearch = page.locator('[data-testid=quickSearch]');
+    await expect(quickSearch).toBeVisible({ visible: false });
+  });
+});
+test.describe('Open quick search on the published page', () => {
+  test('Open quick search on local page', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    const publishedSearchResults = page.locator('[publishedSearchResults]');
+    await expect(publishedSearchResults).toBeVisible({ visible: false });
+  });
+});
+
+test.describe('Focus event for quick search', () => {
+  test('Autofocus input after opening quick search', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    const locator = page.locator('[cmdk-input]');
+    await expect(locator).toBeVisible();
+    await expect(locator).toBeFocused();
+  });
+  test('Autofocus input after select', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    await page.keyboard.press('ArrowUp');
+    const locator = page.locator('[cmdk-input]');
+    await expect(locator).toBeVisible();
+    await expect(locator).toBeFocused();
+  });
+  test('Focus title after creating a new page', async ({ page }) => {
+    await openHomePage(page);
+    await newPage(page);
+    await openQuickSearchByShortcut(page);
+    const addNewPage = page.locator('[data-testid=quick-search-add-new-page]');
+    await addNewPage.click();
+    await titleIsFocused(page);
+  });
+});
+test.describe('Novice guidance for quick search', () => {
+  test('When opening the website for the first time, the first folding sidebar will appear novice guide', async ({
+    page,
+  }) => {
+    await openHomePage(page);
+    const quickSearchTips = page.locator('[data-testid=quick-search-tips]');
+    await expect(quickSearchTips).not.toBeVisible();
+    await page.getByTestId('sliderBar-arrowButton-collapse').click();
+    const sliderBarArea = page.getByTestId('sliderBar');
+    await expect(sliderBarArea).not.toBeVisible();
+    await expect(quickSearchTips).toBeVisible();
+    await page.locator('[data-testid=quick-search-got-it]').click();
+    await expect(quickSearchTips).not.toBeVisible();
+  });
+});

tests/parallels/shortcuts.spec.ts

@@ -0,0 +1,20 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+
+test.describe('Shortcuts Modal', () => {
+  test('Open shortcuts modal', async ({ page }) => {
+    await openHomePage(page);
+    await page.locator('[data-testid=help-island]').click();
+
+    const shortcutsIcon = page.locator('[data-testid=shortcuts-icon]');
+    await page.waitForTimeout(1000);
+    expect(await shortcutsIcon.isVisible()).toEqual(true);
+
+    await shortcutsIcon.click();
+    await page.waitForTimeout(1000);
+    const shortcutsModal = page.locator('[data-testid=shortcuts-modal]');
+    await expect(shortcutsModal).toContainText('Keyboard Shortcuts');
+  });
+});

tests/parallels/subpage.spec.ts

@@ -0,0 +1,13 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+
+test.describe('subpage', () => {
+  test('Create subpage', async ({ page }) => {
+    await openHomePage(page);
+    await page.getByTestId('sliderBar-arrowButton-collapse').click();
+    const sliderBarArea = page.getByTestId('sliderBar');
+    await expect(sliderBarArea).not.toBeVisible();
+  });
+});

tests/parallels/theme.spec.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { test } from '../libs/playwright';
+
+test.describe('Change Theme', () => {
+  // default could be anything according to the system
+  test('default white', async ({ browser }) => {
+    const context = await browser.newContext({
+      colorScheme: 'light',
+    });
+    const page = await context.newPage();
+    await openHomePage(page);
+    await page.waitForSelector('html');
+    const root = page.locator('html');
+    const themeMode = await root.evaluate(element =>
+      element.getAttribute('data-theme')
+    );
+    expect(themeMode).toBe('light');
+
+    const lightButton = page.locator('[data-testid=change-theme-dark]');
+    expect(await lightButton.isVisible()).toBe(false);
+  });
+
+  // test('change theme to dark', async ({ page }) => {
+  //   const changeThemeContainer = page.locator(
+  //     '[data-testid=change-theme-container]'
+  //   );
+  //   const box = await changeThemeContainer.boundingBox();
+  //   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
+  //   );
+  //   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 =>
+  //     element.getAttribute('data-theme')
+  //   );
+  //   expect(themeMode).toBe('dark');
+  // });
+});