Handle Web Elements

In previous tutorial, we have learnt about the installation of Python and configuring with PyCharm, how to install Selenium packages in the PyCharm and how to write our first selenium code in Python. We have opened the Facebook page in chrome browsers and printed the page title in Terminal. Now in this section we will discuss more on how to handle web elements in selenium with Python.

Objective:

  • Introduction
  • Handle Web Element with id
  • Introduction
  • Handle Web Element with id
  • Handle Web Element with name
  • Handling Web Element with class Name
  • Handle Web Element with XPath
  • Handling Web Element with CSS Selector
  • Handle Web Element with Link Text
  • Handling Web Element with Partial Link Text
  • Handle Web Element with Tag name

If you want to learn more about the location strategy on selenium, what all the web elements can be handled with selenium, then click this link (“https://www.testinglpoint.com/locating-strategy/  ”) and resume here after completion.

We know that there are 9 locators available in selenium. e.g.

  • ID
  • Class
  • Name
  • Class Name
  • CSS Selector
  • XPath
  • Link Text
  • Partial Link Text
  • Tag Name

Handle Web Element with id:

ID is known as unique id which is preceded by #. One thing you can think that from where you can find the ID Element. Yes, by inspect element of the webpage you will able to see HTML code of that page. You can see the Id in following way in inspect element.

The main advantage of using ID locator is the uniqueness. ID is supposed to be unique and there are no chance of finding several element. But this will work perfect if you have the fixed ID in you web page. If your ID is changing or generate dynamically then this locator strategy will not be a good option.

<html>
  <body>
    <form>
      User Name: <input id= “name” name="username" type="text"/>
      Password: <input name="password" type="password"/>
      <input name="submit" type="submit" value="Proceed!"/>
    </form>
  </body>
</html>

Now Let’ have a look on the below Example.

Example:

from selenium import webdriver


driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element_by_id("email").send_keys("XXXXX@gmail.com	")
driver.find_element_by_id("pass").send_keys("XXXXX")

Explanation:

From the above code you can notice that to handle Web Element “ID” we need to use method named “find_element_by_id”. It will accept the parameter which is the name of the id of the web element.

There is another way to find the element of id as below.  

from selenium import webdriver


driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element(By.ID, "email").send_keys("XXXXX@gmail.com	")
driver.find_element(By.ID,"pass").send_keys("XXXXX")

Handle Web Element with name:

<form>
  Name: <input type="text" name="name"><br>
  Email: <input type="text" name="email"><br>
  <input type="submit" value="Submit">
</form>

From the above code, you can notice that the attribute “name” is attached to <input> tag. That means you can use this name attribute to find the element of the web page. This strategy following the Attribute-Based locator strategy. Let’s understand the below code.

Syntax:

driver.find_element_by_name("Value of name attribute")
from selenium import webdriver

driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element_by_name("email").").send_keys("XXXXX@gmail.com")
driver.find_element_by_name ("pass").send_keys("XXXXX")

There is another way to find the element of Name as below.  

from selenium import webdriver

driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element(By.NAME,"email").").send_keys("XXXXX@gmail.com")
driver.find_element(By.NAME,"pass").send_keys("XXXXX")

Handle Web Element with class name:

Class Name is the attribute of the HTML tag. This is generally noted by .(dot). You can locate web element by searching the class name. See the below syntax for Locating strategy for Class Name.

Syntax:

driver.find_element_by_class_name("Value of name attribute")
from selenium import webdriver


driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element_by_class_name("email").").send_keys("XXXXX@gmail.com")
driver.find_element_by_class_name("pass").send_keys("XXXXX")

Handle Web Element with XPath:

XPath is the standard for navigation tool for XML. We know that HTML is an XML document (xHTML). So you can use XPath to locate the HTML. See the below syntax.

To know more about XPath Locator, follow this link <https://www.testinglpoint.com/xpath-in-selenium/>.

Syntax:

driver.find_element_by_xpath(“XPath of the element”))
from selenium import webdriver


driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element_by_xpath("email").send_keys("XXXXX@gmail.com")
driver.find_element_by_xpath("pass").send_keys("XXXXX")

Handle Web Element with Class Selector:

CSS Selector is the most popular locator strategy. Because this can be traversed through attribute and structure of the web page and also this is very optimized locator strategy.

CSS stands for Cascading Style Sheet. This is described the look and formatting of the document written in HTML. This identifies the element based on the tags, id and attributes.

The main advantage of CSS Selector is this is faster than other locators and widely used. This supports both structure and attribute based locators. But this is complex and require deeper learning on the HTML code.

CSS Selector mostly follow the below modes to locate and web element.

  • Tag and ID 
  • Tag and Class 
  • Sub String Matches 
  • Tag and Attribute
  • Tag, Class, Attribute

Syntax:

driver.find_element_by_css_selector("CSS Selector code")
from selenium import webdriver


driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element_by_css_selector("email").").send_keys("XXXXX@gmail.com")
driver.find_element_by_css_selector("pass").send_keys("XXXXX")

Handle Web Element with Link Text:

Another important locating strategy of selenium is Link Text. See the below code.

Syntax:

driver.find_element_by_link_text ("Value of name attribute")

By this method you can search an element of the webpage by searching its Link Text. This is intended to select links only and anchor element. One of the major advantages of this locator is this is very useful when you are working with navigation Testing. But you have to know the text of the link before starting testing, which is the disadvantage of Link Text Locator.

from selenium import webdriver


driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element_by_link_text("email").").send_keys("XXXXX@gmail.com")
driver.find_element_by_link_text("pass").send_keys("XXXXX")

Handle Web Element with Partial Link Text:

Same as previous section, locating strategy by Link Text, Partial Link Text also deals with the Text if the link. But only difference is this can select the element with partially matching with the specified link text. See below code:

Syntax:

driver.find_element_by_partial_link_text("Value of name attribute")
from selenium import webdriver


driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element_by_partial_link_text("email").").send_keys("XXXXX@gmail.com")
driver.find_element_by_partial_link_text("pass").send_keys("XXXXX")

Handle Web Element with Tag Name:

What is Tag?

Yes. Tag is the formatting command of the Web Page. This is the heart of the HTML page design. HTML tags include tag for table, tag for input text, tag for paragraph, tags for heading, tag for titles etc. This is enclose by  < > and come in pair to specifying beginning and ending.

Now you are clear what is Tag. How you will traverse through Tag to locate an element of the web page.

See the below code.

Syntax:

driver.find_element_by_tag_name("Value of name attribute")
from selenium import webdriver


driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element_by_tag_name("email").").send_keys("XXXXX@gmail.com")
driver.find_element_by_tag_name("pass").send_keys("XXXXX")

Handle Web Element with find_element():

From the previous section, we have discussed several methods for several web element handlers like ID, Class, Class name, CSS Selector, Tag Name, Link Text, Partial Link Text, XPath etc. But there is another method called find_element() which can support all above web element handlers.

Let’s discuss on this with an Example.

from selenium.webdriver.common.by import By

driver = webdriver.Chrome(executable_path="F:\\Selenium_Python\\chromedriver.exe")
 
driver.get("https://www.facebook.com/")
print(driver.title)

driver.find_element(By.ID, 'email').send_keys("XX@gmail.com")
driver.find_element(By.ID, 'pass').send_keys("XXXXXXXXXX")
driver.find_element_by_name("login").click()

Explanation:

From the above example you can notice that we have used find_element() which takes 2 parameter. One is By.[Name of the handler] and other is the value of the web handler. Here as we are locating the element through the ID, we are taking 2 parameter as By.ID and ID of the element. By is not imported bydefault. You need to import from the selenium package.

from selenium.webdriver.common.by import By

Leave a Reply

Your email address will not be published. Required fields are marked *