如何调试Playwright分页表格中的“幽灵”行元素？

问题描述 #

我使用Playwright基础定位器定位分页表格的行：

page.locator('.some-table tbody tr');

测试每页100行的表格时，第一页执行以下代码可正常通过：

const rows = page.locator('.some-table tbody tr');
expect(await rows.count(), '# of rows').toEqual(100);

但点击分页按钮跳转到第2页后，相同测试失败，检测到共101行。

已通过浏览器控制台$$('.some-table tbody tr').length确认两页实际均为100行。遍历第一页所有行内容正常，但遍历第二页时：

const rows = await page.locator('.some-table tbody tr').all();
for (const row of rows) {
    console.log('\n', await row.textContent(), i);
}

前100行内容可正常打印，但获取第101条“幽灵”行的textContent时测试超时；尝试打印innerHtml也会触发以下超时错误：

Test timeout of 30000ms exceeded.
Error: locator.innerHTML: Test timeout of 30000ms exceeded.

解决办法 #

1. 过滤可见元素 #

分页切换时，前端可能仅隐藏旧页行而非从DOM移除，Playwright默认会匹配所有DOM元素（包括隐藏元素）。给定位器添加可见性过滤：

const rows = page.locator('.some-table tbody tr:visible');
expect(await rows.count(), '# of rows').toEqual(100);

或用Playwright的filter方法精确筛选：

const rows = page.locator('.some-table tbody tr')
  .filter({ visible: true })
  .filter({ hasText: /.+/ }); // 确保行有实际内容

2. 添加显式等待 #

点击分页按钮后，需等待页面完成切换，避免捕捉到过渡状态的DOM：

• 等待分页按钮激活状态切换：

await page.click('#page-2-btn');
await page.locator('#page-2-btn.active').waitFor();

• 等待旧页内容消失：

await page.click('#page-2-btn');
// 替换为第一页的唯一标识内容
await page.locator('.some-table tbody tr:text("第一页唯一内容")').waitFor({ state: 'hidden' });

3. 缩小定位范围 #

若页面存在多个同类表格，需精准定位目标表格：

// 给目标表格添加唯一标识（如id），再定位其内部行
const targetTable = page.locator('#target-some-table');
const rows = targetTable.locator('tbody tr:visible');

4. 强制刷新DOM查询 #

避免定位器缓存问题，重新查询元素计数：

await page.click('#page-2-btn');
// 优先用显式等待，此处为兜底方案
await page.waitForTimeout(1000);
const rowCount = await page.locator('.some-table tbody tr:visible').count();
expect(rowCount, '# of rows').toEqual(100);

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