Accelerating the Mobility of Things

Are you ready to use CSS selectors with selenium?

Nowadays CSS selectors become popular and took place of xpath selectors. While locating elements the ideal candidate is to reference elements on the page by their unique id or name. If that is not possible, in case not available or auto generated, then XPath or CSS are the strategies available to you. Here you can get answer on Why CSS Locators are the way to go vs XPath.

One useful tool I found is FirePath which is a Firebug extension that adds a development tool to edit, inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors (Sizzle selector engine). The problem with fire path generates xpath specific to element but for css or Sizzle it is not always specific to selected element.

Selenium IDE 1.0.11
released on 30/May/2011 has inbuilt CSS locator builder! Selenium IDE will now create locators using CSS when recording. Also, same as getXpathCount, new command getCssCount added to count the number of nodes that match the specified css selector. So now using css selector you can get number of nodes that match the specified selector.

Sizzle, used by selenium as CSS selector engine, provides Positional and Form Selector Additions makes locator simpler and more readable, for instance:

  • :nth(index_0_base)

    Simplified position selector (li:nth(5) finds the 6th li element)

  • :input

    Finds all input elements including textarea, select and button.

  • :text
  • :checkbox
  • :file
  • :password
  • :submit
  • :image
  • :reset
  • :button

     

    that finds the input element with the specified input type.
    Here :button also finds button elements in addition to input elements having type button.

You can find more details for additional selectors in Sizzle documentation.

I had documented some examples for defining complex CSS and X-Path selector.

Strategy X Path
Sizzle(CSS) Comments
Element //div div locate first div element
By id //div[@id=’eleid’] div#eleid Locate div with id eleid
By class //div[@class=’eleclass’]

//div[contains(@class,’eleclass’)]

div.eleclass locate div with class name eleclass if more than one class exist then xpath 2 will be used
By attribute //div[@title=’Move mouse here’]
  1. div[title=Move mouse here]
  2. div[title^=Move]
  3. div[title$=here]
  4. div[title*=mouse]
you can use match operators for class and id as well, for example div[id^=menu-item]
Child //div[@id=’eleid’]/*

//div/h1

div#eleid >*

div#eleid >h1

Descendant //div[@id=’eleid’]//h1 div h1 Will work for //div/*/…../h1
By index //li[6] li:nth(5) 6th li element
By content //a[contains(.,’Issue 1164′)] a:contains(Issue 1164) Case Sensitive
By Child
  1. //li[a[contains(.,’Issue 1244′)]]
  2. //*[./a[contains(.,’Issue 1244′)]]
  3. //ul[.//a[contains(.,’Issue 1244′)]]
  1. li{a:contains(Issue 1244)}
  2. ul{a:contains(Issue 1244)}
<ul><li> Improved alert on changing the format <a href=””>Issue 1244</a></li>

<li>next sibling</li>…</ul>

<h3>Listing 2</h3>

<ul><li> Improved alert on changing the format <a href=””>Issue 1244</a></li>

<li>next sibling</li>…</ul>

Next Sibling
  1. //li[preceding-sibling::li[contains(.,’Issue 1244′)]]
  2. //ul[preceding-sibling::ul[.//a[contains(.,’Issue 1244′)]]]
  1. css=li:contains(Issue 1244) + li
  2. css=ul{a:contains(Issue 1244)} ~ ul

 

If you have not read Why CSS Locators are the way to go vs XPath blog posts, you must absolutely read it now.

Limitations of CSS locators

CSS is used for styling the document/elements and not originally for locating elements, so there are certain limitations too.

  • There are some cases where you cannot locate element using CSS locator. For instance

    //*[@value>3]

  • Lack of arithmetic and logical operator/function support as compare to xpath
  • Text comparison is case sensitive and there is no way to perform case insensitive comparison.
  • When referring to parent you must be careful, For instance

In Xpath :

  • //*[./a[contains(.,’Issue 1244′)]]
  • //li[./a[contains(.,’Issue 1244′)]]

Both 1 and 2 are will locate element li, having first child a[contains(.,’Issue 1244′)]

Whereas in CSS

  • li{a:contains(Issue 1244)}
  • *{a:contains(Issue 1244)}

Both 3 and 4 locates different elements. 3 is same as 1(assuming there is no other parent li element of li) but 4 locates first element that having child a:contains(Issue 1244) that is document root. There is no way to locate parent precisely.

  • For IE, Complex CSS might become as slow as XPath.

Conclusions:

  • Element Location strategy should be selected with following preference

    id, name, link, dom/css/xpath

  • Locators recorded by IDE are not always efficient but you can modify it manually for the best efficient one.
  • Avoid locating parent using CSS or be more careful.

 

More Resources:

 

VN:F [1.9.10_1130]
Rating: 9.1/10 (24 votes cast)
Are you ready to use CSS selectors with selenium?, 9.1 out of 10 based on 24 ratings

SharePost

0Likes

311 Comments

Julissa

August 2, 2015 at 1:07 am

Confidentiality Agreements: We sign NDAs with our clients to protect their project specifications.

Withh all of thhe strict guidelines, Apple users love the apps, and this
iis because Apple reviews each onne carefully. Deleted files can also be recovered and saved again so you have peace of
mind.

Here is my page; game blog

Wade

August 2, 2015 at 1:14 am

It really is a very severe play on the company’s part smply because
it puts iit in a quite aggressive location with the
overall uswr interface off the app.

Check out my blog; social media video marketing strategy

Jon

August 2, 2015 at 1:22 am

I like the valuable information you provide for your articles.

I will bookmark your weblog and take a look at once more right here regularly.
I am somewhat certain I’ll be told a lot of new stuff proper here!
Best of luck for the next!

Feel free to visit my web page xxx

Alexander

August 2, 2015 at 2:28 am

This affiliate is trying to lure folks whoo are searching for a
swift way to make a buck into producing a deposit at
Cedar Finance.

my homepage binary options demo account australia

Klaudia

August 2, 2015 at 3:07 am

It is not my first time to go to see this web site, i am visiting this web site dailly and
take nice information from here daily.

Visit my web site; m88

Isabell

August 2, 2015 at 3:18 am

Helpful info. Fortunate me I found your website accidentally, and I’m
surprised why this twist of fate didn’t came about in advance!

I bookmarked it.

Feel free to surf to my web-site: Home For Life

Vernell

August 2, 2015 at 3:18 am

Most robots are in a position to be utilized
wth various other pllatforms such as SpotOption and TF Tech Financials (
24Optiopn ).

Here iis my blog – binary options trading forum

Galen

August 2, 2015 at 3:36 am

Do you want to know how many emails bounce and do not
get delivered?

My blog :: the list builders academy review

Adriene

August 2, 2015 at 4:05 am

My spouse and I stumbled over here different web page and thought I should check things out.
I like what I see so now i am following you.
Look forward to looking into your web page yet again.

My web site – m88

Debra

August 2, 2015 at 4:59 am

Hello there! I know this is kinda off topic but I
was wondering which blog platform are you using for this website?
I’m getting sick and tired of WordPress because I’ve had problems with hackers and I’m looking at alternatives for another platform.
I would be fantastic if you could point me in the direction of a good platform.

my page … bodyweight flow pdf download

低価格は当店の方針 一部予約販売

August 2, 2015 at 5:41 am

I ことができませんでした |コメントご遠慮レジスト。 よく書かれました!
[url=http://www.passperevozki74.ru/]低価格は当店の方針 一部予約販売[/url]

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>