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

protractorSelektory CSS


Składnia

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

Parametry

Parametr Detale
selektor css Selektor css, taki jak '.class-name' aby wybrać element na podstawie nazwy klasy
ID Identyfikator elementu dom
Model Model używany dla elementu dom
wiążący Nazwa powiązania służącego do powiązania z określonym elementem

Uwagi

Jak pisać selektory css?

Najważniejszymi atrybutami do pisania selektorów css są klasa i identyfikator domena. Na przykład, jeśli dom html wygląda jak poniżej:

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

Następnie, aby wybrać pole wprowadzania wiadomości e-mail, możesz napisać selektor css w następujący sposób:

  1. Używanie nazwy klasy : Nazwa klasy w selektorze css zaczyna się od znaku specjalnego. (Kropka). Selektor css do tego będzie taki jak .form-control .

    by.css('.form-control')

Ponieważ klasa form-control jest wspólna dla obu elementów wejściowych, budzi to obawy o powielanie lokalizatorów. Dlatego w takiej sytuacji, jeśli identyfikator jest dostępny, zawsze powinieneś preferować użycie identyfikatora zamiast nazwy klasy.

  1. Korzystanie z identyfikatora : identyfikator w selektorze css zaczyna się od znaku specjalnego # (skrót). Zatem selektor css używający elementu wejściowego id do e-maila zostanie zapisany jak poniżej:

    by.css('#email')

  2. Używanie wielu nazw klas : Jeśli element dom ma wiele klas, możesz to zrobić za pomocą kombinacji klas jako selektora css. Na przykład jeśli element dom jest taki:

<input class="username-class form-control">
// css selector using multiple classes
by.css('.username-class.form-control')
  1. Używanie nazwy znacznika z innymi atrybutami : Ogólnym wyrażeniem tagname[attribute-type='attribute-vallue'] do zapisywania selektora css za pomocą nazwy znacznika i innych atrybutów jest tagname[attribute-type='attribute-vallue'] . Tak więc po wyrażeniu lokalizator css dla przycisku logowania można utworzyć w następujący sposób:
by.css("button[type='submit']") //or
by.css("button[id='signin-button']")

Selektory CSS Powiązane przykłady