typescript - 我没有在 UI 中等待数据加载到下拉列表中的 puppeteer 上获得正确的脚本

Question

我正在使用长时间等待页面延迟（8000）只是为了确保加载下拉框中的所有数据。我认为必须有一种方法可以等到下拉框中的所有数据都加载完毕，然后自动化进入下一步。

我尝试对选择器使用验证，但我们无法验证从查询填充的动态数据也尝试使用 await page.delay(n) 但这不是正确的方法，因为有时运行查询可能需要一些时间。

page.click(selectors.xxx.nnn)
    await delay (1000)
    page.keyboard.type('abc')
    await delay(8000)
    page.keyboard.press('ArrowDown')
    page.keyboard.press('ArrowDown')
    page.keyboard.press('Enter')

await page.waitFor(selectors.xxx.nnn)
    page.click(selectors.xxx.nnn)
    await page.waitFor(selectors.xxx.abc)

所以使用延迟可以是一个解决方案，但不是一个合适的解决方案。如果有一种方法可以让 puppeteer 中的浏览器自动化等待，而不是选择器，而是来自后端的数据。确保填充下拉列表中的所有预期列表并且可以选择会很好。

标签： typescriptautomationjestjsui-automationpuppeteer

Answer 1

您可以使用page.waitForFunction等待特定函数返回 true。在您的情况下，您可以计算下拉框的选项。我假设“下拉框”是一个简单的<select>...</select>HTML 元素。

代码示例

await page.waitForFunction(() => document.querySelector('#id-of-selectbox').length > 0);

由于length选择框上的属性返回里面的选项数量，所以这段代码将等到选择框内至少有一个选项，然后再继续。