傀儡师等待列表出现

Question

我正在开发的网站有一个按钮。

当我使用 puppeteer 单击按钮时，它会在

ul

元素上再创建 10 个列表。

网站第一次在

ul

元素上已经有 10 个列表，每当单击该按钮时，就会有另外 10 个列表添加到

ul

。

所以问题来了

使用 puppeteer 单击按钮后，如何等待

ul

元素上出现另外 10 个列表？

前）

第一状态

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

我想在点击按钮后捕捉这一刻

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

我也尝试过以下方法，但不起作用。

 await Promise.all([
        page.click('button#fetch-next-page'),
        page.waitFor('*'),
        // page.waitForSelector('div.loop-item', { hidden: true }),
      ])

Answer 1

 await Promise.all([
        page.click('button#fetch-next-page'),
        page.waitForFunction(
          prevLength => {
            const curLength = document.querySelectorAll('div.loop-item').length
            console.log(curLength)
            return curLength !== prevLength
          },
          {},
          prevLength,
        ),
      ])

保留之前的列表长度并将其传递给 page.waitForFunction 的参数按我的预期工作

非常感谢@ggorlen