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

Question

This is my first time using puppeteer for some light automation. I am running into an issues trying to click a button that is located within an iframe.

Here is my code:

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

The getFrame() errors because the frameElement is return as a JSHandle@node .

The selectors I have access to for the iframe are src and title . As you can see I am using src .

I have searched and searched for how to do this but none of the examples seem to work for me.

I am stuck so if anyone has any advice, solution, or direction I would appreciate it.

Thank you,

Joe

Answer 1

If you're accessing the iframe from URL / sites beside *.key.com or *.keybank.com , then you can't open the iframe because of CSP directive.

Open chrome developer console and if you can see this message, then it's because CSP directive not allowing you to access the iframe site URL.

Refused to display ' https://ibx.key.com/ibxolb/login/client/index.html ' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors *.key.com *.keybank.com".

And if you're not seeing any message like above, you can try like this

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

Answer 2

I was able to solve my issue.

First I got all of the frames listed on the page like so:

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

Then I ended up looping through the frames looking for a specific title .

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

Once I locate the frame object I returned it from the function to locate and click the button.