如何为Playwright单个测试设置slowMo慢执行模式

1. 给单个测试/测试组设置专属slowMo #

Playwright支持在特定测试或测试块中单独配置slowMo，不会影响全局测试。你可以通过test.use()覆盖全局配置，只对当前测试生效：

test('测试标签页切换和表格数据', async ({ page }) => {
  // 仅当前测试启用500ms慢动作
  await test.use({
    launchOptions: { slowMo: 500 },
  });

  // 你的测试步骤：点击标签页、操作表格等
  await page.click('#tab-2');
  // 后续操作...
});

如果是一组测试需要慢动作，用test.describe包裹即可：

test.describe('需要慢执行的测试组', () => {
  test.use({ launchOptions: { slowMo: 500 } });

  test('测试标签页切换', async ({ page }) => {
    // 测试步骤
  });

  test('测试表格编辑', async ({ page }) => {
    // 测试步骤
  });
});

2. 自定义慢动作操作函数 #

如果只需要针对单个操作步骤减慢速度（比如点击更新按钮前），可以写个简单的包装函数，替代直接调用Playwright的操作方法：

// 自定义慢动作点击函数
async function slowClick(element: Locator, delayMs: number = 300) {
  // 先等元素就绪（比硬delay更可靠）
  await element.waitFor({ state: 'visible' });
  // 短暂延迟后执行点击
  await new Promise(resolve => setTimeout(resolve, delayMs));
  await element.click();
}

// 测试中使用
test('测试表格行编辑', async ({ page }) => {
  await page.click('#table-row-1');
  // 用自定义慢点击替代直接click
  await slowClick(page.getByRole('button', { name: '更新' }));
  // 后续操作...
});

3. 等待页面状态变化（推荐，避免硬delay） #

虽然你提到数据不固定，但可以通过等待页面状态或元素变化解决竞态问题，比强行减慢速度更可靠：

• 等待新标签页的aria-selected状态变为true
• 等待旧表格隐藏、新表格显示
• 等待网络请求完成（如果数据加载有接口请求）

示例代码：

test('测试标签页切换', async ({ page }) => {
  await page.click('#tab-2');
  // 等待新标签页激活
  await page.locator('#tab-2').waitFor({ state: 'visible' });
  // 等待旧表格隐藏
  await page.locator('#tab-1-table').waitFor({ state: 'hidden' });
  // 等待新表格加载完成（比如等表格内至少有一行数据）
  await page.locator('#tab-2-table tr').first().waitFor({ state: 'visible' });
  
  // 此时再读取新表格数据
  const data = await page.locator('#tab-2-table td').allTextContents();
});

针对你提到的“点击表格行后更新按钮点击过快”问题，可等待表单容器出现后再操作：

test('测试表单打开', async ({ page }) => {
  await page.click('#table-row-1');
  // 等待表单容器加载完成
  await page.locator('#update-form').waitFor({ state: 'visible' });
  await page.getByRole('button', { name: '更新' }).click();
});

为什么之前的browser.browserType().launch({slowMo:500})无效？ #

slowMo是在browser context级别配置的，直接在launch时设置不会生效，正确做法是创建context时配置：

// 自定义带slowMo的fixture
const testWithSlowMo = test.extend<{ slowPage: Page }>({
  slowPage: async ({ browser }, use) => {
    const context = await browser.newContext({ slowMo: 500 });
    const page = await context.newPage();
    await use(page);
    await context.close();
  },
});

// 使用这个fixture的测试会自动启用慢动作
testWithSlowMo('慢动作测试', async ({ slowPage }) => {
  // 测试步骤
});

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