Puppeteer如何读取data-bind属性值实现按钮加载完成后自动点击

核心原因说明 #

你之前读取data-bind属性只能拿到静态绑定声明，拿不到运行时的值，是因为Knockout的绑定值存在元素关联的视图模型上下文里，不会同步写到HTML属性中。

实现方案 #

方案1：直接读取Knockout运行时状态（准确性最高） #

通过Puppeteer的waitForFunction轮询按钮的Knockout上下文，判断loading状态是否为false，满足条件后立即执行点击，无需硬等待固定时长：

// 自定义超时时间可根据业务调整，单位为毫秒
await page.waitForFunction((btnSelector) => {
  const targetBtn = document.querySelector(btnSelector);
  // 按钮未加载完成时返回false继续轮询
  if (!targetBtn || !window.ko) return false;
  // 获取按钮绑定的Knockout上下文
  const viewModel = window.ko.contextFor(targetBtn)?.$data;
  // loadingButton绑定的变量为loading，判断是否结束加载
  return viewModel && !viewModel.loading;
}, { timeout: 30000 }, selectors.buyNow);

// 状态满足后直接点击
await page.click(selectors.buyNow);

方案2：通过disabled属性判断（无需感知Knockout逻辑，更简单） #

你提供的按钮data-bind里存在enable: canClickMe配置，Knockout的enable绑定会自动给不可点击的按钮添加disabled属性，可直接等待按钮不存在disabled属性后点击：

await page.waitForSelector(`${selectors.buyNow}:not(:disabled)`, {
  timeout: 30000
});
await page.click(selectors.buyNow);

两种方案都会在按钮满足点击条件后立即执行操作，兼顾执行效率和稳定性。

内容的提问来源于stack exchange，提问作者userX