Looking for protractor Keywords? Try Ask4Keywords

protractorSélecteurs CSS


Syntaxe

  • by.css ('css-selector')
  • by.id ('id')
  • by.model ('model')
  • by.binding ('binding')

Paramètres

Paramètre Détails
css-selector Un sélecteur CSS tel que '.class-name' pour sélectionner l'élément sur la base du nom de la classe
id Identifiant de l'élément dom
modèle Modèle utilisé pour l'élément dom
contraignant Nom de la liaison utilisée pour lier certains éléments

Remarques

Comment écrire des sélecteurs CSS?

Les attributs les plus importants pour écrire des sélecteurs CSS sont class et id of dom. Pour une instance si un dom HTML ressemble à l'exemple ci-dessous:

  <form class="form-signin">
      <input type="text" id="email" class="form-control" placeholder="Email">
      <input type="password" id="password" class="form-control" placeholder="Password">
      <button class="btn btn-block" id="signin-button" type="submit">Sign in</button>
  </form>

Ensuite, pour sélectionner le champ de saisie, vous pouvez écrire le sélecteur CSS de la manière suivante:

  1. Utilisation du nom de la classe : Le nom de la classe dans le sélecteur CSS commence par un caractère spécial (point). Le sélecteur CSS pour cela sera comme ceci .form-control .

    by.css('.form-control')

Comme la classe de form-control est partagée par les deux éléments d'entrée, cela soulève un problème de duplicité dans les localisateurs. Donc, dans ce cas, si id est disponible, vous devriez toujours préférer utiliser id au lieu du nom de la classe.

  1. Utilisation de l'ID : L'identifiant dans le sélecteur CSS commence par le caractère spécial # (hachage). Ainsi, le sélecteur CSS utilisant l'ID pour l'élément de saisie de courrier électronique sera écrit comme ci-dessous:

    by.css('#email')

  2. Utilisation de plusieurs noms de classe : Si l'élément dom a plusieurs classes, vous pouvez combiner plusieurs classes en tant que sélecteur CSS. Par exemple, si l'élément dom est comme ceci:

<input class="username-class form-control">
// css selector using multiple classes
by.css('.username-class.form-control')
  1. Utilisation du nom de balise avec d'autres attributs : L'expression générale pour écrire le sélecteur CSS à l'aide du nom de balise et d'autres attributs est tagname[attribute-type='attribute-vallue'] . Donc, suivant l'expression le bouton de localisation css pour le bouton de connexion peut être formé comme ceci:
by.css("button[type='submit']") //or
by.css("button[id='signin-button']")

Sélecteurs CSS Exemples Liés