test: add frontend visual regression coverage

2026-09-19 13:21:57 +08:00
parent cec0a4418c
commit 9c0dc3a31f
5 changed files with 55 additions and 2 deletions
@@ -0,0 +1,45 @@
+import type { APIRequestContext, Page } from '@playwright/test'
+import { expect, test } from './fixtures'
+
+async function csrf(request: APIRequestContext) {
+  const state = await request.storageState()
+  return state.cookies.find(cookie => cookie.name === 'dodo_csrf')?.value ?? ''
+}
+
+async function createTask(request: APIRequestContext, baseURL: string, title: string, listId: string) {
+  const response = await request.post('/api/v1/tasks', {
+    data: { title, list_id: listId },
+    headers: { 'x-csrf-token': await csrf(request), origin: baseURL },
+  })
+  expect(response.ok(), await response.text()).toBeTruthy()
+}
+
+async function openInbox(page: Page) {
+  if ((await page.viewportSize())!.width <= 930) {
+    await page.locator('.topbar').getByRole('button', { name: /展开菜单|收起菜单/ }).click()
+  }
+  await page.locator('.sidebar').getByRole('button', { name: '收集箱', exact: true }).click()
+}
+
+test('inbox and task composer match approved visuals', async ({ page, request, baseURL }, testInfo) => {
+  test.skip(testInfo.project.name !== 'mobile-390', 'approved visual baselines are maintained for mobile-390 only')
+  await page.clock.install({ time: new Date('2026-09-19T05:00:00.000Z') })
+
+  const bootstrap = await request.get('/api/v1/bootstrap')
+  expect(bootstrap.ok()).toBeTruthy()
+  const inbox = (await bootstrap.json()).lists.find((item: { is_inbox: boolean }) => item.is_inbox)
+  expect(inbox).toBeTruthy()
+
+  await createTask(request, baseURL!, '整理本周工作记录', inbox.id)
+  await createTask(request, baseURL!, '检查 Dodo 备份', inbox.id)
+  await createTask(request, baseURL!, '周末买水果和牛奶', inbox.id)
+
+  await page.goto('/')
+  await openInbox(page)
+  await expect(page.locator('.task-row')).toHaveCount(3)
+  await expect(page).toHaveScreenshot('inbox.png', { fullPage: true })
+
+  await page.getByRole('button', { name: '添加任务' }).click()
+  await expect(page.getByRole('dialog', { name: /添加任务/ })).toBeVisible()
+  await expect(page).toHaveScreenshot('task-composer.png', { fullPage: true })
+})