Getting text from input element (type=submit) using Selenium

Question

I'm experimenting with some web test automation.
For practicing I took Sause demo site
It has login button defined on page as
<input type="submit" class="submit-button btn_action" data-test="login-button" id="login-button" name="login-button" value="Login">
Its text on the screen is "LOGIN" (uppercased).
I want to get text from login button.
First I tried just to use login_button.text and it returns empty string. Ok, it's clear why and expected.
Then I tried to get property value of login_button, and it returns "Login" string.
I checked that for login button the following CSS style is applied and makes text uppercased.

.submit-button {
    text-transform: uppercase;
}

But is there any posibility to get text from this button exactly how it is displayed ("LOGIN" instead of "Login")?

Sample of code I used:

driver = webdriver.Chrome(CHROME_DRIVER_PATH)
driver.get("https://www.saucedemo.com/")
login_button = driver.find_element_by_id("login-button")
print(login_button.text)  # returns empty string
print(login_button.get_property("value"))  # returns "Login"
driver.quit()

I guess some HTML inbuilt function like text-transform or js is being used to display the Login as LOGIN but we cannot get that text as you wanted. You need to use python functions to covert it. — Nandan A
– Nandan A, Commented Nov 6, 2021 at 11:53

cruisepandey · Accepted Answer · 2021-11-06 14:44:10Z

0

The direct answer is Selenium makes an HTTP request to DOM, and it can update/retrieve info from DOM.

In your case, as highlighted by you it is a CSS property (text-transform) that is making this change.

You can read this property, and based on info you can make Python upper() or lower()

I would suggest having validation from CSS property and the use

driver.get("https://www.saucedemo.com/")

login_button = driver.find_element_by_id("login-button")
actual_login_button_text = login_button.get_attribute('value')
print('Actual text', actual_login_button_text)
text_type = login_button.value_of_css_property('text-transform')
print('CSS text type', text_type)

change_text = ''
if text_type == 'uppercase':
    change_text = actual_login_button_text.upper()
if text_type == 'lowercase':
    change_text = actual_login_button_text.lower()


print('Modified text', change_text)

Output :

Actual text Login
CSS text type uppercase
Modified text LOGIN

answered Nov 6, 2021 at 14:44

cruisepandey

29.5k6 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aleks Lee Over a year ago

thank you. Then for correct work need to implement all values for text-transform property( I hoped there would be easier way get displayed text.

undetected Selenium · Accepted Answer · 2021-11-06 12:16:11Z

0

Selenium reads the HTML DOM but not what is exactly displayed on the screen.

The LOGIN button actually have a value attribute set as Login

To extract the value of value attribute you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "input#login-button"))).get_attribute("value"))

Using XPATH:

print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//input[@id='login-button']"))).get_attribute("value"))

Console Output:
```
Login
```

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

As you rightly pointed, the value Login is applied the following CSS style:

text-transform: uppercase;

to present it in uppercase as LOGIN.

answered Nov 6, 2021 at 12:16

undetected Selenium

194k44 gold badges304 silver badges387 bronze badges

5 Comments

cruisepandey Over a year ago

how does it help OP? He is already able to get Login. your answer is basically OP question.

cruisepandey Over a year ago

Also, Why are you using CSS or XPATH ? OP actually has a better locator than the one shown by you.

undetected Selenium Over a year ago

@cruisepandey Answering your questions: 1) how does it help: OP need to use get_attribute() 2) Why are you using CSS or XPATH: You had been asking the same question again and again for the last 3-4 years but for once did you try to find the answer on your own? Did you get a chance to look at similar questions here on SO? Else feel free to raise a new question, SO contributors will be happy to help you out.

cruisepandey Over a year ago

1) get_property("value") does the job as well. 2) did you try to find the answer on your own? - Yes I know the answer. I am also one of the core contributors for the selenium tag here at SO. But let me clarify it one more time, ID has more precedence over any locator in Selenium automation, but it has to be static and unique, if it is then there's no point constructing a CSS or XPATH. Hope this will help you to understand the difference.

undetected Selenium Over a year ago

It doesn't matters if you are one of the core contributors for the selenium tag here at SO or not but at the end of the day we as a community must contribute to the bigger cause. Now, one last time let me answer your question. You can write a locator with ID or CLASSNAME but the parser within the selenium libraries(python)/jars(java) would always convert them to a CSS before executing that line of code. Check out this detailed discussion.

Collectives™ on Stack Overflow

Getting text from input element (type=submit) using Selenium

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related