Web Elements and Element Locators

Web Elements and Element Locators
 

i) Web Elements

ii) Element Locators
---------------------------------------
i) Web Elements
Browser
Page
-----------------
Edit Box
Link
Button
Image, Image Link, Image Button
Text box
Text Area
Check box
Radio Button
Drop down box
List box
Combo box
Web table /HTML table
Frame
-----------------------------------
1) Operations on Browser
> Launch the browser,
> Navigate to particular web page,
> Close focused Browser
> Close all Browsers that opened by WebDriver during execution
---------------
> Navigate from one URL to another
> Navigate back to previous URL
> Navigate forward
> Refresh the Browser
> Maximize the Browser
Etc...
-----------------------------------
2) Operations on Web Page
> Get Page Title
> Get Page URL
-----------------------------------
3) Operations on Edit box

> Enter a Value,
> Clear the Value,
> Check enabled status,
> Check edit box existence,
> Get the value etc...
-----------------------------------
4) Operations on Link

> Click Link,
> Check the link existence,
> Check the link enabled status,
> Return the Link Name
Etc...
-----------------------------------
5) Operations on Button

> Click
> Check Enabled status
> Display status
Etc...
-----------------------------------
6) Operations Image

Three types of Image elements in Web Environment

a) General Image (No functionality)

b) Image Button (Submits)

c) Image Link (Redirects to another page/location)
-----------------------------------
7) Operations on Text Area

> Return / Capture Text Area or Error message from a web page
-----------------------------------
8) Operations on Check box

> Check if the check box is displayed or not?
> Check if the check box is enabled or not?
> Check if the check box is Selected or not?
> Select the Check box
> Unselect the Check box
-----------------------------------
9) Operations on Radio Button

> Select Radio Button
> Verify if the Radio Button is Displayed or not?
> Verify if the Radio Button is enabled or not?
> Verify if the Radio Button is Selected or not?
------------------------------------
10) Operations on Drop down box

> Check the Drop down box existence
> Check if the Drop down is enabled or not?
> Select an item
> Items Count
-----------------------------------
11) Operations on List box

12) Operations on Combo box
-----------------------------------
13) Operations on Web table /HTML Table

> Get cell value
> Rows Count
> Cells Count Etc...
-----------------------------------
14) Operations on Frame
-----------------------------------
> Switch from Top window to a frame
> Switch from a frame to Top window
Etc...
----------------------------------------------
ii) Element Locators
What is Locator?

> Locator is an address that identifies a web element uniquely within the webpage. Locators are the HTML properties of a web element.

Selenium WebDriver uses 8 element locators

id,

name,

className,

tagName,

linkText,

partialLinkText,

cssSelector,

xpath

to find elements on Web pages.

Why we need to use different locators?

1) Developers may not provide all locators for all elements

2) Some locators may be duplicated.

So we have to choose any one unique locator to recognize the element.

How to inspect elements?

Download and install Firebug and Firepath plug ins/Add ons for Firefox Browser.

If it Internet Explorer or Chrome, we no need to install any Add on, they provide built -in Developer Tools (F12) to inspect elements.

Element Locators are common for all Browsers.
-----------------------------------------
1) id

Syntax:

By.id("id value")

Examples:

driver.findElement(By.id("Email"))

driver- is Object

findElement - WebDriver method

By - pre-defined Class

id - Element locater

Email - id locator value
-------------------------------------
driver.findElement(By.id("Email")).sendKeys("gcrindia");
--------------------------------------------
Or

WebElement Email = driver.findElement(By.id("Email"));
Email.sendKeys("gcrindia");
-------------------------------------------
id locator for Button

WebElement Email = driver.findElement(By.id("signIn"));
Email.click();

Or

driver.findElement(By.id("signIn")).click();
-------------------------------------------------------
2) name

Synatx:

By.name("name value/locator name")      

Examples:

driver.findElement(By.name("Email")).sendKeys("gcrindia");
      
Or

WebElement e = driver.findElement(By.name("Email"));
e.sendKeys("gcrindia");
------------------------------------------
WebElement e = driver.findElement(By.name("signIn"));
e.click();
------------------------------------------
3) className

Syntax: By.className("class name value")

Example:

driver.findElement(By.className("textboxcolor")).sendKeys("Hyderabad");
----------------------------------------------
4) tagName

Syntax:
By.tagName("tag name value")

Example:
driver.findElement(By.tagName("input")).sendKeys("Hyderabad");
--------------------------------------------------------------      
5) linkText

Syntax:
By.linkText("Link Text Value")

Example:

driver.findElement(By.linkText("Gmail")).click();
-----------------------------------------------------              
6) paritialLinkText

Syntax:
By.partialLinkText("Partial Link Text Value")

Example:

driver.findElement(By.partialLinkText("Gma")).click();
-----------------------------------------------
7) cssSelector
Syntax:
By.cssSelector("value")

Example:
driver.findElement(By.cssSelector(".gb_m")).click();
---------------------------------------------------
8) xpath
Xpath in XML document shows the direction of software web application's element location.

Syntax:

By.xpath("xpath value")

driver.findElement(By.xpath(".//*[@id='Email']")).sendKeys("abcdef");
------------------------------------------------------------------------------

0 comments:

Post a Comment