top button
Flag Notify
    Connect to us
      Facebook Login
      Site Registration

Facebook Login
Site Registration

Small Overview About Angular.Js Protactor E2E

0 votes

What is Protactor Frameowrk in Angular JS?
Protractor, formally known as E2E testing framework, is an open source functional automation framework designed specifically for AngularJS web applications. It was introduced during AngularJS 1.2 as a replacement of the existing E2E testing framework.

Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Protractor is a Node.js program, and runs end-to-end tests that are also written in JavaScript and run with node. Protractor uses WebDriver to control browsers and simulate user actions.

Protractor uses Jasmine for its test syntax. As in unit testing, a test file is comprised of one or more it blocks that describe the requirements of your application. it blocks are made of commands and expectations. Commands tell Protractor to do something with the application such as navigate to a page or click on a button. Expectations tell Protractor to assert something about the application's state, such as the value of a field or the current URL.

If any expectation within an it block fails, the runner marks the it as "failed" and continues on to the next block.


Node Code Setup

npm install -g protractor

This will install two command line tools, protractor and webdriver-manager. Try running protractor --version to make sure it's working.

The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries wit

webdriver-manager update
Now start up a server with:
webdriver-manager start

This will start up a Selenium Server and will output a bunch of info logs. Your Protractor test will send requests to this server to control a local browser. You can see information about the status of the server at http://localhost:4444/wd/hub.​

Simple Example Test

describe('TODO list', function() {
  it('should filter results', function() {

    // Find the element with ng-model="user" and type "jacksparrow" into it

    // Find the first (and only) button on the page and click it

    // Verify that there are 10 tasks
    expect(element.all(by.repeater('task in tasks')).count()).toEqual(10);

    // 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);


Video for Protactor E2E

posted Nov 9, 2016 by Parampreet Kaur

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button

Related Articles

What is Angular Xeditable?

Angular-xeditable is a bundle of AngularJS directives that allows you to create editable elements. Such technique is also known as click-to-edit or edit-in-place. It is based on ideas of x-editable but was written from scratch to use power of angular and support complex forms / editable grids.


bower install angular-xeditable


npm install angular-xeditable

Common Dependencies

  • Basically it does not depend on any libraries except AngularJS itself.
  • For themes you may need to include Twitter Bootstrap CSS.
  • For some extra controls (e.g. datepicker) you may need to include angular-ui bootstrap.
Dependency Injection
var app = angular.module("app", ["xeditable"]);

For More Document Visit here :

Videos about Angular Xeditable - Live View





What is Electron In Angular?

Electron framework (formerly known as Atom Shell) lets you write cross-platform desktop application using HTML, CSS and JavaScript. It's a variant of io.js run-time which is focused on desktop applications instead of web servers.

Electron’s rich native APIs enables us to access native things directly from our pages with JavaScript.

Electron is an open-source project from GitHub that lets us create cross-platform desktop applications with web technologies. It doesn't matter which specific framework we use; if it works for the web, it works for Electron. We can use Angular 2 for Electron apps, and in this tutorial, we explore how to get a desktop image size calculator app wired up.


NPM Code: 

npm install angular-electron

Bower Code:

bower install angular-electron


Angular Injection

angular.module('myModule', ['angular-electron']);


Videos for about Electron in Angular


What is Angular CLI?

Angular cli is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. Not only it provides you scalable project structure, instead it handles all common tedious tasks for you out of the box.
The Angular2 CLI makes it easy to create an application that already works, right out of the box.

Npm Commends:

npm install -g angular-cli


  • Built with BrowserSync: Reload on saves
  • Automatically routed for us
  • Found in the browser at http://localhost:4200
  • Simplicity and ease-of-mind 

Angular-CLI supports all major CSS preprocessors:

  • sass/scss (
  • less (
  • stylus (

Video for Angular Cli


Promises in AngularJS are provided by the built-in $q service. They provide a way to execute asynchronous functions in series by registering them with a promise object.

A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing.

A new instance of deferred is constructed by calling $q.defer().


  • Resolve(value)
  • Reject(reason)
  • Notify(notify)

A new promise instance is created when a deferred instance is created and can be retrieved by calling deferred.promise.


  • then()
  • catch()
  • finally()

$q is integrated with the $rootScope.Scope Scope model observation mechanism in angular, which means faster propagation of resolution or rejection into your models and avoiding unnecessary browser repaints, which would result in flickering UI.

Example Code:

var deferred = $q.defer();
var promise = deferred.promise;
promise.then(function success(data) {
  console.log('Success!', data);
}, function error(msg) {
  console.error('Failure!', msg);
deferred.reject('We failed :(');

Video about Angular Services​


Directives in AngularJS are prefixed with ‘ng-‘. Basically, these directives are included in the HTML elements or tags, like an attribute. By using these ng-directives as attributes of HTML elements, we can provide a special feature to the particular HTML element.

Directives behave as markers on the HTML DOM element attributes. Directives speak to the HTML Compiler of AngularJS to attach a specified behavior. $Compile is the one which compiles the Angular code from the DOM. The custom directives are used to create our own directives.

The ng-app directive defines the root element of an AngularJS application.

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

AngularJS comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for AngularJS to use. When AngularJS bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.

Creating a custom directive

var app = angular.module('Customers', [])  

app.controller('CustomerDetails'function ($scope) {  

        $scope.CustName = "Ravi";  


  app.directive('customInfo'function () {  


Contact Us
+91 9880187415
#280, 3rd floor, 5th Main
6th Sector, HSR Layout
Karnataka INDIA.