htmliframeselenium-webdrivercucumberstripe-payments

Using Selenium Webdriver to interact with Stripe Card Element iFrame - Cucumber/Selenium Java

I have an form that I want to automate using Cucumber and Selenium Webdriver in Java - in this form, we have a card element which we use from Stripe. We call the div, and stripe does the rest. I'm unsure if this is an iFrame, but when I use the 

Hooks.driver.findElement(By.xpath("xpathOfTheCardNumberField")).sendKeys("123");

command, it does not interact with it and returns the "Unable to locate element" error in the console log.

I have asked our front-ender to perhaps try and add some ID's or Name tags to the fields, but he informs me that he cannot interact with the markup for the fields inside of the card element, only the card element itself - as Stripe deal with everything else.

Attached is a picture of the card element, as well as the markup for the card element in question.

Is it possible to get Selenium to interact with this element?

Any help is greatly appreciated. Card element front end

Mark up for the card element

Solution

  • I've actually figured this out myself, so I'm going to answer the question and close it off in case anyone else is having issues with it.

    I think this is a blanket method that can be used for any iframes, not just Stripe.

    Firstly, you must tell your webdriver to switch frames to the iframe you are trying to access:

    Hooks.driver.switchTo().frame(Hooks.driver.findElement(By.xpath("xpathOfIframe")));

    Then, you can create webElements for the things within that iframe, and interact with them:

    WebElement creditcardNumber = Hooks.driver.findElement(By.name("cardnumber"));
creditcardNumber.sendKeys("1234567890000066");