protractor CSS Selectors


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


css-selectorA css selector like '.class-name' to select the element on the base of class name
idId of the dom element
modelModel used for dom element
bindingName of the binding which is used to bound to certain element


How to write css selectors?

The most important attributes to write css selectors are class and id of dom. For an instance if a html dom lookes like below example:

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

Then to select the email input field, you can write css selector in following way:

  1. Using class name: The class name in css selector starts with special character .(dot). The css selector for that will be like this .form-control.


Since the form-control class is shared by both input elements so it raises a concern of duplicity in locators. So in such situation if id is available then you should always prefer to use id instead of class name.

  1. Using ID: The id in css selector starts with special character # (hash). So the css selector using id for email input element will be written like below:


  2. Using multiple class names: If dom element has multiple classes then you can with combination of classes as css selector. For example if dom element is like this:

<input class="username-class form-control">
// css selector using multiple classes
  1. Using tag name with other attributes : The general expression to write css selector using tag name and other attributes is tagname[attribute-type='attribute-vallue']. So following the expression the css locator for sign-in button can be formed like this:
by.css("button[type='submit']") //or