I have a page with about 10 iframes. Only 1 of these iframes are visible and the index of the visible iframe changes every page reload. The visible iframe only contains a style of display: block, it doesn't contain anything else that I can use to select it like a name or title.
Example:
<div class="container">
<iframe style="display: none; width: 310px; height: 100px; border: 0px;
user-select: none;">
<html>
<body>
<div class="button"/>
</body>
</html>
</iframe> <--- not visible
<iframe style="display: block; width: 310px; height: 100px; border: 0px;
user-select: none;">
<html>
<body>
<div class="button"/> // need to click this!
</body>
</html>
</iframe> <--- visible :)
</div>
My question is how can I select the iframe with the display: block style in puppeteer and then click the button inside it.
I've tried to solve this by getting all the iframes on a page, looping over then and selecting the one with a display style of 'block':
// select all iframes
const Frames = await page.frames();
// loop over iframes and check if iframe display is block or none.
Frames.forEach(async (item, i) => {
const frame = await item.contentFrame();
const showingIframe = await page.evaluate(
() => window.getComputedStyle(frame.querySelector('iframe')).display
);
if (showingIframe === 'block') {
console.log('showing');
// click button
} else {
console.log('not showing');
}
});
You can easily find an element if the styling is very specific. No need to go through all frames for that.
const selector = `iframe[style*="display: block"]`
const visibleIframe = document.querySelector(selector);
console.log({ visibleIframe });
Clicking a button inside that can be done in a lot of ways. Here is a plain javascript solution,
visibleIframe.contentDocument.querySelector(".button").click()
So I've finally solved this, thank you to @Md. Abu Taher for pointing me in the right direction.
try {
const selector = `iframe[style*='display: block']`;
await page.frames().find((frame) => frame.click(selector, { delay: 8000 }));
} catch (error) {}
What this does it it finds all the iframes on the page. It then finds and clicks on the iframe that matches the selector defined above, this holds down the button for 8 seconds which bypasses StockX captcha (or rather completes it as a user would).