TAST DokuWiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
===== CSS Selector =====

[[doku>wiki:dokuwiki|{{wiki:TAST-128_small.png }}]] 

As said in [[Objects Identification]], the CSS Selector is simply and easy a way to identify objects in HTML (identying one or many elements) and very useful.

When selecting an object, in testing, it is needed to be specific, and for it, using css tends to lead to selectors such as span[name='cars'] rather than the [[xpath|XPath way]] //body//div/spn/span/table/tr/tr/tr/td/td/td/td/span[@name='cars'].

Css selectors are based in defining the kind of element added to the definition of one or more attributes. It is also possible to define only the type of element (this tends to be inaccurate) or only the attributes (one or more). At the end of the page, some examples show the way to do it.

==== Formulation: ====

The formulation of a CSS Selector can be defined by two formulas:

  * **__element[attribute(*|^|$|~)='value']__**
  * **__element(sym)'value'__**

The **element** portion will be what element kind needs to be selected. The **attribute** portion will be what attribute the user is selecting on. The **(*|^|$|~)** portion is an optional comparison operator depending on what is needed (For example: Equals ( = ); Starts with ( ^= ); Ends with ( $= ); Contains ( *= ); Contains in a list ( ~= )). **__(sym)__** represents the shortcut created for the two most used attributes (ID and class).

In case the user wants to specify more than one attribute to recognize the element, this is also possible by concatenating more than one specification, one right after the other. Using this way, we look for the element that complies with **BOTH** conditions, as in the sentence **elementtype[attribute1(*|^|$|~)='value1'][attribute2(*|^|$|~)='value2']**  a the element has to be an //"elementtype"// element, with the //"value1"// in //"attribute1"//  and the //"value2"// in the //"attribute2"//. It would be also possible to use the selector **[attribute(*|^|$|~)='value']** but this way will make the selector to run over all the elements, and not only over the ones that match the type of element that we are looking for, thus is higly recommendable to use the element type for speeding up the process.

For some of the most used attributes, there are some shortcuts that can be used to ease the tester job. They work as the followinng sentence **element(sym)'value'** where the element portion represents the kind of the element selected and (sym) is the symbol needed (see explanation below). The symbols are # **//for the IDs//** (element#idvalue  or  #idvalue)  and **. for the classes**  (element.classvalue or  .classvalue). User can also join this two ways, for creating a sentence similar to **element(sym)'value'[attribute='value'].**
 
There is also a possibility to nest the elements (it means, to refer to an element depending on the parent element). It is done with the symbol **__>__** as in the sentence **parentelement[attribute=attrvalue]>element[attribute=attrvalue]** or any of the other possibilities said before instead.

==== Examples: ====

The images below show, for instance, some different ways to identify an object:

{{:css selector.png?nolink&1200|}}

In this specific case, there is an ID. It is usually the easiest way to ensure an unique identification, so any of the following are supposed to find the element without problems:

  *input#lst-ib
  * #lst-ib
  * input[id='lst-ib']
  * [id='lst-ib']
  * input[id$='-ib']
  * input#lst-ib[role='combobox']
  * #lst-ib[maxlength='2048']
  * input[id='lst-ib'][style*='image/gif;base64']

The last three are, in this case, unnecessary, due to there are no more elements with the "lst-ib" ID. Even so, it is possible to add as much info as needed to the sentence.

In case the object had no ID determined, it would be possible to concatenate as many attributes as we think are enough for identifying **__only__** the desired object:

  * input[title='Suche'][aria-label="suche"][name='q']

As a second example, in the image at the right side, there is another screenshot where can find no ID attribute for the <div> "Deutschland". This is an element that has a class "logo-subtext". The user can face two scenarios (this class represents univocally the element or not). Regarding the first scenario, some possibilities would be:

  * div.logo-subtext
  * .logo-subtext
  * div[class='logo-subtext']
  *  [class='logo-subtext']

If the case is not as said before, we can join more than one attribute or condition, in order to make the identification possible. Since this element has no more attributes, the user can get advantage of the nest functionality of CSS Selector:

  * #hplogo>div 
  * #hplogo>div.logo-subtext
  * [id='hplogo']>div
  * div[title='Google']>div[class=logo-subtext]

{{:css selector_class.png?nolink&1200|}}

As is seen in the first image,  there is a possibility to get directly a CSS selector by choosing the element and seeing (not possible to copy) the code in the very right bottom of the image. If using Google Chrome, it also possible to click with the right button in the element needed and  click on "Copy selector".

{{:Copy selector.png?nolink&650|}}

Further info about CSS selector can be found [[https://www.w3schools.com/cssref/css_selectors.asp|clicking here.]]
TAST DokuWiki

User Tools

Site Tools

Page Tools
