Playwright click()函数测试超时失效，界面手动点击正常求助

问题场景 #

页面中的TableRow组件手动点击可正常跳转，测试代码中能通过toBeVisible()断言确认元素可见，但调用click()时触发30秒超时错误，定位器可正常找到元素。

组件代码 #

<TableRow
    key={i}
    whenClick={() => this.handleClickRow(el.id)}
    data-testId = {'warehousesRow'+`${i}`}
>

测试代码 #

test('warehouses table rows clickable', async ({
    page,
    baseURL,
}) => {
    await page.goto(baseURL as string)
    await checkKeyClock(page)
    await expect(page.url()).toContain(baseURL)
    await page.goto(baseURL as string + '/warehouses')
    const tableRow = page.locator('data-testid="warehousesRow1"')
    try {
            await tableRow.click();
    } catch (error) {
            console.error('Ошибка при клике на ряд таблицы:', error);
    }
    await expect(page.url()).toContain('view?id');
})

错误日志 #

steps: [],
complete: [Function: complete],
endWallTime: 1713781681655,
error: {
  message: 'Error: locator.click: Test timeout of 30000ms exceeded.\n' +
    'Call log:\n' +
    `  \x1B[2m- waiting for locator('data-testid="warehousesRow1"')\x1B[22m\n`,
  stack: 'Error: locator.click: Test timeout of 30000ms exceeded.\n' +
    'Call log:\n' +
    `  \x1B[2m- waiting for locator('data-testid="warehousesRow1"')\x1B[22m\n` +
    '\n' +
    '    at /Users/anproskuryakova/frontend projects/ewms-ui/playwright/warehouses/wh-table.test.ts:32:21'
}

解决办法 #

1. 强制点击跳过可交互检查 #

Playwright的click()默认会等待元素处于可交互状态（无遮挡、绑定事件等），如果元素被透明层或布局元素遮挡，可强制点击：

await tableRow.click({ force: true });

2. 等待元素完全可交互 #

元素可见不代表可交互，需等待元素处于enabled状态：

// 先等元素可见，再等可交互
await tableRow.waitFor({ state: 'visible' });
await tableRow.waitFor({ state: 'enabled' });
await tableRow.click();

也可以直接在定位时指定等待状态：

const tableRow = page.locator('data-testid="warehousesRow1"').waitFor({ state: 'enabled' });
await tableRow.click();

3. 指定点击位置 #

如果元素的点击区域有特殊处理（比如只有部分区域可点击），可以指定点击坐标：

// 点击元素左上角10x10的位置
await tableRow.click({ position: { x: 10, y: 10 } });

4. 模拟真实交互流程 #

先hover元素再点击，模拟用户操作：

await tableRow.hover();
await tableRow.click();

或者直接触发点击事件，绕过Playwright的可交互检查：

await tableRow.dispatchEvent('click');

5. 等待页面完全稳定 #

跳转页面后，可能存在网络请求未完成或动画未结束的情况，可等待网络空闲：

await page.goto(baseURL as string + '/warehouses');
// 等待网络空闲（500ms内无请求）
await page.waitForLoadState('networkidle');
const tableRow = page.locator('data-testid="warehousesRow1"');
await tableRow.click();

6. 检查登录流程是否完成 #

checkKeyClock(page)可能未完全完成登录状态初始化，导致后续页面的事件绑定异常，可增加登录完成的断言：

await checkKeyClock(page);
// 断言用户已登录，比如检查页面上的用户头像或用户名元素
await expect(page.locator('[data-testid="user-avatar"]')).toBeVisible();

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