0

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

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
Spolt
  • 25
  • 5

2 Answers2

1

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:

tl; dr

You can find a couple of relevant detailed discussions in:

undetected Selenium
  • 183,867
  • 41
  • 278
  • 352
0

you should use element with input tag or any interactable tag to use sendKeys

see if the parent div element has a child input tag element and find that element instead of div

Also there is iframe inside , so if the input tag is inisde iframe , then first find iframe element then use

driver.switch_To.frame(iframe)

and then find the input element

each iframe are isolated session , you cannot talk to other frame from one frame so if you want to access elements inside one frame you have to switch to that framefirst

and also once done switch back to main frame using driver.switch_to.default_content()

PDHide
  • 18,113
  • 2
  • 31
  • 46
  • https://imgur.com/a/0Mvx4Vn I tried this but it's giving me "The string is not a valid XPath expression." driver.switch_to.frame(driver.find_element_by_tag_name("iframe")) driver.find_element_by_xpath('//input[@required autocomplete="cc-number"]').send_keys("1234") – Spolt Dec 03 '20 at 05:06
  • driver.find_element_by_xpath('//input[@autocomplete="cc-number"]').send_keys("1234") or driver.find_element_by_xpath('//input[@id="number"]').send_keys("1234") – PDHide Dec 03 '20 at 05:08
  • try this located required is not an attribute , its aproperty , automcomple or id could be used – PDHide Dec 03 '20 at 05:08
  • Also see if there are more than one iframe , if more than one iframe you have uniquiely find the iframe and then switch to it – PDHide Dec 03 '20 at 05:09
  • there will be many tags with iframe , tries to find using xpath or css and make sure the locator finds only one iframe which you are interessted in – PDHide Dec 03 '20 at 05:10
  • driver.switch_to.default_content() to exit from the iframe else you cannot access other elements outsie the frame , use switch to frrame each time you want to interact with any element inside iframe – PDHide Dec 03 '20 at 05:14
  • Hi Sorry, to bother again, I tried doing the same thing for the Name on card, but now it's giving me element not interactable again, do you know the reason why? https://imgur.com/a/R8mA7Mc – Spolt Dec 03 '20 at 05:31
  • I tried using driver.find_element_by_xpath('//input[@id="name"]').send_keys("First Last") – Spolt Dec 03 '20 at 05:31
  • did you switch to iframe first ? is the element visible in browser , is the field enabled try click() isntead fo sendkeys and use switchtoactive element if the cursor is on name field and then send keys to active element – PDHide Dec 03 '20 at 05:36
  • Yeah I tried driver.switch_to.default_content() driver.find_element_by_xpath('//div[@data-card-field-placeholder="Name on card"]').click() driver.switch_to.frame(driver.find_element_by_tag_name("iframe")) driver.find_element_by_xpath('//input[@autocomplete="cc-name"]').send_keys("First Last") – Spolt Dec 03 '20 at 05:39
  • Click name on card after switching to iframe – PDHide Dec 03 '20 at 05:54
  • I tried driver.find_element_by_xpath('//div[@data-card-field-placeholder="Name on card"]').click() and it just says unable to locate element – Spolt Dec 03 '20 at 06:21
  • Add the html it doesn't have dig tag in the screen shot you added., – PDHide Dec 03 '20 at 06:32