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

Question

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

Answer 1

Additional follow-up to the accepted answer by Fabio for completeness.

self.browser = webdriver.Chrome()

# fill in the other fields as usual (i.e. self.browser.find_element_by_id(...))

# When you arrive at the iframe for the card number, exp. date, CVC, and zip:
self.browser.switch_to.frame(frame_reference=self.browser.find_element(By.XPATH, '//iframe[@name="__privateStripeFrame3"]'))

# This switches to the iframe, which Selenium can now start selecting elements from.

# The remaining form elements can be found by name

self.browser.find_element_by_name('cardnumber').send_keys('4242 4242 4242 4242')

# And find the other elements the same way as above (exp-date, cvc, postal).
# Finally, switch back to the default content to select the submit button

self.browser.switch_to.default_content()
self.browser.find_element_by_tag_name('button').click()