Flood Element - get an ElementHandle inside an iframe

Question

My document looks something like this:

<html>
    <body>
        Hello

        <iframe ...>
            <input name='cardNumber'>
        </iframe>
    </body
</html>

I would like to be able to set the input value programmatically. Doing a simple browser.findElement(By.css("input")) doesn't work, because the browser blocks it because of the same-origin policy (see the question here for details SecurityError: Blocked a frame with origin from accessing a cross-origin frame)

Therefore I am trying some magic, but I can't make it to work:

const ccIframe = browser
    .page
    .frames()
    .find(async frame => {
        return await frame.title() === "Secure card number input frame"
    }) as Frame;

But now ccIframe is of type Frame which does not have findElement or sendKeys methods. I tried using ccIframe.press instead, but it does not set the value on my form input:

await ccIframe.press("input[name='cardnumber']", "4")

Any ideas how to achieve this?

score 0 · Answer 1 · answered Apr 15 '21 at 13:11

Turned out that there is some buggy behaviour in selecting a frame like this:

const ccIframe = browser
    .page
    .frames()
    .find(async frame => {
        return await frame.title() === "Secure card number input frame"
    }) as Frame;

Changed the comparison to use frame.url() instead, which is sync and it fixed frame selection issue.

Now I type into the input element like this:

var ccNumber = await ccIframe.$("input[name='cardnumber']")
await ccNumber?.type("4242424242424242", { delay: 40 })

Works like charm!

Flood Element - get an ElementHandle inside an iframe

1 Answers1