javascript - Trying to click a button within an iframe with puppeteer

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