javascript - Puppeteer - 为什么元素不反映 DOM 变化？

Question

我有一个在元素范围内等待选择器的函数。我传入的 ElementHandle 似乎没有随着 DOM 更新而更新 - 每次我的 waitForFunction 调用失败时，我都会记录此元素的 outerHTML，并且不存在更改。

async function waitForSubElSelector(page, el, subElSelector) {
  // offset/rects checks for visible check (from https://stackoverflow.com/a/33456469)
  await page.waitForFunction((selector, scopeEl) => {
      const subEl = scopeEl.querySelector(selector)
      let found = !!(subEl && (subEl.offsetWidth || subEl.offsetHeight || subEl.getClientRects().length));
      if (!found) {
        console.log(`waitForSubElSelector failed EL: ${scopeEl.outerHTML}  SELECTOR: "${selector}", ${!subEl ? 'not found' : subEl.offsetWidth + ', ' + subEl.offsetHeight + ', ' + subEl.getClientRects().length}`)
      }
      return found;
    }, {}, subElSelector, el
  ).catch(e => {
    console.log(`waitForSubElSelector failed w/ selector '${subElSelector}'`)
    throw e;
  })
  return await el.$(subElSelector);
}

我还在浏览器控制台中验证了这一点 - 我能够找到元素，然后从那里找到选择器。

一个用例是等待下一步按钮可用，例如：

await waitForSubElSelector(this.browserPage, pageEl, '#nextButton:not([disabled])')

我怎样才能得到这个工作？

我有一个想法——也许我的 web 框架替换了 DOM 的一部分，所以我拥有的 ElementHandle 不是当前的；Puppeteer 中有一些“in-DOM”检查吗？

标签： javascriptpuppeteer