Playwright测试中setTimeout失效且toBeVisible超时问题排查

问题现象 #

在Playwright自动化测试中出现以下异常：

1. 手动编写的超时语句await new Promise(f => setTimeout(f, 3000));未按预期等待，直接被跳过
2. 执行await expect(page1.getByRole('button', { name: 'Add calendar' })).toBeVisible({timeout: 8000});时，即使设置了8000ms的超时，仍抛出Error: timed out 3000ms waiting for expect(locator).tobevisible()错误

相关代码示例 #

const page1Promise = page.waitForEvent('popup');
await page.getByRole('button', { name: 'View calendar' }).click();
const page1 = await page1Promise;
//await new Promise(f => setTimeout(f, 3000)); 
await expect(page1.getByRole('button', { name: 'Add calendar' })).toBeVisible({timeout: 8000});
// await expect(page1.locator('div').filter({ hasText: /^Add calendar$/ })).toHaveText(/^Add    calendar$/,{timeout: 2000});
await page1.screenshot({path: 'View Calendar'+Date.now()+'.png', fullPage: true }); 

排查方向 #

• 检查全局超时配置：查看playwright.config.ts中的timeout、expect.timeout参数，若全局超时被设置为3000ms，会覆盖断言的自定义超时，同时可能导致手动setTimeout因全局超时触发而被中断
• 替换手动超时为Playwright原生方法：用await page1.waitForTimeout(3000)替代await new Promise(f => setTimeout(f, 3000))，Playwright原生等待方法会和页面上下文绑定，执行更可靠
• 验证弹窗页面加载状态：在获取弹窗后，先执行await page1.waitForLoadState('networkidle')或await page1.waitForLoadState('domcontentloaded')，确保弹窗页面完全加载后再执行后续操作
• 检查弹窗页面的JS错误：添加page1.on('pageerror', error => console.error('弹窗页面报错:', error))监听页面错误，排查是否有脚本异常中断执行流程
• 确认定位器有效性：执行console.log(await page1.getByRole('button', { name: 'Add calendar' }).count())查看匹配到的元素数量，若为0则说明定位器不准确，需调整定位逻辑
• 排查并发测试干扰：单独运行该测试用例，排除多测试并发执行时的上下文冲突问题

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