AngularJS E2E Testing Tools

  • The End-to-end testing is used to verify the correctness of new features, catch bugs and notice regressions when the application grow in size and complexity.
  • The End-to-end testing also used to catch the bugs, when the components are integrated which cannot be captured in a unit test.
  • The AngularJS have built Protractor, an end to end test runner which simulates user interactions that help us to verify the strength of our application.


  • Protractor is an end-to-end test framework for AngularJS application.
  • Protractor is a Node.js program.
  • Protractor uses WebDriver to control browsers and simulate user actions.
  • The jasmine tool used for protractor test syntax.
  • As in unit testing, one or more it blocks are describe the requirement of our application that are comprised in a test file.
  • The it blocks containing the commands and expectations.
  • Command is used to tell Protractor to do something. For example, click on a button or navigate to a page.
  • Expectations is used to tells Protractor to assert something about the application’s state. For example, the current URL or the value of the field.
  • If any expectation is fail with in it block, then the runner marks the it as “failed” and continues on to the next block.
  • The test file has beforeEach blocks that will run before each it blocks for check whether the block passes or fails.
  • The test file has afterEach blocks that will run after each it block for check whether the block passes or fails.

  • Code Explanation for AngularJS E2E Testing Tools
  • The tests may also have helper functions to avoid duplicating code in the it blocks.

Example of the simple test:

  • This test describes the requirements of a ToDo list, specifically, that it should be able to filter the list of items.
describe ('TODO list', function () {
    it ( ‘should filter results’, function() {
    //find the element with ng-model=”user” and type “jacksparrow” into it
    element ( by.model (‘user’)).sendKeys(‘ jacksparrow’); 
    //find the first (and only) button on thepage and click it
    element (by.css(‘:button’)).click();
    //verify that there are 15 tasks
    expect(element.all(by.repeater('task in tasks')).count()).toEqual(15); 

    // Enter 'groceries' into the element with ng-model="filterText"

    // Verify that now there is only one item in the task list
    expect(element.all(by.repeater('task in tasks')).count()).toEqual(1);

Related Searches to angularjs e2e testing tools