May 04, 2020 
5.6k
30
DecChristmas Special : Upto 40% OFF! + 2 free courses - SCHEDULE CALL
- Selenium Blogs -
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.
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.
Or attribute=value, attribute2=value………. Example :
What are different WebElement WebMethod:
Selenium provides several different WebMethod which are used to perform the action on a WebElement. Like Click on an Element, Enter text on Element, verify the element is visible on-page. I will mention the different WebMethods used on different WebLement.
Learn QA Software Testing in the Easiest Way
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.
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"));
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"));
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:
When the script runs then below 4 windows opens.
Output of the script
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
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:
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
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:
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.
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
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:
Code Snippet: Web Method Used
WebElement on WebPage:
Code Snippet for WebElement:
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
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:
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
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
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.
FaceBook
Twitter
LinkedIn
Pinterest
Email
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.
Cyber Security
QA
Salesforce
Business Analyst
MS SQL Server
Data Science
DevOps
Hadoop
Python
Artificial Intelligence
Machine Learning
Tableau
Search Posts
Related Posts
The Complete Insights on Automation Tester Salary: Let's Look at the Data
10.6k
Selenium WebDriver Architecture you Need to Know
8k
Ultimate Selenium Testing Tutorials For Beginners & Professionals (With Career Path)
2.5k
Selenium Tutorial By Industry Experts
846.5k
What is Selenium Grid? Selenium Grid Tutorials for Beginners
620.8k
Receive Latest Materials and Offers on Selenium Course
Interviews
May 13, 2024
10.6k
