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")
is the link I am trying to test this out on
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
You can find a couple of relevant discussions in:
You can find a couple of relevant detailed discussions in: