XPath CSS DOM Selenium

Rosetta Stone and Cookbook

Sprinkled with Selenium usage tips, this is both a general-purpose set of recipes for each technology as well as a cross-reference to map from one to another.
The validation suite for this reference chart (http://bit.ly/gTd5oc) provides example usage for each recipe supported by Selenium (the majority of them).

Tag

XPath (1.0 2.0)

CSS (CSS1 3)

DOM

Selenium

Whole web page

Whole web page body
All text nodes of web page
Element <E> by absolute reference
Element <E> by relative reference
Second <E> element anywhere on page
Image element
Element <E> with attribute A
Element <E> with attribute A containing text 't' exactly
Element <E> with attribute A containing text 't'
Element <E> whose attribute A begins with 't'
Element <E> whose attribute A ends with 't'

xpath=/html
xpath=/html/body
//text()
xpath=/html/body/.../.../.../E
//E
xpath=(//E)[2]
//img
//E[@A]
//E[@A='t']
//E[contains(@A,'t')]
//E[starts-with(@A, 't')]
//E[ends-with(@A, 't')] OR
//E[substring(@A, string-length(@A) - string-length('t')+1)='t']
//E[contains(concat('', @A, ''), 'w')
//E*matches(@A, r)+
//E1[@id=I1] | //E2[@id=I2]
//E1[@id=I1 or @id=I2]
//E/@A {Se: //E@A }

css=html
css=body
NA
css=body>>>>E
css=E
NA
css=img
css=E[A]
css=E[A='t']
css=E[A*='t']
css=E[A^='t']
css=E[A$='t']

document.documentElement
document.body
NA
document.body.childNodes[i]...childNodes[j]
document.gEBTN('E')[0]
document.gEBTN('E')[1]
document.images[0]
dom=for each (e in document.gEBTN('E')) if (e.A) e
NA
NA
NA
NA

NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA

css=E[A~='w']

NA
NA
NA
NA
NA

//*/@A {Se: //*@A }

//E[@A2='t']/@A1 {Se: //E[@A2='t']@A1 }
//E[contains(@A,'t')]/@A {Se: //E[contains(@A,'t')]@A }
//E[@id='I']
//*[@id='I']
//E[@name='N']
//*[@name='N']
//*[@id='X' or @name='X']
//*[@name='N'][v+1]
//*[@name='N'][@value='v']
//E[@lang='L' or starts-with(@lang, concat('L', '-'))]
NA
//*[contains(concat('', @class, ''), 'C')]
//E[contains(concat('', @class, ''), 'C')]
//*[.='t']
//E[contains(text(),'t')]
//a
//a[.='t']
//a[contains(text(),'t')]
//a[@href='url']
//a[.='t']/@href
//E/*[1]
//E[1]
//E/*[last()]
//E[last()]
//E[2] OR //E/following-sibling::E
//*[2][name()='E']
//E[last()-1]
//*[last()-1][name()='E']
//E1/[E2 and not( *[not(self::E2)])]
//E/..
//*[@id='I']/ . . ./. . ./. . ./E
//*[@id='I']//E
//E[count(*)=0]
//E[count(*)=1]
//E[count(preceding-sibling::*)+count(following-sibling::*)=0]
//E[count(../E) = 1]
//E[position() mod N = M + 1]
//E2/following-sibling::E1
//E2/following-sibling::*[1][name()='E1']
//E2/following-sibling::*[2][name()='E1']
//E/following-sibling::*
//E2/preceding-sibling::E1
//E2/preceding-sibling::*[1][name()='E1']
//E2/preceding-sibling::*[2][name()='E1']
//E/preceding-sibling::*[1]
//*[@id='TestTable']//tr[3]//td[2]
{Se: //*[@id='TestTable'].2.1 }
//td[preceding-sibling::td='t']
//td[preceding-sibling::td[contains(.,'t')]]
//E[@disabled]
//*[not(@disabled)]
//*[@checked]
NA
NA
NA
NA
NA

NA {Se: css=*@A }
NA {Se: css=E[A2='t']@A1 }
NA {Se: css=E[A*='t']@A }
css=E#I
css=#I
css=E[name=N]
css=[name=N]
NA
css=[name=N]:nth-child(v+1)
css=[name=N][value='v]
css=E[lang|=L]
css=E:lang(L)
css=.C
css=E.C
NA
css=E:contains('t')
css=a
NA
css=a:contains('t')
css=a[href='url']
NA
css=E > *:first-child { Se: css=E > * }
css=E:first-of-type { Se: css=E }

NA
NA
NA
NA
document.gEBTN('E')[0].getAttribute('A')
{Se: document.gEBTN('E')[0]@A }
NA
NA
NA
NA
document.gEBI('I')
NA
document.getElementsByName('N')[0]
NA
NA
NA
NA
NA
document.getElementsByClassName('C')[0]
NA
NA
NA
document.links[0]
NA
NA
NA
NA
document.gEBTN('E')[0].firstChild
document.getEBTN('E')[0]
document.gEBTN('E')[0].lastChild
document.gEBTN(E)[document.gEBTN(E).length-1]
document.getEBTN('E')[1]
NA
document.gEBTN(E)[document.gEBTN(E).length-2]
NA
NA
document.gEBTN('E')[0].parentNode
document.gEBI('I')gEBTN('E')[0]
document.gEBI('I').gEBTN('E')[0]
NA
NA
NA
NA
NA
NA
NA
NA
document.gEBTN('E')[0].nextSibling
NA
NA
NA
document.gEBTN('E2')[0].previousSibling
document.gEBI('TestTable').gEBTN('tr')[2].gEBTN('td')[1]
{Se: document.gEBI('TestTable').2.1 }
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA

Element <E> with attribute A containing word 'w'

Element <E> with attribute A matching regex r
Element <E1> with id I1 or element <E2> with id I2
Element <E1> with id I1 or id I2
Attribute A of element <E>

Attribute
Id
&
Name
Lang
&
Class
Text
&
Link

Parent
&
Child

Sibling

Table Cell

Dynamic

Attribute A of any element

Attribute A1 of element <E> where attribute A2 is 't' exactly
Attribute A of element <E> where A contains 't'
Element <E> with id I
Element with id I
Element <E> with name N
Element with name N
Element with id X or, failing that, a name X
Element with name N & specified 0-based index v
Element with name N & specified value v
Element <E> is explicitly in language L or subcode
Element <E> is in language L or subcode (possibly inherited)
Element with a class C
Element <E> with a class C
Element containing text 't' exactly
Element <E> containing text 't'
Link element
<a> containing text 't' exactly
<a> containing text 't'
<a> with target link 'url'
Link URL labeled with text 't' exactly
First child of element <E>
First <E> child
Last child of element E
Last <E> child
Second <E> child
Second child that is an <E> element
Second-to-last <E> child
Second-to-last child that is an <E> element
Element <E1> with only <E2> children
Parent of element <E>
Descendant <E> of element with id I using specific path
Descendant <E> of element with id I using unspecified path
Element <E> with no children
Element <E> with an only child
Element <E> that is an only child
Element <E> with no <E> siblings
Every Nth element starting with the (M+1)th
Element <E1> following some sibling <E2>
Element <E1> immediately following sibling <E2>
Element <E1> following sibling <E2> with one intermediary
Sibling element immediately following <E>
Element <E1> preceding some sibling <E2>
Element <E1> immediately preceding sibling <E2>
Element <E1> preceding sibling <E2> with one intermediary
Sibling element immediately preceding <E>
Cell by row and column (e.g. 3rd row, 2nd column)
Cell immediately following cell containing 't' exactly
Cell immediately following cell containing 't'
User interface element <E> that is disabled
User interface element that is enabled
Checkbox (or radio button) that is checked
Element being designated by a pointing device
Element has keyboard input focus
Unvisited link
Visited link
Active element

NA
css=E1#I1,E2#I2
css=E1#I1,E1#I2
NA {Se: css=E@A }

css=E *:last-child
css=E:last-of-type
css=E:nth-of-type(2)
css=E:nth-child(2)
css=E:nth-last-of-type(2)
css=E:nth-last-child(2)

NA
NA
css=#I > . . . > . . . > . . . > E
css=#I E
css=E:empty

NA
css=E:only-child
css=E:only-of-type
css=E:nth-child(Nn + M)
css=E2 ~ E1

css=E2 + E1
css=E2 + * + E1
css=E + *
NA
NA
NA
NA
css=#TestTable tr:nth-child(3) td:nth-child(2)

{Se: css=#TestTable.2.1 }
NA
css=td:contains('t') ~ td
css=E:disabled
css=*:enabled
css=*:checked

css=E:hover
css=E:focus
css=E:link
css=E:visited
css=E:active

NA
NA
NA
NA
id=I
NA
name=N
X OR identifier=X
name=N index=v
name=N value=v
NA
NA
NA
NA
NA
NA
NA
link=t
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA
NA

XPath
CSS
DOM
Selenium
{Se: . . . } Selenium-only

variation
Not supported by
Selenium

Space character
expression CSS3 or XPath 2.0
DOM abbreviations:
gEBI getElementById
gEBTN getElementsByTagName

Copyright 2011 Michael Sorens

2011.04.05 Version 1.0.2

Download the latest version from

Simple-Talk http://bit.ly/gTd5oc.
Indexing (all): XPath and CSS use 1-based
indexing; DOM and Seleniums table syntax
use 0-based indexing.

General Notes

General

Recipe

Prefixes (all): xpath= required unless

expression starts with // dom= required
unless expression starts with document.
css= always required identifier= never
required.
Cardinality (Selenium): XPath and CSS may
specify a node set or a single node; DOM must
specify a single node. When a node set is
specified, Selenium returns just the first node.
Content (XPath): Generally should use
normalize-space() when operating on display
text.

DOM has limited capability with a simple

document expression; however,
arbitrary JavaScript code may be used as
shown in this example.

Footnotes

Category

LEGEND

CSS does not support qualifying elements

with the style attribute, as in
div[style*='border-width'].

Selenium uses a special syntax for returning

attributes; normal XPath, CSS, and DOM
syntax will fail.

CSS: The CSS2 contains function is not in

CSS3; however, Selenium supports the
superset of CSS1, 2, and 3.

DOM: firstChild, lastChild, nextSibling, and

previousSibling are problematic with mixed
content; they will point to empty text
nodes rather than desired elements
depending on whitespace in web page
source.