Grab Deal : Flat 30% off on live classes + 2 free self-paced courses! - SCHEDULE CALL

- Selenium Blogs -

Learn How To Handle Different Webelements in Selenium



Introduction

I hope you have done some exercise with Browser and Navigation Webdriver commands. Did you find it interesting? Are you excited to learn more about Webelement Commands? But before that, you should know about WebElement because as WebMethod is always applying on a WebElement.I have told you this earlier what is a WebElement.

In this tutorial, I will explain to you in detail how you can find or recognize your different WebElement on WebPage.

What is WebElement in Selenium

A WebElement represents an HTML element. As you know a website code is written in the combination of HTML code to represent an Element like Text Box, Radio Button, Button, Labels Link or number of Element which you can see and perform the action on any website.

HTML  elements always have a start tag and an end tag and content between these two tags or combination of number of attributes.

content

Or  attribute=value, attribute2=value………. Example :

Learn QA Software Testing in the Easiest Way

  • Learn from the videos
  • Learn anytime anywhere
  • Pocket-friendly mode of learning
  • Complimentary eBook available

 

List of WebMethods used in Selenium

Different Type of WebElement :

On a WebPage, you can see the number of different WebElement. I will explain how you can find the WebElement. I have already explained different types of locators. Now I will explain How to identify and handle these WebElement. But before moving to it you should know how to locate an element in selenium.

FindElement And FindElements:

Selenium Webdriver has 2 methods for accessing WebElement.

1. Find Element: This is a way to find or locate the element from DOM. This is used to locate a single WebElement.It does take By type argument and return a WebElement.

WebDriver Method:

Syntex :

WebElement select =driver.findElement(By.name("birthday_day"));

Learn How To Handle Different Webelements

b) Find Elements: This is another way to find the element from DOM. This is used to locate several similar WebElements. It does take a By type argument and return a list of WebElements.

WeDriver Method:

Syntex : List list=driver.findElements(By.name("lastname"));

Handling Different WebElement:

Handle Browser or Multiple Windows : As you have seen in my previous blog in which I have explained Browser and Navigation Commands. While you perform a click command on a link then a separate window is open. To handle multiple browser window Selenium provides 2 methods

getWindowHandle() method returns a string value and returns the window handle of the currently focused browser window whereas getWindowHandles() returns the set of Strings of all window handles which are currently open in the same session.

To perform an action on all open windows you have to switch to another window by using the switchTo method. By default, the focus is on the current window which is known as Parent Window. To switch on child window use the below method

WebDriver.SwitchTo().window(String windowHandle);

Let us do some practice exercises to understand this concept.

Scenario: Open a webpage and click on a 2-3 link which opens in a new window. Switch to all windows and get the title and verify it with the expected title and come back to the Parent window.

Steps need to follow:

  1. Open Facebook.com in chrome browser
  2. Click on  Terms, Data Policy, and Cookie Policy.
  3. Switch to the Terms page and get the title.
  4. Now switch to Data Policy page and get the title
  5. Last switch to Cookie Policy page and get the title
  6. Now come to the parent window and display the title.
  7. Close all open windows
     

Learn How To Handle Different Webelements

When the script runs then below 4 windows opens.

Output of the script

Learn How To Handle Different Webelements

Handle Edit/Text Box:

Edit box is similar to the text Box. A Edit box is used to enter details like First Name, Last Name and get the text to verify the data.

WebMethod Used:

WebElement on Web Page

Code Snippet :

Here you can see that (type=text) which represents this Web element is a Text Box. Here 

  • The clear method is used to clear the value if there is some value already present else it will append the data with newly entered data so it is better to always use clear command before entering a new value in the edit text box.
  • SendKeys method is used to enter new values in the edit text box.
  • The getText method is used to get the value from the edit text box.

Handle Text Area, Error Message, Window Dialog

Similar to the Edit box, Text Area is also used to enter some text but the difference is that when there is a need to enter a large description then you can see Text Area on a WebPage. Mostly on the screen, you have seen Description Box, Comment box, Note box so all these are identified by Text Area.

Example: On Naukri.com, you have seen the Profile Summary section that is Text Area, not Edit box. In the Text Area, you entered the text in detail but an Edit box is just for small information.

WebMethod Used:

WebElement on Web Page :

Code Snippet for Text Area

Code Snippet for Text Area:


Here you can see that textarea tag which represents TextArea WebElement.

Handle Error Message :

When you enter some invalid data in any type of box then Application throws an error message which can be a predefined error message or Server exception. But in Some test cases, it is mandatory to verify the error message. So Selenium also provides a method so that you can get that error message text and verify it with a predefined message.

WebMethod Used:

This method stores the text in a String value and then Expected and Actual Result can be verified.

WebElement on WebPage:

Code Snippet :

Please enter your Email ID / Username

Handle Web Based and Window Based Popup window:

You have seen multiple time Alert Window or Window based popup. When you perform some action on your application there might be a popup window open. It depends on which action you  are performing

Example of Web Based Window (Alert): If you are adding or deleting any parameter or detail from your application then An alert window might open. Alert window confirms from you before taking an action. It is having OK and Cancel Button. So by Mistake if you click on the delete button and you don't want to perform then it prevents you.

WebElement on Web Page:

WebElement on Web Page

Example of Window Based Popup: If you want to export or import or upload any files from your application to your local system then Window Based pop up generated.

Learn How To Handle Different Webelements

Handle Button:

The button is a very important Webelement of any application. If you enter all details but you don't submit it then there is not any benefit to enter the detail.

WebElement method use:

If WebElement tag name is button and type =”submit”  then you can use submit or click both else you have to use only click to submit 

WebElement on Webpage:

QA Software Testing Training

  • Personalized Free Consultation
  • Access to Our Learning Management System
  • Access to Our Course Curriculum
  • Be a Part of Our Free Demo Class

 Code Snippet: 

Here you can see type=submit which represent a button WebElement 

Handle Image:

Image is any Picture on any webpage. It can be a logo on your webpage. If you click the image then it refreshes your webpage and redirects to the Home page. Either CSS or XPath you can use to locate this web element.

WebMethod used

WebElement on WebPage:

WebElement on WebPage:

Code Snippet: 

Web Method Used

WebElement on WebPage:

WebElement on WebPage:

Code Snippet for WebElement:

Forgotten account?

As you can see that a Hyperlink is identified by anchor tag. And the text which is shown on the Webpage is always enclosed between these tags like Forgotten account? . So a Link can be identified which is a very famous interview question also.

QA Software Testing Training

  • Detailed Coverage
  • Best-in-class Content
  • Prepared by Industry leaders
  • Latest Technology Covered

Handling Radio Button: Radio Button WebElement is used to choose an option from the number of given options. You can select only one radio button from the option given. It is always accessed from the click Web Method.

Web Method Used

WebElement on Page:

WebElement on WebPage:

Code Snippet for WebElement

Here you can see type= Radio which represents that this is a Radio WebElement. So you can choose any Radio Button by selecting any one.

Handling CheckBox: Before submitting any form have you ever noticed? There is always a checkbox for accepting Terms and conditions. So I think you have got the idea of how important this WebElement is important. So Similar to this in Test Script you should know about How to Handle this. How to toggle this webelement. Checkbox WeElement is applied on webpage where the same action needs to perform on a single click. You have seen many times Option provide to select multiple like delete messages/mail.

WebMethod Use:

WebElement on Web Page

LIke in Gmail there are checkbox provide on each mail s so that user can perform action on multiple mail

Code Snippet

Here you can see that role=checkbox which represents that this is a checkbox webelement. You can select multiple checkboxes and perform the action in one click. Also to check that if a checkbox is selected or not Selenium provides a method (isSelected) to verify it. Its return value is boolean.

QA Software Testing Training

  • No cost for a Demo Class
  • Industry Expert as your Trainer
  • Available as per your schedule
  • Customer Support Available

Handle Drop Down:  Dropdown WebElement is used to select some value from the predefined data. There is a different way to handle Drop Down. Selenium provides a Select class which is used to select and deselect the value from this dropdown. You need to create the object of the Select class by passing the dropdown webElement as a parameter to its constructor. The number of times you have used the drop-down on a webpage to select a value.

WebElement on Webpage

WebElement on WebPage:

Code Snippet

So here you can see that number of option tag which are enclosed between Select tag. There might be some drop down not starting with a select tag so in that case, you can not use the select class. It is known as Bootstrap dropdown. I will explain this in detail later.

Method Used with Select class.

WebElement on WebPage:

fbicons FaceBook twitterTwitter google+Google+ lingedinLinkedIn pinterest Pinterest emailEmail

     Logo

    JanBask Training

    A dynamic, highly professional, and a global online training course provider committed to propelling the next generation of technology learners with a whole new way of training experience.


  • fb-15
  • twitter-15
  • linkedin-15

Comments

Trending Courses

Cyber Security Course

Cyber Security

  • Introduction to cybersecurity
  • Cryptography and Secure Communication 
  • Cloud Computing Architectural Framework
  • Security Architectures and Models
Cyber Security Course

Upcoming Class

0 day 29 Mar 2024

QA Course

QA

  • Introduction and Software Testing
  • Software Test Life Cycle
  • Automation Testing and API Testing
  • Selenium framework development using Testing
QA Course

Upcoming Class

0 day 29 Mar 2024

Salesforce Course

Salesforce

  • Salesforce Configuration Introduction
  • Security & Automation Process
  • Sales & Service Cloud
  • Apex Programming, SOQL & SOSL
Salesforce Course

Upcoming Class

-1 day 28 Mar 2024

Business Analyst Course

Business Analyst

  • BA & Stakeholders Overview
  • BPMN, Requirement Elicitation
  • BA Tools & Design Documents
  • Enterprise Analysis, Agile & Scrum
Business Analyst Course

Upcoming Class

0 day 29 Mar 2024

MS SQL Server Course

MS SQL Server

  • Introduction & Database Query
  • Programming, Indexes & System Functions
  • SSIS Package Development Procedures
  • SSRS Report Design
MS SQL Server Course

Upcoming Class

7 days 05 Apr 2024

Data Science Course

Data Science

  • Data Science Introduction
  • Hadoop and Spark Overview
  • Python & Intro to R Programming
  • Machine Learning
Data Science Course

Upcoming Class

0 day 29 Mar 2024

DevOps Course

DevOps

  • Intro to DevOps
  • GIT and Maven
  • Jenkins & Ansible
  • Docker and Cloud Computing
DevOps Course

Upcoming Class

7 days 05 Apr 2024

Hadoop Course

Hadoop

  • Architecture, HDFS & MapReduce
  • Unix Shell & Apache Pig Installation
  • HIVE Installation & User-Defined Functions
  • SQOOP & Hbase Installation
Hadoop Course

Upcoming Class

0 day 29 Mar 2024

Python Course

Python

  • Features of Python
  • Python Editors and IDEs
  • Data types and Variables
  • Python File Operation
Python Course

Upcoming Class

7 days 05 Apr 2024

Artificial Intelligence Course

Artificial Intelligence

  • Components of AI
  • Categories of Machine Learning
  • Recurrent Neural Networks
  • Recurrent Neural Networks
Artificial Intelligence Course

Upcoming Class

8 days 06 Apr 2024

Machine Learning Course

Machine Learning

  • Introduction to Machine Learning & Python
  • Machine Learning: Supervised Learning
  • Machine Learning: Unsupervised Learning
Machine Learning Course

Upcoming Class

21 days 19 Apr 2024

 Tableau Course

Tableau

  • Introduction to Tableau Desktop
  • Data Transformation Methods
  • Configuring tableau server
  • Integration with R & Hadoop
 Tableau Course

Upcoming Class

7 days 05 Apr 2024

Search Posts

Reset

Receive Latest Materials and Offers on Selenium Course

Interviews