How to write a value for input tag created by ion-input using selenium Python

Question

I have ion-input tags in my app and that creates another input tag as a sibling. The sibling input is responsible for any input value.

I want to access that sibling to enter a value using selenium Python (can be using send_keys or using javascript_executor

<ion-input data-cy="email" type="email" debounce="50" value="" class="sc-ion-input-md-h sc-ion-input-md-s md">
  <input class="native-input sc-ion-input-md" autocapitalize="off" autocomplete="off" 
  autocorrect="off" name="ion-input-0" placeholder="" spellcheck="false" type="email"></ion-input>

Everytime I use that data-cy="email" I am getting elementNotFound exception only.

I am using Selenium python.

Please share a link to the page you are working on and your code attempts — Prophet, Jan 17 '22 at 14:49

score 0 · Answer 1 · answered Jan 17 '22 at 14:57

The element should be unique in nature, based on the HTML that you've shared, can you check this CSS or XPATH

XPATH:

//input[@class='native-input sc-ion-input-md' and @type='email' and@name='ion-input-0']

CSS_SELECTOR:

input[class='native-input sc-ion-input-md'][type='email'][name='ion-input-0']

Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.

Steps to check:

Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath/css and see, if your desired element is getting highlighted with 1/1 matching node.

If they happen to be unique in nature you can try with the below code:

Code1:

wait = WebDriverWait(driver, 30)
input = wait.until(EC.visibility_of_element_located((By.XPATH, "//input[@class='native-input sc-ion-input-md' and @type='email' and@name='ion-input-0']")))
input.send_keys('the string that you want to send')

Code2:

wait = WebDriverWait(driver, 30)
input = wait.until(EC.visibility_of_element_located((By.XPATH, "//input[@class='native-input sc-ion-input-md' and @type='email' and@name='ion-input-0']")))
driver.execute_script("arguments[0].setAttribute('value', 'the string that you want to send')", input)

Imports:

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

I was able to access the element using ```@type='email'``` or ```@name='ion-input-0']``` however, on the other screens i have got multiple input elements where the names are dynamic. hence have asked the developer to add a custom attribute ```data-cy="<>"``` so that it will be always unique. Hence my question is... How can i access the inner ``` — Sarath N, Jan 17 '22 at 15:02
I am using something like this as i am obligated to use the custom-attribute ```email = [(By.XPATH, "ion-input[data-cy='email'] input")]``` — Sarath N, Jan 17 '22 at 15:08

score 0 · Answer 2 · answered Jan 17 '22 at 23:46

I don't any such major issues in your code attempts. However the the desired element is a dynamic element, so ideally to send a character sequence to the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "ion-input[data-cy='email'] > input[type='email'][name^='ion-input']"))).send_keys("Sarath@N.com")

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//ion-input[@data-cy='email']/input[@type='email' and starts-with(@name, 'ion-input')]"))).send_keys("Sarath@N.com")

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

score 0 · Answer 3 · answered Jan 24 '22 at 15:31

It was so easy. I have been using either XPATH or CSS_SELECTOR hence always it does not penetrate to the input tag that was created by ion. Instead of the bespoke one, i have used TAGNAME and that did the magic

email = [(By.XPATH, "ion-input[data-cy='email'] input")]

Instead use like this

email = [(By.TAGNAME, "ion-input[data-cy='email']")]

How to write a value for input tag created by ion-input using selenium Python

3 Answers3