Locating Web Elements in Selenium Webdriver PART 3

Locate Elements By CSS Selectors in Selenium Webdriver

Till now we have covered locating elements through Id and Xpath in my earlier blogs. Now lets get into for cssSelector. The way of finding css selector is almost same as xpath.

Lets consider the same piece of html code which we found through Firebug for Email field of Gmail.

<input id="Email" class="" type="email" spellcheck="false" value="" placeholder="Email" name="Email">

Here we can write css like: “input[id='Email']”

So, the code will look like below.

driver.findElement(By.cssSelector("input[id='Email']"));

So, this is the manual way to write css. But there are several ways to get css as well.

Steps to Find CssSelector:

Step 1: Install Firepath, which is an Add-on for firefox browser.

Step 2: Open the testing site in Firefox (say we have opened “https:// www.gmail.com”)

Step 3: Lauch Firebug, go to Firepath tab, then from drop-down select css and start inspecting elements.

Step 4: Move mouse to the field/button/link for which you want to locate, then click (say 'Email' field)

Step 5: In Firepath, we can see the css for that particular field.

See the screen shot below.

Here we found css as “#Email”

Now our piece of code will look like below.

driver.findElement(By.cssSelector("#Email"));

Apart from this, we have some other way of finding css path. Like in my 

earlier blog, we saw for xpath. In same way, we can find for css path as well.

Through firebug, after inspecting element, we can right click there, it will show to copy css path there.

See screen shot below.

Also through Selenium IDE also, after recording, we can view the target. There also we can find the css path as well.

See screen shot below.

Now let see the code to Enter Email/Password and click submit button in Gmail using cssSelector.

Public static void main(String[] args) {

WebDriver driver = new FirefoxDriver();

driver.get("https://www.gmail.com/");

driver.findElement(By.cssSelector("#Email")).sendKeys("Testuser");

driver.findElement(By.cssSelector ("#Passwd")).sendKeys("Testpassword");

driver.findElement(By.cssSelector ("#signIn")).click();
driver.close();
driver.quit();

}

In the above code, we opened Gmail sign in page in Firefox browser.

Then located the Email/Password fields through locator 'cssSelector'.
Then though 'sendKeys', we entered values to Email/password fields and clicked on “SignIn” button. After that closed the browser.

Some other locators: name, className, linkText

Consider one example: Open Gmail sign in page, there below Sign in button, 

we have a link “Need help?”Now through firebug, inspect this element.

See the below screen shot and look at the html content, there we can see the class name, link name, Id etc.

Now we will locate that link “Need help?” through className & linkText.

Through class name: 

driver.findElement(By.className("need-help-reverse")).click();

Through Link text:

driver.findElement(By.linkText("Need help?")).click();

It is all about locators. Apart from that some other locators are there, but they are not so famous as most of the web elements can be located using all these locators, we studied.

All these locators can also be found in other browsers as well.