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, Nov 06 '21 at 11:53

score 0 · Answer 1 · answered Nov 06 '21 at 12:16

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 06 '21 at 12:16

undetected Selenium

183,867
41
278
352

how does it help OP? He is already able to get `Login`. your answer is basically OP question. – cruisepandey Nov 06 '21 at 14:12
Also, Why are you using CSS or XPATH ? OP actually has a better locator than the one shown by you. – cruisepandey Nov 06 '21 at 14:13
1

@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. – undetected Selenium Nov 06 '21 at 14:31
`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. – cruisepandey Nov 06 '21 at 14:37
1

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](https://stackoverflow.com/questions/48369043/official-locator-strategies-for-the-webdriver/48376890#48376890). – undetected Selenium Nov 06 '21 at 14:44

score 0 · Accepted Answer · answered Nov 06 '21 at 14:44

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

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. — Aleks Lee, Nov 06 '21 at 20:02

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

2 Answers2