Looking for protractor Answers? Try Ask4KnowledgeBase
Looking for protractor Keywords? Try Ask4Keywords

protractorSelettori CSS


Sintassi

  • by.css ( 'css selettore')
  • by.id ( 'id')
  • by.model ( 'modello')
  • by.binding ( 'vincolante')

Parametri

Parametro Dettagli
css selettore Un selettore css come '.class-name' per selezionare l'elemento sulla base del nome della classe
id Id dell'elemento dom
modello Modello utilizzato per l'elemento dom
rilegatura Nome del legame che viene utilizzato per il collegamento a determinati elementi

Osservazioni

Come scrivere i selettori CSS?

Gli attributi più importanti per scrivere i selettori di CSS sono la classe e l'id di dom. Per un'istanza se un dom HTML si presenta come nell'esempio seguente:

  <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>

Quindi per selezionare il campo di inserimento dell'email, puoi scrivere il selettore css nel seguente modo:

  1. Usando il nome della classe : il nome della classe nel selettore css inizia con un carattere speciale (punto). Il selettore css per quello sarà come questo .form-control .

    by.css('.form-control')

Poiché la classe di form-control della form-control è condivisa da entrambi gli elementi di input, ciò solleva una preoccupazione di duplicità nei localizzatori. Quindi, in tale situazione, se id è disponibile, si dovrebbe sempre preferire l'uso di id invece del nome della classe.

  1. Utilizzo dell'ID : l'id nel selettore CSS inizia con il carattere speciale # (hash). Quindi il selettore css usando id per l'elemento di input email verrà scritto come di seguito:

    by.css('#email')

  2. Usando più nomi di classi : Se l'elemento dom ha più classi, allora puoi con una combinazione di classi come selettore di CSS. Per esempio se l'elemento dom è così:

<input class="username-class form-control">
// css selector using multiple classes
by.css('.username-class.form-control')
  1. Usare il nome del tag con altri attributi : l'espressione generale per scrivere il selettore css usando il nome del tag e altri attributi è tagname[attribute-type='attribute-vallue'] . Quindi, seguendo l'espressione, il locatore di css per il pulsante di accesso può essere formato in questo modo:
by.css("button[type='submit']") //or
by.css("button[id='signin-button']")

Selettori CSS Esempi correlati