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()
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