WebDriver -Web Element Commands

Anything is present on the web page is a WebElement such as text box, CheckBox, dropdown , etc. WebElement represents an HTML element. It consists a start tag,an end tag and the content in between. 

Ex: <input> Content </input> 

We have different type of web elements in Selenium.

Edit box

Link

Button

Image

Text area

Checkbox

Radio button

Dropdown list

In WebDriver, we have several web element commands and actions. To get the web element object, we have to write the statement as: 

driver.find_element(By.XPATH,"//input[@id='email']") 

Below are the commonly used web element commands for webdriver. 

Clear(): It will clear the text content in text box. Has no effect on other elements. Text entry elements are INPUT and TEXTAREA elements.

Ex: driver.find_element(By.XPATH,"//input[@id='email']").clear()

Send_Keys(): Use this method to simulate typing into an element, which may set its value.

Ex: driver.find_element(By.XPATH,"//input[@id='email']").send_keys("Hello")

java.lang.IllegalArgumentException - if keysToSend is null

Click():Click this element. The element must be visible and it must have a height and width greater then 0.

Ex: driver.find_element(By.XPATH,"//*[contains(@data-testid,'login_button')]").click()

StaleElementReferenceException - If the element no longer exists as initially defined

Submit(): If this current element is a form, or an element within a form, then this will be submitted to the remote server. If this causes the current page to change, then this method will block until the new page is loaded.

Ex: driver.find_element(By.XPATH,"//*[contains(@data-testid,'login_button')]").submit()

NoSuchElementException - If the given element is not within a form

What is the difference between submit() and Click() methods ?

Submit() will work if submit button should be inside <form> tag and web element type="submit" but if type=’button” submit() method will not work even though in side <form> tag.

click() method will work for all  buttons in webpage with out any restrictions.

That means element's type = "button" or type = "submit", .click() method will works for both. 

In the below example we are using facebook application.

Script:

from selenium import webdriver
from selenium.webdriver.common.by import By
chromePath="C:\\BrowserDriver\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.facebook.com/")

driver.find_element(By.XPATH,"//input[contains(@id,'mail')]").send_keys("Hello")
driver.find_element_by_xpath("//*[contains(@data-testid,'pass')]").send_keys("hello")
driver.find_element(By.XPATH,"//*[contains(@data-testid,'login_button')]").submit()

In the above example we are using Submit () method instead of Click(). Because web element type is “submit “and available within form tag.

Note: click() method will work in webpage without any restrictions.

Text():

Get the visible text of this element, including sub-elements. 

Ex: Str=driver.find_element_by_xpath("//label[@for='email']").text

Print(str)

get_attribute(): 

Gets the given attribute or property of the element.

This method will first try to return the value of a property with the given name. If a property with that name doesn’t exist, it returns the value of the attribute with the same name. If there’s no attribute with that name, None is returned.

Ex:

driver.find_element(By.XPATH,"//input[@id='email']").get_attribute("name")

get_property()

Gets the given property of the element. 

Ex:

driver.find_element(By.XPATH,"//input[@id='email']").get_property("name")

What is the Difference between get_attribute() and get_property() methods?

An attribute is a static attribute of a given DOM node, as where a property is a computed property of the DOM node object. An example of a property would be the checked state of a checkbox or radio button field. As where an attribute would be href of an anchor tag or the type of an input DOM.

In the below example, I want to check whether radio button is selected or not in Gender section in Facebook application.

from selenium import webdriver
from selenium.webdriver.common.by import By
import time
chromePath="C:\\BrowserDrivers\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.facebook.com/")

print(driver.find_element_by_xpath("//input[@name='sex' and @value=1]").get_property('checked'))
print(driver.find_element_by_xpath("//input[@name='sex' and @value=2]").get_attribute("checked"))

if you run the above code get_property() method will return as “False” whereas get_attribute() method will return as “None”.

value_of_css_property(): it will returns the value of the CSS property. 

Ex: I want to get background-color css property of the radio button. 

print(driver.find_element_by_xpath("//input[@name='sex' and @value=1]").value_of_css_property("background-color"))

Tag_name(): It will return the name of the tag. 

Ex: print(driver.find_element_by_xpath("//input[@name='sex' and @value=2]").tag_name) 

Returns: Input

Size(): It will return the size of the web element means Height and width. 

Ex: print(driver.find_element_by_xpath("//input[@name='sex' and @value=2]").size) 

Returns: {'height': 13, 'width': 13}

is_displayed(): It will returns whether the element is visible to user or not.

In the Below example I want to know whether pronoun dropdown is displayed or not in facebook application. pronoun dropdown is visible to user only when user selects custom radio button in Gender section.

Script:

from selenium import webdriver
from selenium.webdriver.common.by import By
import time
chromePath="C:\\BrowserDrivers\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.facebook.com/")
pronoun_display=driver.find_element_by_xpath("//select[@name='preferred_pronoun']").is_displayed()
if(pronoun_display):
    print("Custom radio button is selected in gender section")
else:
    print("Custom radio button is not selected in gender section")

is_enabled(): It will returns whether the element is enabled or not. 

In the Below example I want to know whether Email or Phone textbox is enabled or not in facebook application.

Script: 

from selenium import webdriver
from selenium.webdriver.common.by import By
import time
chromePath="C:\\BrowserDrivers\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.facebook.com/")
txt_display=driver.find_element_by_xpath("//input[@name=’email']").is_enabled()
if(txt_display):
    print("Email or Phone Test box is Enabled")
else:
    print("Email or Phone Test box is not Enabled")

is_selected(): It will returns whether the element is selected or not. 

In the Below example I want to know whether Gender radio button is selected or not in facebook application.

Script: 

from selenium import webdriver
from selenium.webdriver.common.by import By
import time
chromePath="C:\\BrowserDrivers\\chromedriver.exe"
driver=webdriver.Chrome(executable_path=chromePath)
driver.get("https://www.facebook.com/")
gender_selected=driver.find_element_by_xpath("//input[@name='sex' and @value=1]").is_selected()

if(txt_ selected):
    print("Gender Female is selected")
else:
    print("Gender Female is not selected")