Javascript/HTML/Puppeteer - 如何访问属性数据绑定中的值（单击按钮）？

Posted 2023-03-30

【中文标题】Javascript/HTML/Puppeteer - 如何访问属性数据绑定中的值（单击按钮）？

【英文标题】：Javascript/HTML/Puppeteer - How to access the values from the attribute data-bind (to click a button)?

【发布时间】：2021-11-10 20:49:40

【问题描述】：

我目前正在使用 Puppeteer 单击页面上的按钮。我面临的问题是，要单击的选定元素会在一段时间内加载按钮，我认为这对我的互联网连接或什至可能是附加参数是任意的（所以即使我使用方法waitForSelector()，按钮尽管元素存在，但无法点击，因为它仍在加载中）。

我可以添加一个function waitFunc(seconds)，但如果按钮加载时间优于waitFunc(5) 时间，则脚本将中断（因此它并不总是有效，除非等待时间足够长，但随后它违反了拥有脚本的目的）。我的要求是在按钮加载后立即单击它。我们该怎么做？

在下面的按钮标签中，我看到data-bind 中有loadingButton。我预计它可能会返回一个布尔值。不过，如何使用 Puppeteer 访问这些数据并创建一个函数来在加载后单击此按钮？

<
  button
    type="submit"
    data-bind="
      buttonText: 'ClickMe',
      click: clickMe,
      loadingButton: loading,
      enable: canClickMe"
    class="btn-class"
>
  Click Me!
</button>

我对 Knockout 进行了一些研究，但我对它的了解还不足以操纵这个工具。我想一旦我设法获得了loadingButton 的值，我就可以在它的值发生变化时使用while 循环单击按钮。

我试过const attr = await page.$eval(selectors.buyNow, el => el.map(x => x.getAttribute("data-bind")))，但返回值是字符串"buttonText: 'ClickMe', click: clickMe, loadingButton: loading, enable: canClickMe"（字面意思是html按钮标签属性data-bind中的内容）。

【参考方案1】：

所以你想点击那个按钮？怎么样：

let button = await page.waitForSelector(`button[data-bind*="loadingButton"]`)
await button.click()

【讨论】：

此外，我想在加载按钮时单击该按钮。我收到当前建议的超时错误：TimeoutError: waiting for selector 'button[data-bind*="loadingButton"]'。有没有办法使用loadingButton返回的值？