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.