diff --git a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx
index fe1173e580..fd6a12f7f8 100644
--- a/packages/app/src/components/workspace-modal/WorkspaceCard.tsx
+++ b/packages/app/src/components/workspace-modal/WorkspaceCard.tsx
@@ -23,6 +23,7 @@ export const WorkspaceCard = ({
   const { t } = useTranslation();
   return (
     <StyledCard
+      data-testid="workspace-card"
       onClick={() => {
         onClick(workspaceData);
       }}
diff --git a/playwright.config.ts b/playwright.config.ts
index a8aa070449..f5fd850114 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -17,6 +17,7 @@ const config: PlaywrightTestConfig = {
     browserName: 'chromium',
     viewport: { width: 1440, height: 800 },
     actionTimeout: 5 * 1000,
+    locale: 'en-US',
     // Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer
     // You can open traces locally(`npx playwright show-trace trace.zip`)
     // or in your browser on [Playwright Trace Viewer](https://trace.playwright.dev/).
diff --git a/tests/libs/workspace-logic.ts b/tests/libs/workspace-logic.ts
new file mode 100644
index 0000000000..5c7f256dc6
--- /dev/null
+++ b/tests/libs/workspace-logic.ts
@@ -0,0 +1,24 @@
+import type { Page } from '@playwright/test';
+interface CreateWorkspaceParams {
+  name: string;
+}
+export async function createWorkspace(
+  params: CreateWorkspaceParams,
+  page: Page
+) {
+  // open workspace list modal
+  const workspaceName = page.getByTestId('workspace-name');
+  await workspaceName.click();
+
+  // open create workspace modal
+  await page.locator('.add-icon').click();
+
+  // input workspace name
+  await page.getByPlaceholder('Set a Workspace name').click();
+  await page.getByPlaceholder('Set a Workspace name').fill(params.name);
+
+  // click create button
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  return page.waitForTimeout(300);
+}
diff --git a/tests/local-first-workspace-list.spec.ts b/tests/local-first-workspace-list.spec.ts
new file mode 100644
index 0000000000..132abb55b3
--- /dev/null
+++ b/tests/local-first-workspace-list.spec.ts
@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+import { test } from './libs/playwright.js';
+import { loadPage } from './libs/load-page.js';
+import { createWorkspace } from './libs/workspace-logic.js';
+loadPage();
+
+test.describe('Local first workspace list', () => {
+  test('just one item in the workspace list at first', async ({ 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 }) => {
+    const newWorkspaceNameStr = 'New Workspace';
+    await createWorkspace({ name: newWorkspaceNameStr }, page);
+
+    // check new workspace name
+    const newWorkspaceName = page.getByTestId('workspace-name');
+    expect(await newWorkspaceName.textContent()).toBe(newWorkspaceNameStr);
+  });
+
+  test('create multi workspace in the workspace list', async ({ 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);
+  });
+});