test(mobile): basic e2e tests (#8031)

fix AF-1289

1. tested on 'webkit'
2. a few baseline test cases

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

@@ -0,0 +1,63 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect } from '@playwright/test';
+
+import { expandCollapsibleSection } from './utils';
+
+test('after loaded, will land on the home page', async ({ page }) => {
+  await expect(page).toHaveURL(/.*\/home/);
+});
+
+test('app tabs is visible', async ({ page }) => {
+  const tabs = page.locator('#app-tabs');
+  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: 'search' })).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-card');
+  expect(await todayDocs.count()).toBeGreaterThan(0);
+});
+
+test('search tab', async ({ page }) => {
+  const searchTab = page
+    .locator('#app-tabs')
+    .getByRole('tab', { name: 'search' });
+  await expect(searchTab).toBeVisible();
+
+  await searchTab.click();
+
+  const searchInput = page.getByTestId('search-header').getByRole('textbox');
+  await expect(searchInput).toBeVisible();
+});