How to Locate Element of Credit Card Number Using Selenium Python

Unable to locate element of credit card number using selenium python

As you are trying to send a character sequence within an <input> field sems to be a Credit Card Number and historically Credit Card Number resides within <iframes>.

So if the the desired elements are 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 the following solution:

  from selenium import webdriver
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  
  options = webdriver.ChromeOptions() 
  options.add_argument("start-maximized")
  options.add_argument('disable-infobars')
  driver = webdriver.Chrome(chrome_options=options, executable_path=r'C:\Utility\BrowserDrivers\chromedriver.exe')
  driver.get("https://www.audiobooks.com/signup")
  WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@id='braintree-hosted-field-number']")))
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='number' and @id='credit-card-number']"))).send_keys("1234567890987654")
  

• Browser Snapshot

How to click on element which contains a credit card number that changes each time with Selenium Python

Various locator strategies you can use (as per the DOM provided in the query):

All are xpaths

//input[@data-fieldtype='encryptedCardNumber']

//input[@type='text']

//input[@inputmode='numeric']

//input[@aria-label='Champ du numéro de carte']

Not able to detect the element and send input to the Credit Card Number field through Selenium

The <input> field for the Credit Card number is 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 and you can use the following solution:

• Code Block:

  WebDriverWait(session, 20).until(EC.frame_to_be_available_and_switch_to_it((By.ID,"braintree-hosted-field-number")))
  WebDriverWait(session, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.number#credit-card-number"))).send_keys("0000000000000000")
  

Enter Credit Card Data in Python Selenium

ElementNotInteractableException means that you trying to access an element that is currently not interactable.

This can be caused by several causes.

1. Element is not visible since it is out of the view.
2. Element is still not fully rendered.
3. Some other element is currently covering this element.
   
   maybe something other, but similar to the above.
   
   Since I can't know what causes your problem in your specific case you can try one of the following and it should work.

1. To bring the element into view try this:

from selenium.webdriver.common.action_chains import ActionChains

actions = ActionChains(driver)
objCrdNumber = driver.find_element_by_name('txtCrdtCrdNum')
actions.move_to_element(objCrdNumber).build().perform()
time.sleep(0.5)
objCrdNumber.send_keys(UserData.CrdtCrdNumber)

2. to wait for the element is fully rendered try this:

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

wait = WebDriverWait(driver, 20)
wait.until(EC.visibility_of_element_located((By.NAME, "txtCrdtCrdNum"))).send_keys(UserData.CrdtCrdNumber)

UPD

Your element is inside iframe.

You have to switch to that iframe in order to access elements inside it.

driver.switch_to.frame(driver.find_element_by_xpath("//iframe[contains(@class,'secure')]"))

When finished with that form don't forget to switch to the default content with

driver.switch_to.default_content()

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

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

Unable to input Credit card number using selenium java

You need to send the credit card to the input field after you switch to the iframe. There are several ways to build the xpath, like:

            //v1 by containing name, probably the safest option
            WebElement iframe_by_name_contains = driver.findElement(By.xpath("//iframe[contains(@name,'__privateStripeFrame')]"));
            driver.switchTo().frame(iframe_by_name_contains);
            
            //v2 by name - might not be goood if the 2445 is dynamic
            WebElement iframe_by_name = driver.findElement(By.xpath("//iframe[@name='__privateStripeFrame2445']"));
            driver.switchTo().frame(iframe_by_name);
    
            //by title - might not be good in case that there are locales and the title is translated
            WebElement iframe_by_title = driver.findElement(By.xpath("//iframe[@title='Secure card number input frame']"));
            driver.switchTo().frame(iframe_by_title);
    
            //get input field
            driver.findElement(By.name("cardnumber")).sendKeys("4242424242424242");

For month/year and CVC

  driver.switchTo().defaultContent();

  WebElement iframe_by_title_mm_yy = driver.findElement(By.xpath("//iframe[@title='Secure expiration date input frame']"));
  driver.switchTo().frame(iframe_by_title_mm_yy);

  driver.findElement(By.name("exp-date")).sendKeys("03/24");

  driver.switchTo().defaultContent();

  WebElement iframe_by_title_cvc = driver.findElement(By.xpath("//iframe[@title='Secure CVC input frame']"));
  driver.switchTo().frame(iframe_by_title_cvc);

  driver.findElement(By.name("cvc")).sendKeys("123");

Unable to locate element using selenium Python

To switch to next iframe you need to switch back to main DOM first. So just add below code between frame-switching lines:

driver.switch_to.default_content()

Your final code:

WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@id='braintree-hosted-field-number']")))
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='number' and @id='credit-card-number']"))).send_keys("1234567890987654")

driver.switch_to.default_content()

WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@id='braintree-hosted-field-expirationDate']")))
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='expirationDate' and @id='expiration']"))).send_keys("11/21")

driver.switch_to.default_content()

WebDriverWait(driver, 20).until(EC.frame_to_be_available_and_switch_to_it((By.XPATH,"//iframe[@id='braintree-hosted-field-cvv']")))
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='cvv' and @id='cvv']"))).send_keys("123")

---

Related Topics