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

fix AF-1289

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

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

@@ -0,0 +1,34 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect } from '@playwright/test';
+
+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-card').first().click();
+  await expect(page.locator('.affine-edgeless-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 page mode', async ({ page }) => {
+  await page.click('[data-testid="detail-page-header-more-button"]');
+  await expect(page.getByRole('dialog')).toBeVisible();
+
+  await page.getByRole('menuitem', { name: 'convert to page' }).click();
+  await expect(page.locator('.doc-title-container')).toBeVisible();
+});
+
+test('doc info', async ({ page }) => {
+  await page.click('[data-testid="detail-page-header-more-button"]');
+  await expect(page.getByRole('dialog')).toBeVisible();
+
+  await page.getByRole('menuitem', { name: 'view info' }).click();
+  await expect(page.getByRole('button', { name: 'Back' })).toBeVisible();
+
+  await expect(page.getByRole('dialog')).toContainText('Created');
+  await expect(page.getByRole('dialog')).toContainText('Updated');
+});

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();
+});

tests/affine-mobile/e2e/utils.ts

@@ -0,0 +1,15 @@
+/* eslint-disable unicorn/prefer-dom-node-dataset */
+import { expect, type Page } from '@playwright/test';
+
+export async function expandCollapsibleSection(page: Page, name: string) {
+  const divider = page.locator(`[data-collapsible]:has-text("${name}")`);
+  if ((await divider.getAttribute('data-collapsed')) === 'true') {
+    await divider.click();
+  }
+  await expect(divider).toHaveAttribute('data-collapsed', 'false');
+  const section = divider.locator(
+    '~ [data-testid="collapsible-section-content"]'
+  );
+  await expect(section).toBeVisible();
+  return section;
+}