I've been using puppeteer a lot lately and have been able to click other buttons, traverse through the DOM, etc with no problem.
However, I ran into one specific button that I haven't been able to click or interact with for some reason. Puppeteer can't even find it when I use waitForSelector. I can see the button visually on the page and I monitor the network requests so I know that it's not waiting for the network.
It's not in an iframe, and I checked to see if there was any shadow-dom component to this and I didn't see anything.
Here is the button:
<button data-bind="click: handleBulkDownload, visible: showDownloadAll(),
attr: { 'data-ga-click': gaTabName + 'Download All Attachments',
'data-ga-tab': gaTabName }" type="button" class="btn btn-default btn-sm" style="font-size: 12px;" title="Videos cannot be downloaded at this time." data-ga-click="Download All Attachments" data-ga-tab="">
<img data-bind="visible: isBulkDownloading" src="/images/Common/spinner.gif" alt="Downloading" style="display: none;">
Download All <span data-bind="text: downloadAllText">(18)</span>
</button>
Do you see anything weird with this or have any ideas on what to check for? Also I would settle for triggering the download action that is tied to this button, but I haven't had much success with that either.
Thanks!
I ended up needing to navigate further down the DOM to a parent element that didn't have so much stuff in it. Then, I waited for a button to populate within that specific parent div:
await myPageSection.waitForSelector('button', { timeout: 15000 }).catch(() => {
console.log('No buttons found within pageSections[3] after waiting.');
});
And finally, I ran through all the buttons to find the one I needed. I think classes and innerText were dynamically changing, which is part of the reason why I couldn't target it:
const allButtons = await myPageSection.$$('button')