单击具有特定样式的 iframe

Question

我有一个包含大约 10 个 iframe 的页面。这些 iframe 中只有 1 个可见 ，可见 iframe 的索引在每次重新加载页面时都会发生变化。可见的 iframe 只包含 display: block 的样式，它不包含我可以用来 select 它的任何其他内容，例如名称或标题。

示例：

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

我的问题是如何在 puppeteer 中 select 具有 display: block 样式的 iframe，然后单击其中的按钮。

我试图通过获取页面上的所有 iframe 来解决这个问题，循环然后 selecting 显示样式为 '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');
    }
  });

Answer 1

如果样式非常具体，您可以轻松找到元素。无需为此遍历所有帧。

const selector = `iframe[style*="display: block"]`
const visibleIframe = document.querySelector(selector);
console.log({ visibleIframe });

单击里面的按钮可以通过多种方式完成。这是一个简单的 javascript 解决方案，

visibleIframe.contentDocument.querySelector(".button").click()

Answer 2

所以我终于解决了这个问题，感谢@Md。 Abu Taher 为我指明了正确的方向。

 try {
    const selector = `iframe[style*='display: block']`;
    await page.frames().find((frame) => frame.click(selector, { delay: 8000 }));
  } catch (error) {}

它的作用是找到页面上的所有 iframe。然后它找到并单击与上面定义的选择器匹配的 iframe，这会按住按钮 8 秒，从而绕过 StockX 验证码（或者更确切地说，像用户那样完成验证码）。

单击具有特定样式的 iframe

Click on iframe with specific style

javascript

captcha

puppeteer