CSS Selectors Cheat Sheet

This article presents various CSS expressions for finding web elements.

It uses the following page:

https://vpl.bibliocommons.com/search?q=java&t=keyword


The list of CSS expressions is not complete so if you have any ideas of new expressions, please leave them in the Comments section.


You can test the CSS expressions in Chrome by

  • click the Chrome menu
  • select More Tools
  • click the CONSOLE tab
  • type $S("css expression")
  • press ENTER


Find Elements Based on Tag


EXAMPLE

input

Finds the elements with the INPUT tag.









Find Elements Based on the Class attribute

EXAMPLE

inpu­t.search_button

Finds the elements with INPUT tag that have a CLASS attribute with the "­search_button­" value










Find Elements Based on the Id attribute

EXAMPLE

inpu­t#globalQuery

Finds the elements with INPUT tag that have a ID attribute with the "globalQuery­" value









Find Elements Based On An Attribute


EXAMPLE

inpu­t[name='q']

Finds the elements with the INPUT tag that have the NAME attribute value equal to "­q"









Find Elements That are Immediate Children of Another Element

EXAMPLE

div.dropdown > a

1. Finds elements with the DIV tag that have a CLASS attribute with  the "­dropdown­" value

2. Finds A elements that are immediate children of the DIV elements









Finds Elements That Are Included in Other Elements (direct children or not)

EXAMPLE

div[class*='row'] a


1. Finds the elements with the DIV tag that have the CLASS attrib­ute's value starting with ­"row"

2. Finds all A elements (direct children or not) that are inside of the DIV elements











Find Elements That Have a Keyword Included in an Attribute Value

EXAMPLE

input[testid*='field']  

Finds the elements with the INPUT tag that have the "field" keyword included in the TESTID attribute value












Find Elements That Have an Attribute Value Beginning With a Keyword

EXAMPLE

input[testid^='field']


Finds the elements with the INPUT tag that have the TESTID attribute value starting with "field"











Find Elements That Have an Attribute Value Ending With a Keyword

EXAMPLE

input[testid$='search']


Finds the elements with the INPUT tag that have the TESTID attribute value ending with "search"











Find Elements That Are Preceded By Other Elements



EXAMPLE

input#search_category + input#globalQuery


Finds the elements matched by input#globalQuery that are immediately preceded by elements matched by input#search_category.



Related CSS locator:

input#search_category ~ input#globalQuery



Finds the elements matched by input#globalQuery that are preceded (immediately or not) by elements matched by input#search_category.






NEXT







XPATH Selectors Cheat Sheet

This article presents various XPATH expressions for finding web elements.

It uses elements from this page:

https://vpl.bibliocommons.com/search?q=java&t=keyword


The list of XPATH expressions is provided as help for learning how XPATH works.


The list is not complete so if you have any ideas of new expressions, please leave them in the Comments section.


You can test the XPATH expressions in Chrome by

  • click the Chrome menu
  • select More Tools
  • click the CONSOLE tab
  • type $x("xpath expression")
  • press ENTER


Find Elements Based on Tag


EXAMPLE

//input

Finds the elements with the INPUT tag.









Find Elements Based on Tag and an Attribute

EXAMPLE

//inpu­t[@­class='search_button']

Finds the elements with INPUT tag that have a CLASS attribute with the "­search_button­" value






Find Elements Based On 2 Attributes


EXAMPLE

//inpu­t[@­id=­'gl­oba­lQuery' and @name='q']

Finds the elements with the INPUT tag that 

1. have an ID attribute with the "­glo­bal­Que­ry" value

2. have a NAME attribute with the "­q" value







Find Elements That are Direct Children Of Another Element

EXAMPLE

//div[@class='dropdown']/a

1. finds the elements with the DIV tag that have a CLASS attribute with 
the "­dropdown­" value

2. for each element from the DIV list, finds the A elements that are direct children








Find A Specific Element From a List of Elements


EXAMPLE

(//span[@class='title'])[3]


1. finds the elements with the SPAN tag that have the CLASS attrib­ute's value equal to 
"­title"

2. selects the 3rd element from the list of SPAN elements








Find the Last Element From a List of Elements



EXAMPLE

(//span[@class='title'])[la­st()]

This example uses an XPATH function (last()).

1. finds the elements with the SPAN tag that have the CLASS attrib­ute's value equal to 
"title"

2. select the last element from the list of SPAN elements







Finds Elements That Are Included in Other Elements


EXAMPLE

(//div[@class='row top_info list_item_section'])[1]//span


1. finds the elements with the DIV tag that have the CLASS attrib­ute's value equal to "­row top_info list_item_section"

2. gets the first element from the DIV elements list

3. finds all SPAN elements (direct children or not) that are inside of the first DIV







Find Elements That Include Keywords in an Attribute



EXAMPLE

//a[co­nta­ins­(@href, 'show_­cir­cul­ati­on')]

Finds the A elements that have "­sho­w_c­irc­ula­tio­n" included in the value of the HREF attribute.

This example uses an XPATH function (contains()).








Find Elements That Have an Attribute Starting  With Keyword

EXAMPLE

//a[st­art­s-w­ith­(@href, '/item­/sh­ow_­cir­cul­ati­on')]

Finds the A elements that have the HREF attrib­ute's value starting with "­/it­em/­sho­w_c­irc­ula­tio­n".

This example uses an XPATH function (starts-with()).







Find Elements That Do Not Have A Value For Attribute

EXAMPLE

//inpu­t[n­ot(­@na­me=­'q')]

Finds the INPUT elements that have the NAME attrib­ute's value different than "­q".

This example uses an XPATH function (not()).









Get the Count of Elements Matched by an Expression

EXAMPLE

count(­//span[­@cl­ass­='title'])

Provides the count of all SPAN elements that have the CLASS attrib­ute's value equal to "title".

This example uses an XPATH function (count()).







Get An Element's Attribute's Value

EXAMPLE

//input[@testid='field_search']/@id

1. Finds the INPUT elements that have the TESTID attrib­ute's value equal to 
"­field_search"

2. Gets the value of the ID attribute for the INPUT elements








Get an Element's Value


EXAMPLE

(//span[@class='subTitle'])[1]/text()

This example uses an XPATH function (text()).

1. finds the first SPAN element that has the CLASS attrib­ute's value equal to "­subTitle"

2. gets the value of the element







Gets Links With URL Greater Than 30 Characters


EXAMPLE

//a[st­rin­g-l­eng­th(­@href) > 30]

Finds the elements with the A tag that have the HREF attribute value length greater than 30 characters.

This example uses an XPATH function (string-length()).







NEXT


Beginner's Guide To Explicit Waits




You may have noticed already that some of the Selenium articles are moved from this blog to another: seleniumjava.com.

Going forward, Selenium articles will be published on seleniumjava.com and all other articles on this blog.

The newest Selenium article is a Beginner's Guide To Explicit Waits.

Explicit waits should be used in test automation scripts when the script interacts with web elements as they provide a way of synchronizing the script with the web site.

The article goes over

  • why explicit waits are needed
  • how explicit waits work
  • when explicit waits can be used
  • how explicit waits can be used for 
    • finding single web elements
    • finding multiple web elements
    • checking page title and url
    • checking element's status


Hope you like it!