login-flows

Playwright 登录流程模式

用于端到端测试中自动化登录流程的可复用模式。

基本的用户名/密码登录

import { Page } from '@playwright/test';

async function login(page: Page, username: string, password: string) {
  await page.goto('/login');
  await page.fill('[name="username"]', username);
  await page.fill('[name="password"]', password);
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');
}

OAuth / SSO 登录

对于重定向到外部提供方的 OAuth 流程：

async function loginWithOAuth(page: Page) {
  await page.goto('/login');
  await page.click('text=Sign in with Google');

  // Handle the OAuth popup or redirect
  await page.fill('input[type="email"]', process.env.TEST_EMAIL!);
  await page.click('text=Next');
  await page.fill('input[type="password"]', process.env.TEST_PASSWORD!);
  await page.click('text=Next');

  // Wait for redirect back to app
  await page.waitForURL('**/dashboard');
}

持久化认证状态（storageState）

通过保存并复用浏览器状态，避免每次测试前都登录：

// global-setup.ts — runs once before all tests
import { chromium } from '@playwright/test';

async function globalSetup() {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto('/login');
  await page.fill('[name="username"]', 'testuser');
  await page.fill('[name="password"]', 'testpass');
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');

  // Save signed-in state
  await page.context().storageState({ path: './auth.json' });
  await browser.close();
}

export default globalSetup;

然后在 playwright.config.ts 中：

export default defineConfig({
  globalSetup: './global-setup.ts',
  use: {
    storageState: './auth.json',
  },
});

MFA / 2FA 处理

对于使用基于 TOTP 的 2FA 的测试环境：

import { authenticator } from 'otplib';

async function loginWithMFA(page: Page, secret: string) {
  await login(page, 'user', 'pass');

  // Generate TOTP code
  const code = authenticator.generate(secret);
  await page.fill('[name="totp"]', code);
  await page.click('button[type="submit"]');
  await page.waitForURL('/dashboard');
}

提示

• 始终使用 storageState，避免重复登录——这是提升 E2E 套件速度的最大因素
• 使用环境变量存储凭据，切勿将凭据硬编码
• 对于 CI，可考虑使用凭据稳定的专用测试用户
• 登录后使用 page.waitForURL()，而不是任意调用 waitForTimeout()