Creates reliable, accessible P…

# Playwright E2E 测试方案：注册 / 登录 / 年费会员购买

一、环境与项目准备

```bash

npm init playwright@latest

npm i -D @playwright/test

```

• playwright.config.ts 建议配置：
• baseURL 指向测试环境域名，避免打生产库
• webServer 自动启动 Next.js dev/server（reuseExistingServer: true）
• use.trace: 'on-first-retry'，失败留痕迹
• Next.js 官网多为 SSR/水合渲染，注意等待策略（用 getByRole 自动等待，避免裸 sleep）

二、通用建议

• 选择器优先级：getByRole > getByLabel > getByText > CSS
• 用 fixtures 抽公共登录逻辑（storageState 复用登录态）
• 每个用例独立数据：注册邮箱用 test-${Date.now()}@test.com，避免跑批冲突

三、核心代码示例

1. 注册 + 邮箱格式错误 aria 可访问性检查

```ts

test('注册-邮箱格式错误提示可访问', async ({ page }) => {

await page.goto('/register');

await page.getByLabel('邮箱').fill('invalid-email');

await page.getByLabel('密码').fill('Passw0rd!123');

await page.getByRole('button', { name: '注册' }).click();

const err = page.getByRole('alert');

await expect(err).toBeVisible();

// aria-live 保证读屏软件能播报

await expect(err).toHaveAttribute('aria-live', /assertive|polite/);

// 输入框与错误关联

await expect(page.getByLabel('邮箱')).toHaveAttribute(

'aria-invalid', 'true'

);

await expect(page.getByLabel('邮箱')).toHaveAttribute(

'aria-describedby', /.+/

);

// 错误文案包含"邮箱"关键字（按你们实际文案调整）

await expect(err).toContainText(/邮箱/);

});

```

2. 登录

```ts

test('登录成功', async ({ page }) => {

await page.goto('/login');

await page.getByLabel('邮箱').fill(email);

await page.getByLabel('密码').fill(password);

await page.getByRole('button', { name: '登录' }).click();

await expect(page).toHaveURL(/dashboard|home/);

await expect(page.getByRole('button', { name: /退出|头像/ })).toBeVisibl