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

Time:11-07

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.

  • Related