Css Selector

Css rules and pseudo-classes will help us move our Xpath locators to Css, a native approach on all browsers.

Css vs Xpath
Css selectors perfom far better that xpath.Here are some reasons

• Xpath engines are different in each browser, hace make them inconsistent
• IE does not have a native xpath engine, therefore selenium injects its own xpath engine for compatibility if its API, Hence we lose the advantage of using native browser features that webdriver inherent promotes
• Xpath tends to become complex and hence male hard to read.

However there are some situation where we need to use xpath, for example searching for a parent element or searching element by its text.

Xpath and Css syntax

We will use the tools Firepath

A direct child in Xpath is defined by the use of a "/" while on Css this is defined by the use the ">"

Show all labels that have a label that is a "a" within of a label that is a  "div"
Xpath  //div/a
Css    div>a

For example:

                                               

If an element could be inside another or one its child, in Xpath we use "//" and in Css just a white space.

For example
Xpath    //div//a
Css       div a

We can identify a element by id or class in Css
ID
An element is defined in  Xpath "[@id='name']" and in Css is used the "#"

Using Css locator

Using Xpath locator

Class
An element is define in Xpath "[@class="example"]" and in Css is used a "."
For example:
Using Css locator

Using Xpath locator

Find elements using Css locator

Find the elements subsequent

Grouping selectors

Find an element by type and  name

Selector pseudo-classes
Css selector in Selenium allow us to navigate lists with more methods to find elements
element:nth-child(number) :This select the elements sibling within of the tree of the DOM that   matches the condition

For example:

the nth-last-child: This selector allows us select one or more elements based on their source order, according to a formula.

X:empty: Find the elements that have no children

X: First child: Find the first child of X element

X:only-child: It any element which is the only child of its parent.

X:only-of-type: It is the last child of its parent that is an X element

For example:

X:first of type: It is first child of its parent that is an X element
For example:

                            

X:last-of-type: It is last child of its parent that is an X element
X:checked 
For example:

Sub-string matches
Css in selenium has an feature of allow partial string matches using ^=, $= or *=
* contains
^ starts with
$ ends with

For example

Finding an element on the page by their XPath

There are many ways to find element on pages, for example we can find an element by id,name,class,etc.  in previous post I explains a little bit of others ways to find elements. Review this http://marisolchambiarrosquipa.blogspot.com/2015/05/design-patterns.html

using name or id is for simple test, but for more complex situations, we need to know xpath
Xpath is one of the most useful approaches to find elements on the page.
It is most commonly used web testing framework.It allows us to write tests.

Tools that can useful to find elements on the page.

we can use many tools for the browser firefox
*Selenium IDE (In previous post I explains how to use it. Review this  http://marisolchambiarrosquipa.blogspot.com/2014/06/selenium.html)

*FireXpath and Firebug

*The pages have an  ViewXpath option

A single slash(/) at the start of xpath instructs Xpath engine to look for element starting from root node
A double slash (//)at the start of path instructs xpath engine to search look for matching element in the anywhere in the page.

//->XPath begins from the current location.
For example if we put "//input" find all elements that have this tags.
following-sibling:selects all siblings after the current tag
following :contains all nodes with occur after the tag, in document order
parent: contains the parent of the tag if it have one

Find elements using FireXpath tools

Popup Window

There are many cases where a application displays multiples windows when we open a website.
We can handle popup window in selenium using getWindowsHandles() method to get the set of windows and get their handle. Then pass the handle to window() method available in WebDriver instance variable.

We can remove all the handles from before the popup window appears with the command
Set afterPopup=driver.getWindowsHandles();
afterPopup.removeAll(beforePopup).

Using Popup Window

This is the page

Run the test