使用 Puppeteer 等待组件上的 ID 更改

Posted 2023-02-19

【中文标题】使用 Puppeteer 等待组件上的 ID 更改

【英文标题】：Waiting for ID to change on component using Puppeteer

【发布时间】：2022-01-22 03:12:22

【问题描述】：

我有一个带有分页的表格组件。我在<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 变化的正确方法，或者更具体地说，观察你已经习惯改变的属性？

【问题讨论】：

考虑在某处发布测试页面。然后，社区可以更好地协助和更可预测地进行调试。

你能推荐一个环境吗？

也许是Codepen.io 的最小复制？然后，我们可以使用嵌入的 iFrame URL 直接测试生成的 html。例如：source => testable result

【参考方案1】：

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

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

【讨论】：

我实现了上面的代码。同样的问题。它以SLOMO=true HEADLESS=false 模式通过，但在其他情况下失败并出现相同的错误。

你能分享你正在测试的分页页面的 URL 吗？

很遗憾，我不能。这只是一个 MUI 4 表。

我通过开发工具中的元素选项卡确认，当点击下一页按钮时，我添加到 tbody 标签的 id 属性成功更改。