0

I am automating the payment page which is having the option to select payment method. On selection of credit card payment option, one iframe is generated from the third party and loaded with dynamic ids. The iframe id is generated randomly. I'm not able to access the iframe. It is throwing the error as element is not accessible. After accessing the iframe, need to fill up the other credit card input fields.

There is only one iframe on the page. HTML Code of the iFrame:

<iframe src="assets.braintreegateway.com/hosted-fields/2.32.0/…;" frameborder="0" allowtransparency="true" scrolling="no" type="number" name="braintree-hosted-field-number" id="braintree-hosted-field-number" style="border: none; width: 100%; height: 100%; float: left;">
  <!-- actual iframe here -->
</iframe>
Improve this question
3
  • Are there any other attributes in the iframe that don't change? What methods have you tried to get to the iframe? Commented Jan 17, 2018 at 16:40
  • The variables of credit card input fields don't change. I've tried the method to wait for the iframe and tried to switch the focus to iframe. Commented Jan 17, 2018 at 16:43
  • Can you add a set of three or four examples of the HTML attributes for that generated iFrame? Then we might be able to find a commonality for you to use. Is it the only iFrame on the page? If so, you can just locate it by the tag and switch the driver context to that element. The fact is, you need to provide some more details for anyone to answer your question in a meaningful way. Commented Jan 17, 2018 at 16:53

2 Answers 2

Reset to default
0

This is the approach I would use based on the HTML provided. This example uses Selenium's C# bindings, but can be easily ported to any other language.

By iframeLocator = By.XPath("//iframe[contains(@src,'assets.braintreegateway.com/hosted-fields')]");
IWebElement iframe = driver.FindElement(iframeLocator);
driver.SwitchTo().Frame(iframe);

At this point, your driver will now be operating from the context of the iFrame. Note that this code does not make use of explicit waiting, which I would highly recommend to ensure that the iFrame has been added to the DOM before attempting to locate it.

Additionally, the XPath used for locating the iFrame can be simplified to "//iframe" if you are sure it's the only iFrame on the page. By adding a partial match on the @src attribute as I have shown in the example, you are ensuring that, if there are multiple iFrames, the one that is returned is indeed the one with the Braintree data.

Improve this answer
2
  • Thank you for the suggestion. Tried, this solution is not worked. But it gave me an idea. Since it is having two fields, one is braintree data field and the other one is actual locator. Achieved this by the work around Commented Jan 18, 2018 at 7:22
  • Not able to put the formatted code. So, pasting the code snippet in the answer section Commented Jan 18, 2018 at 7:22
0

Code Sample

// enter card number
      var cardFrame = $("#braintree-hosted-field-number").value;
      browser.frame(cardFrame);
      var card = $("//*[@id='credit-card-number']");
      browser.execute(function (card) {
        card.value = "411111111111111";
      }, card.value);
     browser.frameParent("#dropin-container");
Improve this answer
1
  • Glad you got a working solution. I think I misunderstood which attributes were dynamic, so my approach had some unnecessary complexity. Nice work. Commented Jan 18, 2018 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.