Good-bye, XPath! Hello, CSS!

Last night’s San Francisco Selenium Meetup was one of the two most useful I’ve attended (and I’ve attended quite a few!). Sauce Labs’ own Santiago Suarez Ordoñez gave a talk entitled CSS vs XPath Locators: An In-Depth Comparison & Why The Former Is the Way To Go.

Santi presented four reasons why we should all be using CSS locators instead of XPath locators whenever possible. CSS locators are (1) faster (on IE), (2) more readable, and (3) used by jQuery, whereas (4) “no one else uses XPATH.” I’m not sure he’s totally right about #2 and #4, but his evidence for #1 was quite compelling and amusing!

Santi presented a list of tools which one could use to help learn/use CSS locators. I was particularly intrigued by one he wrote himself: cssify.py. Here’s a copy/paste from my MacBook’s terminal window of cssify.py converting an XPath locator I used in an example elsewhere in this blog:

%mamp ./cssify.py "//select[@name='topnav']"
select[name=topnav]
%mamp

And here’s a little Perl program called convert.pl which I whipped up after the meeting in order to convert an entire HTML test case’s XPath locators into CSS ones. It calls Santi’s cssify.py program to do the conversion.

The “if” statement is admittedly ugly! The four sets of parentheses “memorize” the various components of a line like this:

<td>//select[@name='topnav']</td>

Everything up through the opening <td> container gets “memorized” in $1. The XPath expression itself winds up in $3. Since the xpath= prefix for an XPath locator is optional, if it is present, it gets stored in $2 (but then never used). Finally, the closing </td> container goes into $4. And because the regular expression delimiter is a slash, all of the slashes in the regular expression had to be backslash-escaped.

The rest of the code is quite a bit easier to follow! Here’s a demo of what it does:

And although I didn’t show this in the demo, the foothill-converted.html test case does indeed run exactly the same as foothill.html.

Santi’s talk was supposedly a re-run of a popular one he gave at the Selenium Conference in April, but for reasons I don’t understand, it is not available via video along with the other talks on the Selenium Conference site. However, you can see his slide set now and the video of his talk will appear on the Sauce Labs blog in the near future (as is the case for all of the San Francisco Selenium Meet-Up presentations).

I’m a big believer at putting new info into action asap, so going forward, I hereby pledge to show only examples with CSS locators rather than XPath locators!

Advertisements

About Mary Ann May-Pumphrey

I'm a software QA automation engineer, focusing primarily on Selenium/Webdriver automation of the front end of web apps. View all posts by Mary Ann May-Pumphrey

One response to “Good-bye, XPath! Hello, CSS!

  • Santi

    Great writeup, Mary Ann. Happy to hear the talk was useful all in all.
    Sadly, I didn’t make it soon enough to propose my talk for track A in SeConf, so I gave it in the track B and got a surprising amount of people jumping in to check it out.
    It’s awesome to see you’re already using cssify for your own work. You took my plan for making full selenese conversions and made it happen in 5 lines of perl, great job!

    Don’t hesitate to file any bugs for failed conversions from cssify that you find along the way.

    Best,
    Santi

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: