The locator concept is considered one of the building blocks for learning Selenium. So let us now understand how to use a locator for a page. A locator is used by Selenium to identify an element and perform actions on it.
Inspecting HTML to identify attributes of element
Let us consider an application: https://rahulshettyacademy.com/angularpractice/ and try to identify an element with the help of a locator. For identifying an element, we have to right click on the page and then select the Inspect Element option.
After doing so, the HTML code of the page becomes visible and then we have to select the element with the arrow mark appearing in the left corner of the window that comes after clicking on Inspect Element option.
On picking the Name edit box from the page with the arrow, the below image shows the Name field along with its HTML code.
Let us now understand the html code for the Name field.
Here, input is called the tagname and class, name, required and type are the attributes of the element defined by the developer for that edit box. The right side of the assignment operator after attribute is known as the value of the attribute. So form-control ng-pristine ng-invalid ng-touched is the value of the class attribute here.
Conclusion: Thus we have seen how to spy on an element and analyze its HTML code. For more details, you can refer to the link:
In the next section we shall discuss different locators along with examples.
Introduction of various locators with examples
Some of the locators used by Selenium to identify element are listed below:
ID
Name
Xpath
CSS
ClassName
LinkText
Now to locate the Name edit box in the page we can use the name attribute which is having name as value. Selenium shall identify that element with the help of its name attribute by the method find_element_by_name. The value of the name attribute shall be passed as an argument to the method. Finally to send some input to the Name edit box, we shall be using the send_keys method and the text to be sent has to be passed as an argument to the method.
Syntax:
driver.find_element_by_name("name").send_keys("Rahul")
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://rahulshettyacademy.com/angularpractice/")
# identify element with name attribute and then send input
driver.find_element_by_name("name").send_keys("Rahul")
Now let us identify the checkbox on the same page by spying on it and analyzing its html code.
Now to locate the checkbox we can use the id attribute which is having exampleCheck1 as value. Selenium shall identify that element with the help of its id attribute by the method find_element_by_id. The value of the id attribute shall be passed as an argument to the method. Finally to select the checkbox, we shall be using the click method.
Syntax:
driver.find_element_by_id("exampleCheck1").click()
Code Implementation:from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://rahulshettyacademy.com/angularpractice/")
# identify checkbox with id attribute and then select
driver.find_element_by_id("exampleCheck1").click()
Thus from the above two elements we have identified, it is important to note that we have made the choice of locator based on the properties defined by the developer for a particular element. For example, for the Name edit box, there is no id property defined, so we have used the name attribute along with find_element_by_name method and for the checkbox, there is an id property defined for the element and so we have used the find_element_by_id method.
There may be elements on the page for which there are no id, class name or name attributes defined by the developer in the HTML code. To identify these kinds of elements we have to use the xpath or css locator. They are frequently used to identify elements by not being dependent on the properties defined for elements by the developer.
One of the rules to construct a css expression is tagname[attribute='value'] and tagname is optional. Now let us try to create a css expression for the Name edit field, it should be input[name='name']. Selenium shall identify that element with the help of css locator by the method find_element_by_css_selector. The css we have created with its attribute shall be passed as an argument to the method.
Syntax:
driver.find_element_by_css_selector("input[name='name']").send_keys("Rah")
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://rahulshettyacademy.com/angularpractice/")
# identify element with css locator and then send input
driver.find_element_by_css_selector("input[name='name']").send_keys("Rah")
After creating a css expression, we can validate if that is correctly identifying the element under the Console tab. We have to use the expression with $("<css expression>"). So for the Name edit box, the expression should be $("input[name='name']"). On hovering over the result returned by the expression after clicking Enter on Console, our desired element gets highlighted.
Notice, once we have written this expression, it returns all the matching elements with respect to that css value and also identifies the Name edit box. Moreover, it shows there contains more than one element with the same css expression. However the Selenium starts scanning from the top left of the screen and identifies the element having the first matching css value.
Please note, the Selenium python methods are all in small letters and separated by _ symbol.
Next let us identify an element with the help of xpath locator which can be created with the help of the properties defined for an element. We shall spy on the Submit button on the same page and analyze its html code.
One of the rules to construct a xpath expression is //tagname[@attribute='value']. Now let us try to create a xpath expression for the Submit button, it should be input[@type='submit']. Selenium shall identify that element with the help of xpath locator by the method find_element_by_xpath. The xpath we have created with its attribute shall be passed as an argument to the method. Finally to click the Submit button, we shall be using the click method.
Syntax:
driver.find_element_by_xpath("input[@type='submit']").click()
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://rahulshettyacademy.com/angularpractice/")
# identify element with css locator and then send input
driver.find_element_by_css_selector("[name='name']").send_keys("Rahul")
# identify element with xpath and then click
driver.find_element_by_xpath("//input[@type='submit']").click()
After creating an xpath expression, we can validate if that is correctly identifying the element under the Console tab. We have to use the expression with $x("<xpath expression>"). So for the Submit button, the expression should be $x("//input[@type='submit']"). On hovering over the result returned by the expression after clicking Enter on Console, our desired element gets highlighted.
Please note, we have not used the class property for the Submit button. It is mostly seen that more than one element can have the same class name on the page, hence it often fails to identify an element uniquely.
Conclusion: Thus we have discussed some of the locators like id, name, css and xpath along with examples. For more details, you can refer to the link:
In the next section we shall discuss how to find xpath and css with Chropath plugin.
Finding elements with Xpath and Css with ChroPath Plugin
There is a plugin available called the ChroPath which will give the xpath or css value of an element automatically. This plugin can be downloaded from the link - https://autonomiq.io/chropath/. Then click on the Add to Chrome button and then restart the browser.
Now select an element on the page, we shall be able to get its xpath or css value automatically under the ChroPath tab.
We can create our own customized xpath or css expression and validate it with the ChroPath. For example, we shall put the css expression input[value='Submit'] for Submit button put it in the ChroPath field.
Please note, it gives 1 matching element along with highlighting the Submit button on the page.
Conclusion: Thus we have discussed how to get xpath and css expression from the ChroPath Plugin. For more details, you can refer to the link:
In the next section we shall discuss how to extract text from a webpage.
Extracting Text from webpage
Now let us identify the success message displayed by clicking the Submit button on the page. We shall spy on it and analyze its html code.
Now to locate the success message Success! The Form has been submitted successfully!. We can use the class attribute which has three values as alert, alert-success and alert-dismissible. Selenium can identify that element with the help of one of the class attribute values by the method find_element_by_class_name. The value of the class attribute shall be passed as an argument to the method. Finally to get the text message, we shall be using the text method.
Syntax:
driver.find_element_by_class_name("alert-success']").text
Code Implementation:from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://rahulshettyacademy.com/angularpractice/")
# identify element with css locator and then send input
driver.find_element_by_css_selector("[name='name']").send_keys("Rahul")
# identify element with name locator and then send input
driver.find_element_by_name("email").send_keys("Shetty")
# identify checkbox with id attribute and then select
driver.find_element_by_id("exampleCheck1").click()
# identify element with xpath and then click
driver.find_element_by_xpath("//input[@type='submit']").click()
# identify element with class name and then get its text
print(driver.find_element_by_class_name("alert-success").text)
Output
The output shows the success message in the banner - Success! The Form has been submitted successfully!.
Now let us identify the success message with the help of css locator. As we have seen that it has a class attribute having a large value as alert alert-success alert-dismissible. We can avoid using this lengthy class property with a subtext of the entire text alert alert-success alert-dismissible. This can be achieved with the help of regular expression. The rule to write css with regular expression is tagname[attribute*='value'].
While constructing css with regular expression we shall use the * symbol. The css expression will be [class*='alert-success']. Please note we have omitted the tagname div from the expression, since tagname is optional for css. We can validate this css in the ChroPath, which shows 1 element matching.
Now let identify the success message with the help of xpath locator. As we have seen that it has a class attribute having a lengthy value as alert alert-success alert-dismissible. We can avoid using this lengthy class property with a subtext of the entire text alert alert-success alert-dismissible. The rule to write xpath expression with subtext is //tagname[contains(@attribute, 'value')]
While constructing xpath we will use the keyword contains. The xpath expression will be //*[contains(@class, 'alert-success')]. Please note we have omitted the tagname div from the expression. Since tagname is optional for xpath and we can use * instead of tagname in the xpath expression. We can validate this xpath in the ChroPath, which shows 1 element matching.
Creating a CSS Selector from Tagname and ID
Now let us see some of the other ways of creating a customized css. The rule to construct a css expression from the id attribute is tagname#ID and tagname is optional. We shall now visit another application from the link, https://login.salesforce.com/.
We shall spy on the Username edit box and analyze its html code.
To create a css expression with id attribute for the Username edit box, the expression shall be input#username.
Creating a CSS Selector from Tagname and Class Name
The rule to construct a css expression from the class attribute is tagname.classname and tagname is optional. We shall spy on the Password edit box and will analyze its html code.
To create a css expression with class attribute for the Password edit box, the expression shall be .password.
Selenium shall identify that element with the help of css locator by the method find_element_by_css_selector. The css we have created with its class attribute shall be passed as an argument to the method. Finally to clear the input from the Password edit box, we shall be using the clear method.
Syntax:
driver.find_element_by_css_selector(".password").clear()
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://login.salesforce.com/")
# identify element with css locator with tagname and id
driver.find_element_by_css_selector("input#username").send_keys("R")
# identify element with css locator with tagname and class name
driver.find_element_by_css_selector(".password").send_keys("Shetty")
# to clear the input text
driver.find_element_by_css_selector(".password").clear()
Conclusion:
Thus we have discussed how to get xpath and css with regular expression. Also we have seen how to construct css expressions from id and class attributes along with tagname. For more details, you can refer to the link:
In the next section we shall discuss how to identify links with text.
Identifying Links with Text
Now let us discuss how to identify links on the page with the help of link text. We shall spy on the link on the page and analyze its html code.
Now to locate the link Forgot Your Password we can use the link text to identify the element. It must be remembered that as per HTML code standards the link of an html code should be enclosed within an anchor tag. Selenium shall identify that element with the help of the matching link text by the method find_element_by_link_text. The complete link text shall be passed as an argument to the method. Finally to click the link, we shall be using the click method.
Syntax:
driver.find_element_by_link_text("Forgot Your Password").click()
Code Implementation:from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://login.salesforce.com/")
# identify element with css locator with tagname and id
driver.find_element_by_css_selector("input#username").send_keys("R")
# identify element with css locator with tagname and class name
driver.find_element_by_css_selector(".password").send_keys("Shetty")
# to clear the input text
driver.find_element_by_css_selector(".password").clear()
# identify element with link text
driver.find_element_by_link_text("Forgot Your Password").click()
Please note, the method find_element_by_link_text works only with element having the anchor tag. Apart from this method, there is a method called the find_element_by_partial_link_text. This method identifies a link by partially matching with the link text on the page.
Creating Xpath based on text
Next let us identify an element based on the text visible on the page irrespective of any tagname with the help of xpath locator. We shall spy on the element on the page and analyze its html code.
One of the rules to construct a xpath expression from the visible text is //tagname[text()='value']. While constructing xpath with text we shall use the function text(). Now let us create a xpath expression for the Cancel button, it should be //a[text='Cancel']. Selenium shall identify that element with the help of xpath locator by the method find_element_by_xpath. The xpath we have created with the visible text shall be passed as an argument to the method. Finally to click the Cancel button, we shall be using the click method.
Syntax:
driver.find_element_by_xpath("//a[text='Cancel']").click()
Code Implementation:
from selenium import webdriver
# setting the path of chromedriver.exe
driver = webdriver.Chrome(executable_path="C:\\chromedriver.exe")
# get method to hit URL on browser
driver.get("https://login.salesforce.com/")
# identify element with css locator with tagname and id
driver.find_element_by_css_selector("input#username").send_keys("R")
# identify element with css locator with tagname and class name
driver.find_element_by_css_selector(".password").send_keys("Shetty")
# to clear the input text
driver.find_element_by_css_selector(".password").clear()
# identify element with link text
driver.find_element_by_link_text("Forgot Your Password").click()
# identify element with text() function in xpath
driver.find_element_by_xpath("//a[text()='Cancel']").click()
Please note, the creation of xpath with the help of text is not recommended for elements who have dynamic text visible on the page.
Conclusion: Thus we have discussed how to identify links with link text. Also we have seen how to construct xpath expressions with the visible text on the page. For more details, you can refer to the link:
In the next section we shall discuss how to build css and xpath expressions from parent child traversal.
Creating a CSS and Xpath Selector by traversing tags
Now let us identify an element by traversing tags. We shall spy on the element on the page and analyze its html code.
We can see that the Username has a label tagname with some attributes. Let us assume that all the values of its attributes are dynamic in nature and they are changing after each page load. In this situation, we have to take the help of its parent tag div. It is considered as the parent tag for the label tag, since on expanding div tag, the label tag gets visible and on collapsing the label tag gets hidden.
The rule to construct an xpath expression by traversing from parent to child tag is Parent Tag/Child tag. Here, we shall first identify the parent element with xpath expression //div[@id='usernamegroup']. Next to identify the child with tagname label, the xpath expression shall be //div[@id='usernamegroup']/label. We can validate this xpath in the ChroPath, which shows 1 element matching.
The rule to construct a css expression by traversing from parent to child tag is Parent Tag Child tag. First of all, we shall identify the parent element with css expression div[id='usernamegroup']. Next to identify the child with tagname label, the xpath expression shall be div[id='usernamegroup'] label.
Creating a CSS and Xpath Selector by traversing to nth child
Now let us assume that the immediate parent element of the Username label is also dynamic and it is getting changed after each page load. In this scenario, we will be able to identify the label Username with the help of its grandparent tag which is the form tag.
First of all we shall identify the grandparent element with the help of the xpath expression //form[@name='login']. This element has multiple children having the div tag. To locate the first child we shall use the index represented by [1]. To finally identify the label Username, the xpath expression will be //form[@name='login']/div[1]/label. We can validate this xpath in the ChroPath, which shows 1 element matching.
Now let us identify the element Password on the same page. We shall spy on the element on the page and analyze its html code.
The rule to construct a css expression by traversing to nth child is Tagname: nth-child(n). To finally identify the label Password, the css expression will be form[name='login'] label:nth-child(3). We can validate this css in the ChroPath, which shows 1 element matching.
Conclusion:
Thus we have discussed how to build css and xpath expressions from parent child traversal and also how to determine the nth child. For more details, you can refer to the links:
In the next post, we shall discuss different Python APIs and techniques to automate web elements.