跨浏览器测试中的竞态条件问题及优化需求

问题本质 #

你设置workers=1仅能让测试串行执行，但Playwright的每个浏览器项目（chromium/firefox/webkit）是独立的测试实例，它们共享同一个后端数据库/存储环境。即使串行跑，前一个浏览器的测试数据未清理，后一个浏览器测试就会因操作同一条主键为username的记录产生冲突。WebKit因引擎特性（比如缓存、操作时序差异），这个问题表现得更明显。

以下是比随机数更优的解决方案：

1. 每个测试用例前后重置测试数据 #

这是最通用且可靠的方案，确保每个测试都在干净的环境中执行：

• 利用后端提供的测试清理接口，或者直接操作数据库重置数据
• 在Playwright的test.beforeEach或test.afterEach钩子中执行清理逻辑

示例代码：

// 在测试文件顶部添加前置钩子
test.beforeEach(async ({ request }) => {
  // 调用后端的测试数据重置接口（需要后端支持）
  await request.post('http://localhost:3000/api/test/reset-users');
});

test('insert and delete record', async ({ page }) => {
  await page.goto("http://localhost:4173/");

  // 固定username，无需随机数
  const username = 'johndoe_test';
  
  // insert
  await page.locator('input[id="first"]').fill('John');
  await page.locator('input[id="last"]').fill('Doe');
  await page.locator('input[id="username"]').fill(username);
  await page.waitForFunction(() => {
    const button = document.querySelector('#form button.primary');
    return button && !button.disabled;
  });
  await page.locator('#form button.primary').click();

  // delete
  await page.getByText(username).click();
  await page.locator('#list footer button[id="delete"]').click();
});

如果后端没有清理接口，也可以直接用数据库客户端（比如pg/mysql2）在钩子中执行TRUNCATE TABLE users或类似语句。

2. 为每个浏览器项目分配专属数据前缀 #

给不同浏览器的测试数据加上唯一前缀，从根源避免数据冲突，同时保持测试数据可预测（方便调试）：

步骤1：修改Playwright配置，为每个项目添加自定义参数 #

// playwright.config.js
module.exports = {
  workers: process.env.CI ? 1 : undefined,
  projects: [
    {
      name: 'chromium',
      use: { 
        ...devices['Desktop Chrome'],
        // 自定义前缀
        testDataPrefix: 'chrome_' 
      },
    },
    {
      name: 'firefox',
      use: { 
        ...devices['Desktop Firefox'],
        testDataPrefix: 'firefox_' 
      },
    },
    {
      name: 'webkit',
      use: { 
        ...devices['Desktop Safari'],
        testDataPrefix: 'webkit_' 
      },
    },
  ]
};

步骤2：在测试中使用前缀生成唯一用户名 #

test('insert and delete record', async ({ page, testDataPrefix }) => {
  await page.goto("http://localhost:4173/");

  // 用浏览器专属前缀生成唯一username
  const username = `${testDataPrefix}johndoe`;
  
  // insert逻辑
  await page.locator('input[id="first"]').fill('John');
  await page.locator('input[id="last"]').fill('Doe');
  await page.locator('input[id="username"]').fill(username);
  await page.waitForFunction(() => {
    const button = document.querySelector('#form button.primary');
    return button && !button.disabled;
  });
  await page.locator('#form button.primary').click();

  // delete逻辑
  await page.getByText(username).click();
  await page.locator('#list footer button[id="delete"]').click();
});

3. 针对WebKit的额外优化（辅助方案） #

WebKit可能存在缓存或会话状态残留问题，可通过以下配置强化隔离：

// playwright.config.js中webkit项目的配置
{
  name: 'webkit',
  use: { 
    ...devices['Desktop Safari'],
    testDataPrefix: 'webkit_',
    contextOptions: {
      // 禁用Service Worker缓存
      serviceWorkers: 'block',
      // 每次测试创建全新的上下文，不继承任何状态
      storageState: undefined,
      // 禁用HTTP缓存
      extraHTTPHeaders: {
        'Cache-Control': 'no-cache'
      }
    }
  },
}

方案对比 #

• 随机数方案：快速实现，但测试数据不可预测，调试困难，且仍可能存在极低概率的冲突
• 数据重置方案：最可靠，适合所有场景，但需要后端支持或数据库操作权限
• 浏览器前缀方案：无需修改后端，测试数据可预测，适合无法快速实现数据重置的场景

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