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 -->
  • Are there any other attributes in the iframe that don't change? What methods have you tried to get to the iframe?
    – Kate Paulk
    Jan 17 '18 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.
    – Bhavani
    Jan 17 '18 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. Jan 17 '18 at 16:53

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);

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.

  • 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
    – Bhavani
    Jan 18 '18 at 7:22
  • Not able to put the formatted code. So, pasting the code snippet in the answer section
    – Bhavani
    Jan 18 '18 at 7:22

Code Sample

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.