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.
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
- 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"));
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:
- Open Facebook.com in chrome browser
- Click on Terms, Data Policy, and Cookie Policy.
- Switch to the Terms page and get the title.
- Now switch to Data Policy page and get the title
- Last switch to Cookie Policy page and get the title
- Now come to the parent window and display the title.
- Close all open windows
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
- 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:
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:
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
- 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:
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
- 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:
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
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.
Upcoming Class : September 22
