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?
Turned out that there is some buggy behaviour in selecting a frame like this:
Changed the comparison to use
frame.url()instead, which issyncand it fixed frame selection issue.Now I type into the input element like this:
Works like charm!