Playwright未等待元素可见求助：Svelte应用测试超时问题

我尝试用Playwright为Svelte应用编写基础测试：应用启动后先显示约2秒的加载界面，之后展示带数据表格的主内容，需要验证表格是否存在。

我用waitFor()方法尝试跳过加载界面，但无论在Playwright配置里设置多大的超时值（甚至100000ms），测试总是在约2秒后就超时报错，提示“超出100000ms超时限制”；试过page.slow()选项，依然提示超出300000ms限制。

测试代码 #

test('The table is present after the loading screen disappears', async ({page}) => {
    await page.goto('localhost:3000');
    const tbl = await page.locator('table');
    await tbl.waitFor();
    await expect(tbl.count()).toBeGreaterThan(0);
});

Playwright配置（playwright.config.ts） #

export default defineConfig({
  testDir: './e2e',
  /* Maximum time one test can run for. */
  timeout: 100 * 1000,
  expect: {
    /**
     * Maximum time expect() should wait for the condition to be met.
     * For example in `await expect(locator).toHaveText();`
     */
    timeout: 500000000
  },
});

报错信息 #

测试超时，提示“Timeout 100000ms exceeded”，具体为等待locator('table')元素出现时超时。

解决方案 #

1. 优化page.goto的等待策略
   默认page.goto仅等待load事件完成，但加载界面可能在load后仍存在。可以设置等待网络空闲或DOM加载完成：

await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });

2. 先等待加载界面消失
   如果加载界面有专属选择器（比如.loading-container），先等待它隐藏后再检测表格：

await page.goto('http://localhost:3000');
// 等待加载元素隐藏
await page.locator('.loading-container').waitFor({ state: 'hidden' });
// 再验证表格存在
await expect(page.locator('table')).toBeVisible();

3. 用expect断言替代单独的waitFor
   Playwright的expect自带等待机制，无需额外调用waitFor()，直接断言更简洁且能自动等待元素满足条件：

test('The table is present after the loading screen disappears', async ({page}) => {
    await page.goto('http://localhost:3000', { waitUntil: 'networkidle' });
    await expect(page.locator('table')).toBeVisible();
});

4. 检查选择器与元素状态

• 确认表格选择器是否正确，避免因嵌套、shadow DOM导致定位失败；
• 若表格存在但不可见，可改用toBeAttached()断言元素是否在DOM中：

  await expect(page.locator('table')).toBeAttached();
  

5. 排查超时配置冲突
   检查测试代码是否单独设置了超时（比如test('...', { timeout: 2000 }, async () => {...})），这种局部配置会覆盖全局的timeout设置，需移除或调整。

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