Les selecteurs dans Cerberus

Exemple avec le bouton de recherche norauto.fr

Code html du bouton :

<button id="search-submit-button" class="search" type="submit" name="search">Rechercher</button>

Le type de l'élément est ici un button, et il a plusieurs attribut : id, class, type, name.

1. Selection par attribut direct (id, class, name)

Pour selectionner ce bouton, on peut utiliser un selecteur par attribut

id=search-submit-button
class=search
name=search

On peut aussi utiliser le selecteur data-cerberus s'il est sur l’élément souhaité

data-cerberus=newletter-input

2. Le selecteur CSS

Permet comme le xpath de selectionner par attribut et arborescence mais pas par texte contenu.

Le style de ce selecteur est plus facile à prendre en main que le xpath.

Selectionne le bouton ayant l'attribut name ...

css=button[name='search-submit-button']

Par position

3ème élément li (en xpath c'est plus simple dans ce cas)

css=li:nth-child(3)

Cas attribut id et classe en css

Selecteur par id (2 possibilités, symbole '#' )

css=button#search-submit-button
css=button[id='search-submit-button']
css=button[data-cerberus='button-search']

Selecteur par class (2 possibilités, symbole '.' )

css=button.search
css=button[class='search']

3. Le selecteur Xpath

Par attribut

Xpath permet de selectionner le type de l'élément et ses attributs

 xpath=//button[@id='search-submit-button']
 xpath=//button[@class='search']
 xpath=//button[@name='search']
 xpath=//a[@class='permut']
 xpath=//button[@type='search']
 xpath=//li[@data-cerberus='niveau1'][2]

Mais également tout les éléments qui contiennent un attribut : (tout = symbole '*')

xpath=//*[@class='search']

Texte contenu par l'élément

Le bouton contient le texte 'Rechercher', on peut l'utiliser comme selecteur

xpath=//button[contains(text(),'Rechercher')]

On peut utiliser une classe partielle, utile si l'élément contient plusieurs classe

xpath=//button[contains(@class,'search-submit')]

On peut utiliser la négation (NOT)

xpath=//button[not(contains(text(),'Rechercher'))]

Le ET (condition multiple)

xpath=//button[@name='panier' and @class='ajout']

Par position (n ième élément)

Le 2ème bouton qui a la classe 'search' :

xpath=//button[@class='search'][2]

Arborescence (parent/enfant)

On peut décrire une arborescence en xpath de la sorte : xpath=//parent/enfant

Le button enfant d'un lien (a)

xpath=//a/button[@class='search']

En combinant ce qu'on a vu on peut décrire :

Le 3ème élement "li" du menu arborescence (= changer mes pneus), enfant de la liste "ul" contenant la classe 'search-pannel'.

xpath=//ul[contains(@class,'search-pannel')]/li[3]

4. Divers

A ne pas faire :

Utiliser les long xpath donné par le navigateur, si la page change il faudra réecrire le test dans quelques mois.

//*[@id="ws-home"]/div[2]/div[2]/div/div/a[2]/img

De même avec le selecteur CSS

#ws-home > div.ws-section-container.gd-container > div.ws-content > div > div > a:nth-child(12) > img

A faire :

Utiliser des selecteurs "unique" si possible et court (pas de longue arborescence)

css=span.category-title

Que se passe-t-il si plusieurs éléments sont trouvés

Cerberus va selectionner le 1er uniquement

Tester un selecteur dans le navigateur

Dans la console Javascript (F12) on peut tester les selecteurs CSS et XPATH pour savoir combien d'élément sont sélectionné par ce sélecteur et dans quel ordre. (Cerberus sélectionne le 1er élément).

CSS :

$("span.category-title");

Xpath :

$x("//a/button[@class='search']");

vitoo/selecteur.md