尝试使用 puppeteer 单击 iframe 中的按钮答案

【问题标题】：Trying to click a button within an iframe with puppeteer尝试使用 puppeteer 单击 iframe 中的按钮
【发布时间】：2020-01-03 01:36:36
【问题描述】：

这是我第一次使用 puppeteer 进行一些轻型自动化。我在尝试单击 iframe 中的按钮时遇到问题。

这是我的代码：

await page.waitForSelector('iframe');
        const frameElement = await page.$(
            'iframe[src="https://ibx.key.com/ibxolb/login/client/index.html"]',
        );
        const frame = await frameElement.getFrame();

getFrame() 错误，因为 frameElement 作为 JSHandle@node 返回。

我可以访问的 iframe 选择器是 src 和 title。如您所见，我使用的是src。

我已经搜索并搜索了如何执行此操作，但似乎没有一个示例适合我。

我被困住了，所以如果有人有任何建议、解决方案或方向，我将不胜感激。

谢谢，

乔

【问题讨论】：

标签： javascript puppeteer

【解决方案1】：

如果您从 *.key.com 或 *.keybank.com 旁边的 URL / 站点访问 iframe，则由于 CSP 指令，您无法打开 iframe。

打开 chrome 开发者控制台，如果你能看到这条消息，那是因为 CSP 指令不允许你访问 iframe 站点 URL。

拒绝在框架中显示“https://ibx.key.com/ibxolb/login/client/index.html”，因为祖先违反了以下内容安全策略指令：“frame-ancestors *.key.com *.keybank.com”。

如果您没有看到上述任何消息，您可以这样尝试

const frame = page.frames().find(frame => frame.url() === 'https://ibx.key.com/ibxolb/login/client/index.html');

const clickLogin = await frame.click('.login-button-space')

【讨论】：

【解决方案2】：

我能够解决我的问题。

首先我得到了页面上列出的所有框架，如下所示：

var frames = (await page.frames());

然后我最终在帧中循环寻找特定的标题。

exports.getFrame = async function(frames, ssoFrameTitle) {
let selectedFrame;
for(let i = 0 ; i < frames.length ; ++i) {
    let frameTitle = await frames[i].title();
    if(frameTitle === ssoFrameTitle) {
        selectedFrame = frames[i];
        break;
    }
}
return selectedFrame;};

找到框架对象后，我从函数中返回它以定位并单击按钮。

【讨论】：