Locating elements using DOM, Css and Xpath

 Refer the below example

Whole web page

xpath=/html

css=html

document.documentElement

Whole web page body

xpath=/html/body

css=body

document.body

All text nodes of web page

//text()

Element <E> by absolute reference

xpath=/html/body/.../.../.../E

css=body>…>…>…>E

document.body.childNodes[i]...childNodes[j]

Element <E> by relative reference

//E

css=E

document.gEBTN('E')[0]

Second <E> element anywhere on page

xpath=(//E)[2]

document.gEBTN('E')[1]

Image element

//img

css=img

document.images[0]

Element <E> with attribute A

//E[@A]

css=E[A]

dom=for each (e in document.gEBTN('E')) if (e.A) e Œ

Element <E> with attribute A containing text 't' exactly

//E[@A='t']

css=E[A='t'] 

Element <E> with attribute A containing text 't'

//E[contains(@A,'t')]



Element <E> whose attribute A begins with 't'

//E[starts-with(@A, 't')]



Element <E> whose attribute A ends with 't'

//E[substring(@A, string-length(@A) - string-length('t')+1)='t']



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

//E[contains(concat('⦿', @A, '⦿'), '⦿w⦿')

Element <E> with attribute A matching regex ‘r’

Element <E1> with id I1 or element <E2> with id I2

//E1[@id=I1] | //E2[@id=I2]

css=E1#I1,E2#I2

Element <E1> with id I1 or id I2

//E1[@id=I1 or @id=I2]

css=E1#I1,E1#I2

Attribute A of element <E>

//E/@A {Se: //E@A }

{Se: css=E@A }

document.gEBTN('E')[0].getAttribute('A') ⌦

{Se: document.gEBTN('E')[0]@A }

Attribute A of any element

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

{Se: css=*@A }

Attribute A1 of element <E> where attribute A2 is 't' exactly

//E[@A2='t']/@A1 ⌦ {Se: //E[@A2='t']@A1 }

{Se: css=E[A2='t']@A1 }

Attribute A of element <E> where A contains 't'

//E[contains(@A,'t')]/@A ⌦ {Se: //E[contains(@A,'t')]@A }

{Se: @A }

Element <E> with id I

//E[@id='I']

css=E#I

Element with id I

//*[@id='I']

css=#I

document.gEBI('I')

id=I

Element <E> with name N

//E[@name='N']

css=E[name=N]

Element with name N

//*[@name='N']

css=[name=N]

document.getElementsByName('N')[0]

name=N

Element with id X or, failing that, a name X

//*[@id='X' or @name='X']

X ◄OR► identifier=X

Element with name N & specified 0-based index ‘v’

//*[@name='N'][v+1]

css=[name=N]:nth-child(v+1)

name=N index=v

Element with name N & specified value ‘v’

//*[@name='N'][@value='v']

css=*name=N+*value='v’+

name=N value=v

Element <E> is explicitly in language L or subcode

//E[@lang='L' or starts-with(@lang, concat('L', '-'))]

css=E[lang|=L]

Element <E> is in language L or subcode (possibly inherited)

css=E:lang(L)

Element with a class C

//*[contains(concat('⦿', @class, '⦿'), '⦿C⦿')]

css=.C

document.getElementsByClassName('C')[0]

Element <E> with a class C

//E[contains(concat('⦿', @class, '⦿'), '⦿C⦿')]

css=E.C

Element containing text 't' exactly

//*[.='t']

Element <E> containing text 't'

//E[contains(text(),'t')]

css=E:contains('t') 

Link element

//a

css=a

document.links[0]

<a> containing text 't' exactly

//a[.='t']

link=t

<a> containing text 't'

//a[contains(text(),'t')]

css=a:contains('t') 

<a> with target link 'url'

//a[@href='url']

css=a[href='url']

Link URL labeled with text 't' exactly

//a[.='t']/@href

First child of element <E>

//E/*[1]

css=E > *:first-child {Se: css=E > * }

document.gEBTN('E')[0].firstChild 

First <E> child

//E[1]

{Se: css=E }

document.getEBTN('E')[0]

Last child of element E

//E/*[last()]

document.gEBTN('E')[0].lastChild 

Last <E> child

//E[last()]

document.gEBTN(E)[document.gEBTN(E).length-1]

Second <E> child

//E[2] ◄OR► //E/following-sibling::E

document.getEBTN('E')[1]

Second child that is an <E> element

//*[2][name()='E']

Second-to-last <E> child

//E[last()-1]

document.gEBTN(E)[document.gEBTN(E).length-2]

Second-to-last child that is an <E> element

//*[last()-1][name()='E']

Element <E1> with only <E2> children

//E1/[E2 and not( *[not(self::E2)])]

Parent of element <E>

//E/..

document.gEBTN('E')[0].parentNode

Descendant <E> of element with id I using specific path

//*[@id='I']/ . . ./. . ./. . ./E

css=#I > . . . > . . . > . . . > E

document.gEBI('I')…gEBTN('E')*0+

Descendant <E> of element with id I using unspecified path

//*[@id='I']//E

css=#I E

document.gEBI('I').gEBTN('E')[0]

Element <E> with no children

//E[count(*)=0]

Element <E> with an only child

//E[count(*)=1]

Element <E> that is an only child

//E[count(preceding-sibling::*)+count(following-sibling::*)=0]

Element <E> with no <E> siblings

//E[count(../E) = 1]

Every Nth element starting with the (M+1)th

//E[position() mod N = M + 1]

Element <E1> following some sibling <E2>

//E2/following-sibling::E1

Element <E1> immediately following sibling <E2>

//E2/following-sibling::*[1][name()='E1']

css=E2 + E1

Element <E1> following sibling <E2> with one intermediary

//E2/following-sibling::*[2][name()='E1']

css=E2 + * + E1

Sibling element immediately following <E>

//E/following-sibling::*

css=E + *

document.gEBTN('E')[0].nextSibling 

Element <E1> preceding some sibling <E2>

//E2/preceding-sibling::E1

Element <E1> immediately preceding sibling <E2>

//E2/preceding-sibling::*[1][name()='E1']

Element <E1> preceding sibling <E2> with one intermediary

//E2/preceding-sibling::*[2][name()='E1']

Sibling element immediately preceding <E>

//E/preceding-sibling::*[1]

document.gEBTN('E2')[0].previousSibling 

Cell by row and column (e.g. 3rd row, 2nd column)

//*[@id='TestTable']//tr[3]//td[2]

{Se: //*[@id='TestTable'].2.1 }

{Se: css=#TestTable.2.1 }

document.gEBI('TestTable').gEBTN('tr')[2].gEBTN('td')[1]

{Se: document.gEBI('TestTable').2.1 }

Cell immediately following cell containing 't' exactly

//td[preceding-sibling::td='t']

Cell immediately following cell containing 't'

//td[preceding-sibling::td[contains(.,'t')]]

User interface element <E> that is disabled

//E[@disabled]

User interface element that is enabled

//*[not(@disabled)]

Checkbox (or radio button) that is checked

//*[@checked]

Element being designated by a pointing device

css=E:hover

Element has keyboard input focus

css=E:focus

Unvisited link

css=E:link

Visited link

css=E:visited

--------------------------------
<div>
  <form>
    <input id="search_query" />
   </form>
</div>

<div>
  <form>
    <input id="search_query" />
  </form>
</div>

<div>
  <form>
    <input id="search_query" />
  </form>


</div>
-----------------------------------------

To find nth element
example for finding 2nd element

/descendant::input[@id="search_query"][2]

or
(//input[@id="search_query"])[2]