Click on iframe with specific style

Question

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');
    }
  });

Do you happen to have a link to the site you're working with? I don't have a complete answer yet, but there are two big problems in the meantime: (1) you can't access Node variables lke `frame` inside an `evaluate` callback, which [runs in the browser](https://stackoverflow.com/questions/46088351/how-can-i-pass-variable-into-an-evaluate-function). (2) See [Using async/await with a forEach loop](https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop) — ggorlen, Aug 10 '21 at 19:28
I'm working with stockX captcha. I can't give a link to the url as it randomly shows up when navigating between pages. — user, Aug 10 '21 at 19:52

score 2 · Answer 1 · answered Aug 11 '21 at 08:30

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()

user · Accepted Answer · 2021-08-11T17:17:34.683

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).

Click on iframe with specific style

2 Answers2