snapshot of https://github.com/toeverything/AFFiNE.git (canary, 2026-09-16; blobs > 131072B omitted)

tests/affine-mobile/e2e/back-button-visibility.spec.ts

@@ -0,0 +1,34 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect, type Page } from '@playwright/test';
+
+import { expandCollapsibleSection, openTab, pageBack } from './utils';
+
+const locateBack = (page: Page) => page.getByTestId('page-header-back');
+
+test('new doc returns to its source without creating a New destination', async ({
+  page,
+}) => {
+  await openTab(page, 'New Page');
+  await expect(locateBack(page)).toBeVisible();
+  await pageBack(page);
+  await expect(page).toHaveURL(/\/home$/);
+
+  await expandCollapsibleSection(page, 'recent');
+  const docCard = page.getByTestId('doc-card').first();
+  await expect(docCard).toBeVisible();
+  await docCard.click();
+  await expect(locateBack(page)).toBeVisible();
+});
+
+// TODO(@CatsJuice): mobile @ menu is not ready
+// test('jump to linked doc should show back', async ({ page }) => {
+//   await openTab(page, 'New Page');
+//   await expect(locateBack(page)).not.toBeVisible();
+//   const docId = await page.evaluate(() => location.pathname.split('/').pop());
+//   await page.keyboard.type('Test Doc');
+//   await page.keyboard.press('Enter');
+//   await page.waitForTimeout(100);
+//   await createLinkedPage(page, 'Test Linked Doc');
+
+//   await expect(locateBack(page)).toBeVisible();
+// });

tests/affine-mobile/e2e/detail.spec.ts

@@ -0,0 +1,62 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect, type Page } from '@playwright/test';
+
+const openDocInfoModal = async (page: Page) => {
+  await page.click('[data-testid="detail-page-header-more-button"]');
+  await expect(page.getByRole('dialog')).toBeVisible();
+
+  const viewInfo = page.getByRole('button', { name: 'view info' });
+  const viewInfoBox = await viewInfo.boundingBox();
+  expect(viewInfoBox).not.toBeNull();
+  if (!viewInfoBox) throw new Error('View info action has no layout box');
+  await page.touchscreen.tap(
+    viewInfoBox.x + viewInfoBox.width / 2,
+    viewInfoBox.y + viewInfoBox.height / 2
+  );
+  await expect(page.getByTestId('mobile-menu-back-button')).toBeVisible();
+};
+
+test.beforeEach(async ({ page }) => {
+  const docsTab = page.locator('#app-tabs').getByRole('tab', { name: 'all' });
+  await expect(docsTab).toBeVisible();
+  await docsTab.click();
+  await page.getByTestId('doc-list-item').first().click();
+  await expect(page.locator('.affine-page-viewport')).toBeVisible();
+});
+
+test('can open page view more menu', async ({ page }) => {
+  await page.click('[data-testid="detail-page-header-more-button"]');
+  await expect(page.getByRole('dialog')).toBeVisible();
+});
+
+test('switch to edgeless mode', async ({ page }) => {
+  await page.click('[data-testid="detail-page-header-more-button"]');
+  await expect(page.getByRole('dialog')).toBeVisible();
+
+  await page.getByRole('button', { name: 'Default to Edgeless mode' }).click();
+  await expect(page.locator('.affine-edgeless-viewport')).toBeVisible();
+});
+
+test('can show doc info', async ({ page }) => {
+  await openDocInfoModal(page);
+  await expect(page.getByRole('dialog')).toContainText('Created');
+  await expect(page.getByRole('dialog')).toContainText('Updated');
+});
+
+test('can add text property', async ({ page }) => {
+  await openDocInfoModal(page);
+
+  await expect(
+    page.getByRole('button', { name: 'Add property' })
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: 'Add property' }).click();
+  await page.getByRole('button', { name: 'Text' }).click();
+
+  await expect(
+    page.getByTestId('mobile-menu-back-button').last()
+  ).toBeVisible();
+  await page.getByTestId('mobile-menu-back-button').last().click();
+
+  await expect(page.getByTestId('mobile-menu-back-button')).toBeVisible();
+});

tests/affine-mobile/e2e/explorer-favorite.spec.ts

@@ -0,0 +1,44 @@
+import { test } from '@affine-test/kit/mobile';
+import { getBlockSuiteEditorTitle } from '@affine-test/kit/utils/page-logic';
+import { getCurrentDocIdFromUrl } from '@affine-test/kit/utils/url';
+import { expect } from '@playwright/test';
+
+import {
+  expandCollapsibleSection,
+  openNavigationPanelNodeSwipeMenu,
+  pageBack,
+} from './utils';
+
+test('Create new doc in favorites', async ({ page }) => {
+  const section = await expandCollapsibleSection(page, 'favorites');
+  const newButton = section.getByTestId(
+    'navigation-panel-bar-add-favorite-button'
+  );
+  await newButton.tap();
+
+  // const testTitleText = 'Test Favorited Doc';
+  const title = getBlockSuiteEditorTitle(page);
+  await expect(title).toBeVisible();
+  // TODO(@CatsJuice): Mobile editor is not ready yet
+  // await title.fill(testTitleText);
+  const docId = getCurrentDocIdFromUrl(page);
+
+  await pageBack(page);
+  const section2 = await expandCollapsibleSection(page, 'favorites');
+  const node = section2.getByTestId(`navigation-panel-doc-${docId}`);
+  await expect(node).toBeVisible();
+
+  await node.getByTestId('navigation-panel-collapsed-button').tap();
+  await expect(
+    page.getByTestId('navigation-panel-doc-add-linked-page')
+  ).toBeVisible();
+
+  await openNavigationPanelNodeSwipeMenu(page, node);
+  const menu = page.getByRole('dialog');
+  await expect(menu).toBeVisible();
+  await expect(menu.getByRole('button', { name: 'Duplicate' })).toBeVisible();
+  await expect(page.locator('#app-tabs')).toHaveCount(1);
+
+  // const label = node.getByText(testTitleText);
+  // await expect(label).toBeVisible();
+});

tests/affine-mobile/e2e/explorer-folder.spec.ts

@@ -0,0 +1,78 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import {
+  expandCollapsibleSection,
+  getAttrOfActiveElement,
+  openNavigationPanelNodeMenu,
+} from './utils';
+
+const locateFolder = async (scope: Page | Locator, name: string) => {
+  return scope.locator(
+    `[data-role="navigation-panel-folder"][aria-label="${name}"]`
+  );
+};
+
+/**
+ * Check rename input is focused
+ */
+const isRenameInputFocused = async (page: Page) => {
+  const focusElTestid = await getAttrOfActiveElement(page);
+  expect(focusElTestid).toEqual('rename-input');
+};
+
+const createRootFolder = async (page: Page, name: string) => {
+  const section = await expandCollapsibleSection(page, 'organize');
+  await section.getByTestId('navigation-panel-bar-add-organize-button').tap();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  await isRenameInputFocused(page);
+  await page.keyboard.type(name);
+  await dialog.getByTestId('rename-confirm').tap();
+  await expect(dialog).not.toBeVisible();
+  const node = await locateFolder(section, name);
+  return node;
+};
+
+const createSubFolder = async (page: Page, parent: Locator, name: string) => {
+  const menu = await openNavigationPanelNodeMenu(page, parent);
+  await menu.getByTestId('create-subfolder').tap();
+
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  await isRenameInputFocused(page);
+  await page.keyboard.type(name);
+  await dialog.getByTestId('rename-confirm').tap();
+  await expect(dialog).not.toBeVisible();
+  const node = await locateFolder(page, name);
+  return node;
+};
+
+test('create a folder', async ({ page }) => {
+  const node = await createRootFolder(page, 'Test Folder');
+  await expect(node).toBeVisible();
+});
+
+test('create a sub folder', async ({ page }) => {
+  const parent = await createRootFolder(page, 'Parent Folder');
+  await expect(parent).toBeVisible();
+  await parent.tap();
+  const child = await createSubFolder(page, parent, 'Child Folder');
+  await expect(child).toBeVisible();
+});
+
+test('create a folder and rename it', async ({ page }) => {
+  const originalName = 'Test Folder';
+  const appendedName = ' Renamed';
+
+  const folder = await createRootFolder(page, originalName);
+  const menu = await openNavigationPanelNodeMenu(page, folder);
+  await menu.getByTestId('rename-folder').tap();
+  await isRenameInputFocused(page);
+  await page.keyboard.type(appendedName);
+  await menu.getByTestId('rename-confirm').tap();
+
+  const renamedFolder = await locateFolder(page, originalName + appendedName);
+  await expect(folder).not.toBeVisible();
+  await expect(renamedFolder).toBeVisible();
+});

tests/affine-mobile/e2e/explorer-tag.spec.ts

@@ -0,0 +1,112 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import {
+  expandCollapsibleSection,
+  getAttrOfActiveElement,
+  openNavigationPanelNodeMenu,
+} from './utils';
+
+async function locateTag(scope: Page | Locator, name: string) {
+  return scope.locator(
+    `[data-role="navigation-panel-tag"][aria-label="${name}"]`
+  );
+}
+
+async function getNavigationPanelTagColor(tagNode: Locator) {
+  const icon = tagNode.getByTestId('navigation-panel-tag-icon-dot');
+  await expect(icon).toBeVisible();
+  const color = await icon.evaluate(el => el.style.backgroundColor);
+  return color;
+}
+
+async function changeTagColor(scope: Locator, color: string) {
+  const trigger = scope.getByTestId('tag-color-picker-trigger');
+  const select = scope.getByTestId('tag-color-picker-select');
+  await trigger.tap();
+  await expect(select).toBeVisible();
+  const colorDot = select.locator(`[data-color="${color}"]`);
+  await colorDot.tap();
+}
+
+async function createRootTag(
+  page: Page,
+  name: string,
+  color = 'var(--affine-palette-line-red)'
+) {
+  const section = await expandCollapsibleSection(page, 'tags');
+  await section.getByTestId('navigation-panel-add-tag-button').tap();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  // input name
+  const focusedTestid = await getAttrOfActiveElement(page);
+  expect(focusedTestid).toEqual('rename-input');
+  await page.keyboard.type(name);
+  // set color
+  await changeTagColor(dialog, color);
+  // confirm
+  await dialog.getByTestId('rename-input').focus();
+  await dialog.getByTestId('rename-confirm').tap();
+  const tag = await locateTag(section, name);
+  await expect(tag).toBeVisible();
+  // check tag color
+  const fill = await getNavigationPanelTagColor(tag);
+  expect(fill).toEqual(color);
+  return tag;
+}
+
+test('create a tag from navigation panel', async ({ page }) => {
+  const tag = await createRootTag(page, 'Test Tag');
+  await tag.getByTestId('navigation-panel-collapsed-button').tap();
+  await expect(tag).toHaveAttribute('aria-expanded', 'true');
+  await expect(page.getByTestId('navigation-panel-tag-add-page')).toBeVisible();
+});
+
+test('rename a tag from navigation panel', async ({ page }) => {
+  const originalName = 'Test Tag';
+  const appendedName = ' Renamed';
+
+  const tag = await createRootTag(page, originalName);
+  const menu = await openNavigationPanelNodeMenu(page, tag);
+  const rename = menu.getByTestId('rename-tag');
+  const renameBox = await rename.boundingBox();
+  expect(renameBox).not.toBeNull();
+  if (!renameBox) throw new Error('Rename action has no layout box');
+  const touchPoint = {
+    x: renameBox.x + renameBox.width / 2,
+    y: renameBox.y + renameBox.height / 2,
+  };
+  await page.touchscreen.tap(touchPoint.x, touchPoint.y);
+  await expect(menu.getByTestId('rename-input')).toBeVisible();
+  const back = menu.getByTestId('mobile-menu-back-button').last();
+  const backBox = await back.boundingBox();
+  expect(backBox).not.toBeNull();
+  if (!backBox) throw new Error('Rename back button has no layout box');
+  await page.touchscreen.tap(
+    backBox.x + backBox.width / 2,
+    backBox.y + backBox.height / 2
+  );
+  await expect(menu.getByTestId('rename-tag')).toBeVisible();
+  await menu.getByTestId('rename-tag').tap();
+  const focusedTestid = await getAttrOfActiveElement(page);
+  expect(focusedTestid).toEqual('rename-input');
+  await page.keyboard.type(appendedName);
+  await menu.getByTestId('rename-confirm').tap();
+  await expect(tag).not.toBeVisible();
+  const renamedTag = await locateTag(page, originalName + appendedName);
+  await expect(renamedTag).toBeVisible();
+});
+
+test('change tag color from navigation panel', async ({ page }) => {
+  const newColor = 'var(--affine-palette-line-green)';
+  const tagName = 'Test Tag';
+  const tag = await createRootTag(page, tagName);
+  const menu = await openNavigationPanelNodeMenu(page, tag);
+  await menu.getByTestId('rename-tag').tap();
+  await changeTagColor(menu, newColor);
+  await menu.getByTestId('rename-confirm').tap();
+
+  const updatedTag = await locateTag(page, tagName);
+  const fill = await getNavigationPanelTagColor(updatedTag);
+  expect(fill).toEqual(newColor);
+});

tests/affine-mobile/e2e/home.spec.ts

@@ -0,0 +1,159 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect } from '@playwright/test';
+
+import { expandCollapsibleSection, pageBack } from './utils';
+
+declare global {
+  interface Window {
+    currentWorkspace?: {
+      meta: { id: string; flavour: string };
+    };
+  }
+}
+
+test('after loaded, will land on the home page', async ({ page }) => {
+  await expect(page).toHaveURL(/.*\/home/);
+});
+
+test('stale first-open state still restores one local workspace', async ({
+  context,
+}) => {
+  await context.addInitScript(() => {
+    window.localStorage.setItem('app_config', '{"onBoarding":false}');
+    window.localStorage.setItem('is-first-open', 'false');
+  });
+  const page = await context.newPage();
+
+  await page.goto('http://localhost:8080/');
+  await page.waitForFunction(() => window.currentWorkspace !== undefined);
+  const firstWorkspace = await page.evaluate(async () => {
+    if (!window.currentWorkspace) {
+      await new Promise<void>(resolve => {
+        window.addEventListener('affine:workspace:change', () => resolve(), {
+          once: true,
+        });
+      });
+    }
+    return window.currentWorkspace?.meta;
+  });
+
+  expect(firstWorkspace?.flavour).toBe('local');
+  await page.goto(
+    `http://localhost:8080/workspace/${firstWorkspace?.id ?? ''}/home`
+  );
+  await expect(page.getByRole('searchbox')).toBeVisible();
+  await page
+    .locator('[data-testid="workspace-selector-trigger"]:visible')
+    .click();
+  await expect(
+    page.getByRole('dialog').getByTestId('workspace-avatar')
+  ).toHaveCount(1);
+
+  await page.reload();
+  await page.waitForFunction(() => window.currentWorkspace !== undefined);
+  const reloadedWorkspace = await page.evaluate(
+    () => window.currentWorkspace?.meta
+  );
+  expect(reloadedWorkspace?.id).toBe(firstWorkspace?.id);
+});
+
+test('workspace selector does not offer workspace creation', async ({
+  page,
+}) => {
+  await expect(page.getByRole('searchbox')).toBeVisible();
+  await page
+    .locator('[data-testid="workspace-selector-trigger"]:visible')
+    .click();
+  await expect(page.getByText('Workspace', { exact: true })).toBeVisible();
+  await expect(page.getByTestId('new-workspace')).toHaveCount(0);
+  await expect(page.getByText('Name your workspace')).toHaveCount(0);
+});
+
+test('app tabs is visible', async ({ page }) => {
+  const tabs = page.locator('#app-tabs');
+  await expect(tabs).toHaveCount(1);
+  await expect(tabs).toBeVisible();
+
+  await expect(tabs.getByRole('tab', { name: 'home' })).toBeVisible();
+  await expect(tabs.getByRole('tab', { name: 'all' })).toBeVisible();
+  await expect(tabs.getByRole('tab', { name: 'journal' })).toBeVisible();
+  await expect(tabs.getByRole('tab', { name: 'new' })).toBeVisible();
+});
+
+test('notifications prompt unauthenticated users to sign in', async ({
+  page,
+}) => {
+  await page.getByTestId('notification-button').tap();
+  const notifications = page.getByText('Sign in to continue');
+  await expect(notifications).toBeVisible();
+  await page.getByRole('button', { name: 'Sign in' }).click();
+  await expect(page.getByTestId('continue-login-button')).toBeVisible();
+});
+
+test('recent docs', async ({ page }) => {
+  const recentSection = await expandCollapsibleSection(page, 'recent');
+
+  const docs = recentSection.getByTestId('doc-card');
+  const firstDoc = docs.first();
+
+  await expect(firstDoc).toBeVisible();
+
+  const title = await firstDoc
+    .getByTestId('doc-card-header')
+    .getByRole('heading')
+    .textContent();
+
+  // when click favorite icon, will show in the favorites section
+  await docs.getByRole('button', { name: 'favorite' }).first().click();
+
+  const favList = await expandCollapsibleSection(page, 'favorites');
+  await expect(favList).toBeVisible();
+
+  if (title) {
+    await expect(favList).toContainText(title);
+  }
+});
+
+test('all tab', async ({ page }) => {
+  const docsTab = page.locator('#app-tabs').getByRole('tab', { name: 'all' });
+  await expect(docsTab).toBeVisible();
+
+  await docsTab.click();
+
+  const todayDocs = page.getByTestId('doc-list-item');
+  await expect(todayDocs.first()).toBeVisible();
+  expect(await todayDocs.count()).toBeGreaterThan(0);
+});
+
+test('search restores query and results without reopening the keyboard', async ({
+  page,
+}) => {
+  await expandCollapsibleSection(page, 'recent');
+  const title = await page
+    .getByTestId('doc-card')
+    .first()
+    .getByTestId('doc-card-header')
+    .getByRole('heading')
+    .textContent();
+  expect(title).toBeTruthy();
+  await page.getByRole('searchbox').click();
+  await expect(page).toHaveURL(/\/search$/);
+  await expect(page.locator('#app-tabs')).toBeHidden();
+  const search = page.getByRole('searchbox');
+  await search.fill(title ?? '');
+  const result = page.locator('[data-scroll] [data-testid="doc-card"]').first();
+  await expect(result).toBeVisible();
+  await result.click();
+  await expect(page).not.toHaveURL(/\/search$/);
+  await pageBack(page);
+  await expect(page).toHaveURL(/\/search$/);
+  await expect(page.getByRole('searchbox')).toHaveValue(title ?? '');
+  await expect(
+    page.locator('[data-scroll] [data-testid="doc-card"]').first()
+  ).toBeVisible();
+  expect(
+    await page
+      .getByRole('searchbox')
+      .evaluate(el => el === document.activeElement)
+  ).toBe(false);
+});

tests/affine-mobile/e2e/settings.spec.ts

@@ -0,0 +1,28 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect, type Page } from '@playwright/test';
+
+const openSettings = async (page: Page) => {
+  await page.getByTestId('settings-button').click();
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(page.locator('header:has-text("Settings")')).toBeVisible();
+};
+
+test('can open settings', async ({ page }) => {
+  await openSettings(page);
+  await expect(page.getByText('Devices', { exact: true })).toHaveCount(0);
+});
+
+test('can change theme', async ({ page }) => {
+  await openSettings(page);
+  const select = page
+    .getByTestId('setting-row')
+    .filter({
+      hasText: 'Color mode',
+    })
+    .getByTestId('native-dropdown-select-trigger');
+
+  await select.selectOption('light');
+  await select.selectOption('dark');
+
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+});

tests/affine-mobile/e2e/utils.ts

@@ -0,0 +1,101 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+export async function expandCollapsibleSection(page: Page, name: string) {
+  const divider = page.locator(`[data-collapsible]:has-text("${name}")`);
+  await divider.waitFor({ state: 'visible' });
+  // oxlint-disable-next-line prefer-dom-node-dataset
+  if ((await divider.getAttribute('data-collapsed')) === 'true') {
+    if ((await divider.getAttribute('role')) === 'switch') {
+      await divider.click();
+    } else {
+      await divider.getByRole('button').click();
+    }
+  }
+  await expect(divider).toHaveAttribute('data-collapsed', 'false');
+  const section = divider.locator(
+    '~ [data-testid="collapsible-section-content"]'
+  );
+  if ((await section.count()) > 0) {
+    await expect(section).toBeVisible();
+    return section;
+  }
+  return page.locator('body');
+}
+
+/**
+ * Click header "<" button
+ */
+export async function pageBack(page: Page) {
+  await page.getByTestId('page-header-back').tap();
+}
+
+export async function getAttrOfActiveElement(
+  page: Page,
+  attrName = 'data-testid'
+) {
+  return await page.evaluate(name => {
+    const el = document.activeElement;
+    return el ? el.getAttribute(name) : '';
+  }, attrName);
+}
+
+/**
+ * Open the context menu of an navigation panel node
+ * @returns Menu Locator
+ */
+export async function openNavigationPanelNodeMenu(page: Page, node: Locator) {
+  await node.getByTestId('menu-trigger').tap();
+  const menu = page.getByRole('dialog');
+  await expect(menu).toBeVisible();
+  return menu;
+}
+
+export async function openNavigationPanelNodeSwipeMenu(
+  page: Page,
+  node: Locator
+) {
+  if (page.context().browser()?.browserType().name() !== 'chromium') {
+    await node
+      .getByTestId('swipe-menu-trigger')
+      .evaluate(button =>
+        button.dispatchEvent(
+          new MouseEvent('click', { bubbles: true, cancelable: true })
+        )
+      );
+    return;
+  }
+
+  const box = await node.boundingBox();
+  if (!box) throw new Error('Navigation row is not visible');
+  const session = await page.context().newCDPSession(page);
+  try {
+    const y = box.y + box.height / 2;
+    await session.send('Input.dispatchTouchEvent', {
+      type: 'touchStart',
+      touchPoints: [{ x: box.x + box.width - 20, y }],
+    });
+    await session.send('Input.dispatchTouchEvent', {
+      type: 'touchMove',
+      touchPoints: [{ x: box.x, y }],
+    });
+    await session.send('Input.dispatchTouchEvent', {
+      type: 'touchEnd',
+      touchPoints: [],
+    });
+  } finally {
+    await session.detach();
+  }
+}
+
+export async function openTab(
+  page: Page,
+  name: 'home' | 'all' | 'Journal' | 'New Page'
+) {
+  const tab = page.locator('#app-tabs').getByRole('tab', { name });
+  await expect(tab).toBeVisible();
+  await tab.click();
+
+  // oxlint-disable-next-line prefer-dom-node-dataset
+  const isActive = await tab.getAttribute('data-active');
+  expect(isActive).toBe('true');
+}

tests/affine-mobile/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@affine-test/affine-mobile",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "e2e": "yarn playwright test"
+  },
+  "devDependencies": {
+    "@affine-test/kit": "workspace:*",
+    "@playwright/test": "=1.58.2"
+  },
+  "version": "0.27.5"
+}

tests/affine-mobile/playwright.config.ts

@@ -0,0 +1,68 @@
+import { testResultDir } from '@affine-test/kit/playwright';
+import { devices, type PlaywrightTestConfig } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './e2e',
+  fullyParallel: true,
+  timeout: process.env.CI ? 60_000 : 30_000,
+  outputDir: testResultDir,
+  projects: [
+    process.env.CI
+      ? {
+          name: 'Mobile Safari',
+          use: {
+            ...devices['iPhone 14'],
+          },
+        }
+      : undefined,
+    {
+      name: 'Mobile Chrome',
+      use: {
+        ...devices['Pixel 5'],
+      },
+    },
+  ].filter(config => config !== undefined),
+  expect: {
+    timeout: process.env.CI ? 15_000 : 5_000,
+  },
+  use: {
+    baseURL: 'http://localhost:8080/',
+    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/).
+    trace: 'retain-on-failure',
+    // Record video only when retrying a test for the first time.
+    video: 'retain-on-failure',
+  },
+  forbidOnly: !!process.env.CI,
+  workers: 4,
+  retries: 1,
+  // 'github' for GitHub Actions CI to generate annotations, plus a concise 'dot'
+  // default 'list' when running locally
+  // See https://playwright.dev/docs/test-reporters#github-actions-annotations
+  reporter: process.env.CI ? 'github' : 'list',
+
+  webServer: [
+    // Intentionally not building the web, reminds you to run it by yourself.
+    {
+      command: 'yarn run -T affine dev -p @affine/mobile',
+      timeout: 120 * 1000,
+      reuseExistingServer: !process.env.CI,
+      env: {
+        COVERAGE: process.env.COVERAGE || 'false',
+      },
+      url: 'http://localhost:8080',
+    },
+  ],
+};
+
+if (process.env.CI) {
+  config.retries = 3;
+  config.workers = '50%';
+}
+
+export default config;

tests/affine-mobile/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.web.json",
+  "compilerOptions": {
+    "rootDir": "./e2e",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["e2e"],
+  "references": [{ "path": "../kit" }]
+}