Populate Verification Number using Selenium Python

Viewed 110

I am trying to populate an Email verification Number, to a webpage. Assuming I have the six-digit number as a string, is there a way to populate it using selenium in python?

Here is the link: https://testnet.phemex.com/login

enter image description here

The following is the html

<div>
   <div class="wrap svelte-1ysrabk">
      <div class="digits svelte-1ysrabk">
         <div class="digit-box svelte-1ysrabk active"><span class="txt svelte-1ysrabk">1</span> <input type="number" maxlength="1" max="9" data-index="0" class="svelte-1ysrabk"></div>
         <div class="digit-box svelte-1ysrabk"><span class="txt svelte-1ysrabk">1</span> <input type="number" maxlength="1" max="9" data-index="1" class="svelte-1ysrabk"></div>
         <div class="digit-box svelte-1ysrabk"><span class="txt svelte-1ysrabk"></span> <input type="number" maxlength="1" max="9" data-index="2" class="svelte-1ysrabk"></div>
         <div class="digit-box svelte-1ysrabk"><span class="txt svelte-1ysrabk"></span> <input type="number" maxlength="1" max="9" data-index="3" class="svelte-1ysrabk"></div>
         <div class="digit-box svelte-1ysrabk"><span class="txt svelte-1ysrabk"></span> <input type="number" maxlength="1" max="9" data-index="4" class="svelte-1ysrabk"></div>
         <div class="digit-box svelte-1ysrabk"><span class="txt svelte-1ysrabk"></span> <input type="number" maxlength="1" max="9" data-index="5" class="svelte-1ysrabk"></div>
      </div>
      <div class="explain svelte-1ysrabk"></div>
   </div>
</div>

To see the field do the following steps:

  1. Go to https://testnet.phemex.com/
  2. Click Login
  3. In the next field click "Reset Password"
  4. Enter your email
  5. Click "Continue"

There are six digit-boxes with different data-indexes and I'm not sure how to populate them. Thanks for any potential help!

2 Answers
digits = driver.find_elements_by_xpath("//div[contains(@class,'digit-box')]/input")
for digit in digits:
    digit.send_keys("1")

You can send to individual boxes like so

digits[2].send_keys("3")

You can find all the input tags by xpath and then send_keys to them.

The whole code goes like so

driver = webdriver.Chrome()
wait = WebDriverWait(driver, 10)
driver.get("https://testnet.phemex.com/login")
wait.until(EC.element_to_be_clickable((By.XPATH,"//a[.='Get Started']"))).click()
wait.until(EC.element_to_be_clickable((By.XPATH,"/html/body/div[1]/div/div/div/div[2]/div/div/div[3]/div[1]/span/input"))).send_keys('a')
wait.until(EC.element_to_be_clickable((By.XPATH,"/html/body/div[1]/div/div/div/div[2]/div/div/div[3]/div[2]/span/input"))).send_keys('a')
wait.until(EC.element_to_be_clickable((By.XPATH,"/html/body/div[1]/div/div/div/div[2]/div/div/div[4]/button"))).click()
digits = wait.until(EC.presence_of_all_elements_located((By.XPATH,"//div[contains(@class,'digit-box')]/input")))
for digit in digits:
    digit.send_keys("1")
digits[2].send_keys("4")

Import

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

Each field has its unique locator: .digit-box.svelte-1ysrabk >.txt.svelte-1ysrabk, or .digit-box.svelte-1ysrabk:nth-of-type(n) >input Below is the snippet for a case when you want to fill each field with 1.

digits = driver.find_elements_by_css_selector(".digit-box.svelte-1ysrabk >input")
for digit in digits:
    digit.send_keys("1")

To fill all fields separately use:

digit1 = driver.find_element_by_css_selector(".digit-box.svelte-1ysrabk:nth-of-type(1) >input")
digit1.send_keys("1")
digit2 = driver.find_element_by_css_selector(".digit-box.svelte-1ysrabk:nth-of-type(2) >input")
digit1.send_keys("2")
digit3 = driver.find_element_by_css_selector(".digit-box.svelte-1ysrabk:nth-of-type(3) >input")
digit1.send_keys("3")
...

Or you can create a list of values and fill your fields with the values from this list (Try it yourself).

Related