Protractor is an end-to-end test framework for AngularJS applications.

Protractor is a wrapper (built on the top) around Selenium WebDriver, so it contains every feature that is available in the Selenium WebDriver. Additionally, Protractor provides some new locator strategies and functions which are very helpful to automate the AngularJS application. Examples include things like: waitForAngular, By.binding, By.repeater, By.textarea, By.model, WebElement.all, WebElement.evaluate, etc.

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

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.

   by.css('.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.

2. 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:

   by.css('#email')

3. 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
by.css('.username-class.form-control')

4. 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
by.css("button[id='signin-button']")

This section explains how we can debug protractor tests.