Next.js应用中使用Playwright时onClick事件触发失败的解决方案咨询

问题摘要 #

我在Next.js应用的Playwright端到端测试中遇到了一个问题：按钮上绑定的onClick事件并不总是能被触发。

假设 #

我推测问题出在Playwright可能在React完成页面 hydration（水合）之前就和按钮交互了——也就是说，负责绑定onClick事件处理函数的JavaScript代码还没执行完毕。

测试代码示例 #

这里是我的其中一个测试用例：

test('Navigate from list to details', async ({ page }) => {
    await page.goto('/list');
    await expect(page.getByTestId('list-container')).toBeVisible();
    await page.getByTestId('list-item').first().locator('button').click();
    await expect(page.getByTestId('details-container')).toBeVisible();
});

当测试跳转到/list页面时，list-container是可见的（因为它是服务端渲染的），但按钮的点击操作并不总能触发对应的onClick事件。

我已经尝试过的方法 #

• 使用page.waitForLoadState('networkidle')，但这种方法并不总能生效，而且Playwright文档也不推荐这么做。
• 用page.waitForSelector()等待特定元素，但因为元素是服务端渲染的，这个方法解决不了问题。
• 用page.waitForTimeout()添加显式延迟，但同样不被推荐。

我的问题 #

有没有什么最佳实践能让Playwright等待React完成hydration之后再和元素交互？

额外上下文 #

我的Lighthouse得分很差，主要是因为“最小化主线程工作”这一项，其中“脚本评估”的开销特别大。我觉得这就是问题的关键——如果Playwright不等脚本评估完成，就可能在事件绑定到按钮之前就点击了它。

备注：内容来源于stack exchange，提问作者ZecKa