Playwright/Puppeteer循环中async/await异常：注册页重复用同一邮箱

问题核心 #

循环中异步操作未正确绑定迭代变量，或未等待每个操作完成，导致每次请求都使用初始的test0@example.com，触发“邮箱已被使用”错误。

正确实现代码 #

Playwright版本 #

const { test, expect } = require('@playwright/test');

test('测试限流注册逻辑', async ({ browser }) => {
  // 测试3次递增邮箱注册
  for (let i = 0; i < 3; i++) {
    // 每次循环创建新页面，避免缓存干扰
    const page = await browser.newPage();
    try {
      await page.goto('/register');
      // 动态生成递增邮箱
      await page.fill('input[name="email"]', `test${i}@example.com`);
      await page.fill('input[name="password"]', 'TestPass123!');
      // 提交表单
      await page.click('button[type="submit"]');
      // 捕获结果提示
      const result = await page.locator('.auth-message').textContent();
      console.log(`第${i+1}次请求: ${result.trim()}`);
    } finally {
      await page.close();
    }
    // 可选：添加间隔避免触发限流阈值
    await new Promise(resolve => setTimeout(resolve, 1200));
  }
});

Puppeteer版本 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  try {
    for (let i = 0; i < 3; i++) {
      const page = await browser.newPage();
      try {
        await page.goto('http://localhost:3000/register');
        // 填充动态邮箱
        await page.type('input[name="email"]', `test${i}@example.com`);
        await page.type('input[name="password"]', 'TestPass123!');
        await page.click('button[type="submit"]');
        // 等待结果元素加载
        await page.waitForSelector('.auth-message');
        const message = await page.$eval('.auth-message', el => el.textContent);
        console.log(`第${i+1}次请求结果: ${message.trim()}`);
      } finally {
        await page.close();
      }
      await new Promise(resolve => setTimeout(resolve, 1200));
    }
  } finally {
    await browser.close();
  }
})();

常见错误排查点 #

• 变量作用域：必须用let i而不是var i，let会为每个循环迭代创建独立的变量绑定，避免异步操作共享同一个变量值。
• 异步等待：循环内的每个页面操作必须用await等待完成，否则所有请求会同时发起，导致变量捕获异常或表单数据未更新。
• 页面复用问题：不要复用同一个页面测试多次注册，每次循环创建新页面可以避免表单缓存、Cookie残留等问题。
• 模板字符串语法：确保邮箱用反引号`包裹，正确拼接i变量，比如`test${i}@example.com`，如果用单引号会导致变量无法解析。

Next.js Server Actions 侧验证 #

检查你的注册Server Action代码，确保正确接收前端传递的邮箱参数，比如：

// app/actions/register.ts
'use server';

import { db } from '@/db';
import { users } from '@/db/schema';

export async function register(formData: FormData) {
  const email = formData.get('email') as string;
  // 打印邮箱参数，确认是否正确接收
  console.log('注册请求邮箱:', email);
  // 后续逻辑...
}

通过后端日志确认邮箱参数是否和前端预期一致，排除后端硬编码或参数接收错误的可能。

内容的提问来源于stack exchange，提问作者deadcoder0904