Javascript/HTML/Puppeteer - How to access the values from the attribute data-bind (to click a button)?

Question

I'm currently using Puppeteer to click a button on a page. The problem I am facing is that the selected element to click, loads the button for a certain period of time which I suppose is arbitrary to my internet connection or perhaps even additional parameters (so even if I use the method waitForSelector() , the button won't be clickable although the element is present, because it is still loading).

I could add a function waitFunc(seconds) but the script will break if the button load time is superior to the waitFunc(5) time (so it's not always going to work, unless the wait time is arbitrarily long enough but then it defies the purpose of having the script). My requirement would be to click the button as soon as it has loaded. How can we do this?

In the button's tag below, I see that there is loadingButton in data-bind . I anticipate that it could return a boolean. Nevertheless, how can I access this data with Puppeteer and create a function to click this button once loaded?

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

I've done some research on Knockout, but I don't understand it enough to manipulate this tool. I imagine that once that I manage to get the value of loadingButton , I can use a while loop to click the button once that its value changed.

I've tried const attr = await page.$eval(selectors.buyNow, el => el.map(x => x.getAttribute("data-bind"))) , but the returned value is the string "buttonText: 'ClickMe', click: clickMe, loadingButton: loading, enable: canClickMe" (literally what is in the HTML button tag attribute data-bind ).

Answer 1

So you want to click that button? How about:

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