Identifying Elements in Selenium (WebDriver) Selenium IDE + Firebug +Inspect element

Object identification is a very crucial part of any automation effort be it in QTP, selenium or any other tool for that matter. So it makes it very important for each one of the automation folks around to be able to identify the objects used in the automation effort

Identifying Objects is Selenium (WebDriver) is pretty simple if you are working on an application built on Firefox, but it gets very tricky if you are working on IE application. So it would be best to master the object identification techniques.

If you have used the Selenium IDE for any recording you would have noticed that there are multiple ways of identifying an object. By default the Selenium IDE tries to recognize the object by the ID or name attribute. Selenium IDE identifies the objects by the attributes mentioned in the order below

v  ID

v  Name

v  CSS Selector

v  Xpath – Attributes

v  Xpath – Relative

v  Xpath – Absolute or Position

Let’s take Google page (I am launching Google on Firefox) for example –

I record a simple step of clicking on the “Google Search” button on the home page. If you can convert the recorded test step to Java – JUnit 4 – WebDriver (Options -> Format -> JUnit 4 – WebDriver), the code for clicking the “Google Search” button using ID attribute would look like this -

                   

driver.findElement(By.id("gbqfba")).click();

Similarly for name

             

driver.findElement(By.name("btnK")).click();

For cssSelector

driver.findElement(By.cssSelector("#gbqfba")).click();

For Xpath Attributes

driver.findElement(By.xpath("//button[@id='gbqfba']")).click();

For Xpath Relative

driver.findElement(By.xpath("//div[@id='gbqfbwa']/button")).click();

For Xpath Position / Absolute   

driver.findElement(By.xpath("//div[2]/button")).click();

If you prefer not to use the Selenium IDE, you can use Firebug to achieve the same result

Looking at the HTML code for the “Google Search” button -

<button class="gbqfba" name="btnK" aria-label="Google Search" id="gbqfba"><span id="gbqfsa">Google Search</span></button>

It is pretty obvious that object “Google Search” can be identified using either ID or the Nameattribute. If for any reason you want to use Xpath you can right click on the html code and copy the Xpath.

Doing this on IE will be slightly different, you will use the IE developer tool bar to achieve the same result. 

For identifying Links of the application you may choose to use “linkText” or “partialLinkText”

Eq –

          driver.findElement(By.linkText("Selenium - Web Browser Automation")).click();

driver.findElement(By.partialLinkText("Selenium - Web")).click();

For identifying List boxes we can use the ID, Name etc but for one additional attribute. After identifying the list box we need to specify what value needs to be selected from that list. This can be achieved through 3 ways –

selectByVisibleText

new Select(driver.findElement(By.id("mm"))).selectByVisibleText("January");

selectByIndex

            new Select(driver.findElement(By.id("gender"))).selectByIndex(1);

selectByVisibleText

new Select(driver.findElement(By.id("language"))).selectByVisibleText("español");