element

element copied to clipboard

Describe the bug When attempting to switch context to an iframe that contains some form fields i'm recieving the folllowing error

+66s info: ===> Step 'Test: User enters credit card information'
+66s info: ---> wait()
+66s info: ---> wait()
step error -> failed
+66s error:


Error: Could not match frame by name or id: 'easyXDM_default4069_provider'


Detail:
Documentation needed! Please report this at https://github.com/flood-io/element/issues so that we can improve Element!

+66s error: xxxx Step 'Test: User enters credit card information' failed
+66s info: ---> Step 'Test: User enters credit card information' finished
failed, bailing out of steps
+66s info: Iteration completed in 64858ms (walltime)
+66s info: Test completed after 1 iterations

To Reproduce Steps to reproduce the behavior:

1. Go to 'https://www.blinds.com' and simply search for a product add to cart and get all the way to credit card checkout screen where you enter in your information

Expected behavior I'm expected to be able to enter credit card details into the iframe presented in the page

Desktop (please complete the following information):

• OS: macOS
• Node.js version: 14.4
• Version: 1.2.3

code

		await browser.wait(Until.urlContains('Ordering/Checkout/Billing'))
		let iframe = await browser.findElement(By.tagName('iframe'))
		await browser.switchTo().frame(iframe)

Hi @TraGicCode,

I'm trying to reproduce this issue but got "Access Denied" when visiting https://www.blinds.com/

Hi @TraGicCode,

I'm trying to reproduce this issue but got "Access Denied" when visiting https://www.blinds.com/

That is going to be the WAF that is blocking you! Maybe you could try this again simply look at the iframe or mimic it locally to see if you can reproduce the issue. If your trying to run from the homepage all the way to checkout the WAF will most likely pick you up as a bot and block you.

Hey @HieuLeKMS

Were you able to find out anything on this?

Hey @HieuLeKMS

Were you able to find out anything on this?

Yeah, this seems to be a bug from Puppeteer v2.1.1. As Puppeteer's docs mentioned, frame.name() should return the frame's id if its name is empty. But actually it return an empty string even if the frame's id exists.

So the frame cannot be found when Element trying to find it by id, like: frames.find(frame => frame.name() === id)

I'm fixing this, but it currently work if you pass in the frame's id instead of the frame itself:

await browser.wait(Until.urlContains('Ordering/Checkout/Billing'))
let iframe = await browser.findElement(By.tagName('iframe'))
await browser.switchTo().frame(await iframe.getId())

Hey @HieuLeKMS Were you able to find out anything on this?

Yeah, this seems to be a bug from Puppeteer v2.1.1. As Puppeteer's docs mentioned, frame.name() should return the frame's id if its name is empty. But actually it return an empty string even if the frame's id exists.

So the frame cannot be found when Element trying to find it by id, like: frames.find(frame => frame.name() === id)

I'm fixing this, but it currently work if you pass in the frame's id instead of the frame itself:

await browser.wait(Until.urlContains('Ordering/Checkout/Billing'))
let iframe = await browser.findElement(By.tagName('iframe'))
await browser.switchTo().frame(await iframe.getId())

Hey @HieuLeKMS ,

I will give this a shot and confirm the results back with you. Thanks for the hard work.

Hey @HieuLeKMS ,

That worked but no i'm stuck on this error due to browser security being enabled.

step error -> failed
+66s error:


Error: Evaluation failed: DOMException: Blocked a frame with origin "https://XXX.com" from accessing a cross-origin frame.
    at __puppeteer_evaluation_script__:2:85
    at Array.find (<anonymous>)
    at __puppeteer_evaluation_script__:2:65

It looks like there is already a github issue for this problem ( #158 ) . Do you know if #158 is resolved yet?

Hey @HieuLeKMS ,

That worked but no i'm stuck on this error due to browser security being enabled.

step error -> failed
+66s error:


Error: Evaluation failed: DOMException: Blocked a frame with origin "https://XXX.com" from accessing a cross-origin frame.
    at __puppeteer_evaluation_script__:2:85
    at Array.find (<anonymous>)
    at __puppeteer_evaluation_script__:2:65

It looks like there is already a github issue for this problem ( #158 ) . Do you know if #158 is resolved yet?

#158 has not been resolved yet, so I'll take it over. Unfortunately, looks like there's no workaround for this

Thanks for the hep @HieuLeKMS

Thanks for the hep @HieuLeKMS

No problem. I'll try to get the fix for this & #158 on Element beta soon

Hey @HieuLeKMS ,

once the fix is in beta can you ping me back here and let me know how to use the beta version?

Hey @HieuLeKMS ,

once the fix is in beta can you ping me back here and let me know how to use the beta version?

Sure. But currently we got another problem: looks like #158 is actually from puppeteer, or chromium.We already raised an issue for puppeteer here https://github.com/puppeteer/puppeteer/issues/6060, but haven't had any response from them. So this might not be done soon as I expected

Hi @TraGicCode , Element v2.0.0 is now on beta. You can install beta version by adding @beta to the commands, for example, by using yarn: yarn global add element-cli@beta If there're any problems during or after installing, you might first try uninstalling the version of Element you currently have.

With Element v2 you can run your test script with Chromium, Firefox or Safari. You won't have problem accessing cross-origin frame (issue #158) when running your script on Firefox. In your test script, just add: browserType: BROWSER_TYPE.FIREFOX

@HieuLeKMS I am using Element v2.0.0-beta.12 trying to fill out a form in an iframe and am also having no luck. Here is my test script:

import { step, TestSettings, By, Until, BROWSER_TYPE } from '@flood/element'

export const settings: TestSettings = {
  waitUntil: 'visible',
  browserType: BROWSER_TYPE.FIREFOX,
}

export default () => {
  step('STEP 3 - FILL OUT SUBSCRIPTION FORM', async browser => {
    const stripeIFrame = await browser.findElement(By.css('iframe[title="Secure card payment input frame"]'))
    const title = await stripeIFrame.getAttribute('title')
    console.log(`>>>>>>>>> Stripe iframe title: ${title}`)
    await browser.switchTo().frame(stripeIFrame)

    const cardNumberInput = By.nameAttr('cardnumber')
    await browser.type(cardNumberInput, '4242424242424242')

    await browser.switchTo().defaultContent()

    await browser.takeScreenshot()
  })
})

the iframe in question:

<iframe src="https://js.stripe.com/v3/" title="Secure card payment input frame">
  <form class="ElementsApp is-empty" dir="ltr">
    <div tabindex="-1" class="CardField CardField--ltr">
      <div class="CardNumberField-input-wrapper">
        <span class="InputContainer" data-max="4242 4242 4242 4242 4240">
          <input class="InputElement is-empty Input Input--empty" autocomplete="cc-number" autocorrect="off" spellcheck="false" name="cardnumber" inputmode="numeric" aria-label="Credit or debit card number" placeholder="Card number" aria-invalid="false" value="">
        </span>
      </div>
    </div>
  </form>
</iframe>

and my output:

      >>>>>>>>> Stripe iframe title: Secure card payment input frame
      No element was found on the page using 'By.nameAttr('cardnumber')'
  step -> failed

Any help would be greatly appreciated. Thanks!

Hi @parisyee , it looks like a bug of Element. I'll take a better look and see what the issue is.

Hi @parisyee , it looks like a bug of Element. I'll take a better look and see what the issue is.

Thank you, @HieuLeKMS ! Really appreciate it.

@HieuLeKMS I am using Element v2.0.0-beta.12 trying to fill out a form in an iframe and am also having no luck. Here is my test script:

@HieuLeKMS not sure if this is related, but I figure the more clues, the better.

In the case mentioned above, since I know the iframe containing the credit card field is the only other frame available, I tried just referencing it by the frame index and here's what happened:

export default () => {
  step('STEP 3 - FILL OUT SUBSCRIPTION FORM', async browser => {
    const stripeIFrame = await browser.findElement(By.css('iframe[title="Secure card payment input frame"]'))
    await browser.wait(Until.elementIsVisible(stripeIFrame))

    await browser.switchTo().frame(2)

    const cardNumberInput = By.nameAttr('cardnumber')
    await browser.type(cardNumberInput, '4242424242424242')
  })
})

output:

      page.evaluate: Evaluation failed: Permission denied to access property "name" on cross-origin object
@__playwright_evaluation_script__93:5:21
callFunction@__playwright_evaluation_script__59:305:28
@__playwright_evaluation_script__94:1:44

  step -> failed

@parisyee The issue of unable to switch to another frame has been fixed in Element v2.0.0-beta.17, browser.switchTo().frame(...) should work. About the error you mentioned above - when switching by frame index, it was thrown when Element try to access window.frames. I think it's an intended behavior rather than a bug. It might have something to do with CORS policy.