正在等待使用Puppeteer更改组件的ID

Question

我有一个带有分页的表组件。我在<tbody>标记上添加了一个数据属性，当单击下一个表页按钮时会发生变化(例如，data-id: table-page-one变为data-id: table-page-two。在检查行元素之前，我需要等待这个ID的机会。如果我用SLOMO=true HEADLESS=false运行它，测试就通过了，但当我正常运行它时，在单击分页后，它会给出以下错误：thrown: Exceeded timeout of 20000 ms for a test。我的代码如下所示：

if ('verify table row checkboxes are checked', async () => {
await page.click(nextTablePageSelector);
// gets stuck here
await page. waitForSelector("[data-id='table-page-two']");
// below works in SLOMO=true HEADLESS=false mode
// checking each row using $$eval
}); 

我在page.click和page.waitForSelector之间有一个自定义的延迟方法，它是有效的，但团队不想使用延迟，因为它可能会导致片状测试。

监视部分UI更改的正确方法是什么，或者更具体地说，监视已经习惯更改的属性？

Answer 1

考虑对promise进行分组并使用visible标志。

await Promise.all([
page.click(nextTablePageSelector),
page.waitForSelector('tbody[data-id=page-two]', { visible: true }),
])