Understanding WebElement Commands
After the website opens up there are things that we do with various visible elements on the web page – TextBox, Password Fields, Menus, RadioButtons, CheckBoxes, Dropdowns etc.
Every single controls present on the page is called a WebElement. Each of WebElement is represented in selenium by WebElement interface.
In this tutorial we are going to focus on interacting with most commonly found WebElements on a page.
Please Note: WebElement interface is used to interact with both visible and invisible elements present on a page. We’ll cover in a short while what invisible members are.
This screenshot shows Firefox browser and 6 key browser operations we may need to perform in automation.
WebElement and HTML Knowledge
An element on a web page that we see as a TextBox with some value;
is actually the following line of HTML code for browser.
and interestingly every element of WebPage follows this common code pattern of writing it
<tagName attribute1=”value1″ attribute2=”value2″ />
<tagName attribute1=”value1″ attribute2=”value2″>Some Inner Text </tagName>
So, in previous example tagName is input; and we can identify attributes easily now.
Going forward, Concepts like – TagName, Attributes, Inner HTML, Outer HTML (which is Start Tag + Inner Text + End Tag) will be used frequently in all our tutorials.
Getting WebElement Object
In Code, before we can call any of the methods on WebElement object; We should have a way to obtain the object.
Logically seeing, In order to click a button on a webpage; We must open browser, go to webpage, find the button we want to click and then perform the click.
We’ll cover findElement command in next tutorial. So here we’ll do just the needful, understanding how to get a WebElement object using WebDriver object.
Let’s take example of text box in previous section and see how we can get a WebElement corresponding to it.
// Finding Element By ID WebElement txtUserName = driver.findElement(By.id("un")); // Finding Element by Name WebElement txtUserName = driver.findElement(By.name("userName"));
One we get an object of WebElement; Using following methods, we can programmatically interact with the web Element.
// HTML Related Methods public String getAttribute(String attributeName); // Returns value of specified attribute for the given element. public String getText(); // Returns the value of inner text for the given element public String getTagName(); // Returns HTML TagName in source code for this page element control. public String getCssValue(String cssPropertyName); // Returns the value of a predefined cssProperty value applied to this WebElement // Positioning Related Methods public Point getLocation(); // Returns the Point object that contains x and y coordinates for the element in the browser window public Dimension getSize(); // Returns Dimension object that contains width and height for the element in the browser window // Interaction Related Methods public void clear(); // Typically works with Input and TextArea to clear off the text written in there. public void sendKeys(CharSequence keysToSend); // Sends keyboard key combinations to Input and TextArea tags mainly public void click(); // Performs a mouse click on an element public void submit(); // Typically works on element that are part of a web form, calling this method causes form data to be sent to the web server. // Query Related Methods public boolean isEnabled(); // Typically used with INPUT html element to check if the element is ready to take user input. public boolean isSelected(); // Typically used with RadioButton, CheckBox and DropDown controls public boolean isDisplayed(); // On dynamic pages some elements are present in HTML Code but aren't visible to the user. This method returns of element is displayed or not.
Exercise – 1
Open and Fill Facebook Signup Page (Leave DropDowns for now)
Exercise – 2
Open Google Home Page, Type In Query Being Zero and Submit the Query
- Using Click Button
- Using Submit Method on Search Box.
Exercise – 3
Open Being Zero, Find the Image of Company Logo on top Left Corner; Print Location and Size of the Image.
HINT: Use By.xpath(“//*[@id=’branding’]//img”);
XPath will be covered in upcoming tutorials.