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" 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()
CodePudding user response:
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
CodePudding user response:
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.