flood-io / element

💦Load test your app using real web browsers
https://element.flood.io
Apache License 2.0
354 stars 43 forks source link

No way to access Iframe due to CORS issue #610

Open steveb85 opened 1 year ago

steveb85 commented 1 year ago

Describe the bug any request to an iframe, even after the wait(Until.ableToSwitchToFrame is met with a cors issue.

To Reproduce find right iframe, then switchTo().frame(id) have tried all the behaviors with launch args etc,

launchArgs: ['--disable-web-security --cors-exempt-headers'], PersistentContext:['--user-data-dir=/#datahere###/'],

access iframe

Additional context tried every available fix I can find and multiple browsers, and browser extensions.

RESULT ALWAYS

page.evaluate: DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.

on the webpage with --no-headless it all appears to work correctly but can't access the iframe to input data.

ian-ames commented 1 year ago

The launchArgs object expects an array, each key should be in single quotes like ['--disable-web-security', '--cors-exempt-headers'].

I was having the same issue when trying to test against hosted credit card fields, and was able to enter the iframe with the launchArgs: ['--cors-exempt-headers'] as a TestSettings parameter.

steveb85 commented 1 year ago

thanks @ian-ames helpful, I couldn't find exact documentation anywhere! incidentally, the incognito: false still seems to do nothing for me.

I've run with your suggestion but I'm still not there. Code below.

const framed = await browser.page.frames() console.log(JSON.stringify(framed)) await browser.wait(Until.ableToSwitchToFrame(((framed[1]._guid).split('@'))[1])) console.log('ready') await browser.switchTo().frame(((framed[1]._guid).split('@'))[1])

the result is it logs our "ready" suggesting it's finding the frame, and able to switch but on the switch I'm getting "page.evaluate: Error: No frame found with id=431da8f15d3e8eebf6fe594e7d8500c1"

from my discover frames I found that I was getting a json with results like [{"_type":"Frame","_guid":"frame@a22b0d93d8d7783e7215176bf593e1e8"},{"_type":"Frame","_guid":"frame@431da8f15d3e8eebf6fe594e7d8500c1"},{"_type":"Frame","_guid":"frame@2217b48d183242652e91d0610d410cc7"},{"_type":"Frame","_guid":"frame@93a1756a4902703c3db4f25e9d6b90c8"},{"_type":"Frame","_guid":"frame@a4c477ead61ded7b21948d9e4fc8830c"},{"_type":"Frame","_guid":"frame@9002453565099891231d56ffb6104714"},{"_type":"Frame","_guid":"frame@0d7f908fc76da7e6d43d0c1b0c9dbd46"},{"_type":"Frame","_guid":"frame@98f908eaaa20be6a44d438ea3644a62f"},{"_type":"Frame","_guid":"frame@337ce49c5732cd5c827c6c06b207dc65"}]

which is why I did the split at @ to reduce the id, I"m not sure, but I've been experimenting with all combinations and can't seem to unlock this!

I also tried

const d = await browser.findElement(By.xpath(//*[@id="field-wrapper-name"]/iframe)) await browser.wait(Until.ableToSwitchToFrame(d)) console.log('ready') await browser.switchTo().frame(d)

which timed out BEFORE the ready was logged. if helpful.

As you were, I'm trying to fill in CC details in frames.,

thanks!

ian-ames commented 1 year ago

I skipped trying to browser.wait(Until.ableToSwitchToFrame()), it would timeout and fail for me. I'm not using a json file to define the frames, I'm targeting specific elements and using the element name trait to find both the iframe and the input field.

Minus the console.log() messages below is the structure I was using to find the iframe and input fields:

const ccNameIframeXpath = By.xpath('//iframe[@name="hosted-field-cardholderName"]')
const ccNameIframe = await browser.findElement(ccNameIframeXpath)
await browser.switchTo().frame(ccNameIframe)
const ccNameInputXpath = By.xpath('//input[@name="cardholder-name"]')
const ccNameInput = await browser.findElement(ccNameInputXpath)
await ccNameInput.type(`${firstName} ${lastName}`)
await browser.switchTo().defaultContent()

With the above code and launchArgs: ['--cors-exempt-headers'] I'm able to successfully find the elements, enter text and proceed with a valid checkout.

Hope this helps.

steveb85 commented 1 year ago

thanks @ian-ames appreciate it.

It seems there is no longer a cors issue, and the timeout was about the ableToSwitchToFrame() Now, (according to logs) it's switching frame, however, it's timing out trying to find the input field, I've tried by attr, xpath and anything I can. Thanks for your help though, I'll chip away again!

cheers!