[FIXED] How to enter date in the credit card number field using Selenium and Python?

Issue

I am trying to make a script to automatically checkout on a Shopify site. When I try to fill in the field that is asking for the credit card, selenium is not allowing me to send in the keys into the field and is saying that the element is not interactable. I've already tried clicking it, but it's still not letting me enter in the information. Does anyone know what to do?

driver.find_element_by_xpath('//div[@data-card-field-placeholder="Card number"]').click()
driver.find_element_by_xpath('//div[@data-card-field-placeholder="Card number"]').send_keys("1234")

URL: https://feature.com/4089909/checkouts/2f7c52e34622f0f301c0d4b5720ad80e?previous_step=shipping_method&step=payment_method

is the link I am trying to test this out on

Solution

To access the page to provide the credit card details we need to move beyond the CONTACT INFORMATION information page. Hence, couldn't access it directly.

Ideally Creditcard Number fields are with in an <iframe>. Hence to access the Creditcard Number field within an <iframe> so you have to:

• Induce WebDriverWait for the desired frame to be available and switch to it.

• Induce WebDriverWait for the desired element to be clickable.

• You can use either of the following Locator Strategies:

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR,"iframe_css")))
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div[data-card-field-placeholder='Card number']"))).send_keys("1234")
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"iframe_xpath")))
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@data-card-field-placeholder='Card number']"))).send_keys("1234")
  

• Note : You have to add the following imports :

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC
  

---

Reference

You can find a couple of relevant discussions in:

• Ways to deal with #document under iframe
• Switch to an iframe through Selenium and python

---

tl; dr

You can find a couple of relevant detailed discussions in:

• Unable to locate element of credit card number using selenium python
• NoSuchElementException: Message: Unable to locate element while trying to click on the button VISA through Selenium and Python

Answered By - undetected Selenium

Answer Checked By - Candace Johnson (PHPFixing Volunteer)