Hey folks! we are going to see about Protractor for AngularJS apps, I will try to keep it simple but also informative to get started with Protractor right away.
Using Protractor for past 1 year, and had a good experience working in Js World.
This blog post will have 3 different sections,
- What is Angular Js?
- Protractor and WebDriverJs
- Example setup using Protractor
While its not needed to explain about AngularJs here as a part of this blog post, when you have n number of resources in the web. I will just add a short note just to keep it at one place for the reader’s pleasure.
- It lets you to use HTML as your custom designed language to express your apps component.
- It’s an enhanced version of HTML with AngularJs related attributes. These attributes are called as ng-directive.
- (ng)Directives are pointers on a DOM element that informs AngularJs compiler to execute certain behaviour to the DOM element.
- ngDirective’s are prefixed with ng, it also allows the developers to customize their own directive.
- It has Data Binding and Dependency Injection mechanism
ng – click -> Specifies an expression to evaluate when an element is being clicked.
ng- app -> Defines the root element of an application.
Angular starts parsing the DOM elements suing $compile service when the application bootstraps. More here on the official docs.
Angular is mostly used along the full stack development toolkit, MEAN. It comprises of MongoDB, Express, Angular and Nodejs
Assuming that, the above piece of information is helpful and got a fair understanding of what AngularJs, lets see how Protractor fits in for Angular.
Protractor and WebDriverJs
Protractor is made for AngularJs, you would have read this statement often, so what it really means,
- Protractor waits for Angular to be bootstrapped
- Protractor know the structure of Angular and its directive mechanism
- Protractor knows the dependency injection of Angular.
- Listens to the internals of Angular, $http and $timeout – helps determine when to proceed to next step.
- Protractor provides Angular specific locators(that is ng-directives) ng-model, ng-options, ng-binding..
Webdriver Js is completely asynchronous and based on Promises handled by Control Flow
I would leave it to the readers to have a look through and understand it, I would consider a separate blog post itself, if there are any request for it.
Protractor uses Jasmine-WebDriver which wraps around the Jasmine modules. Using Jasmine as a test framework would be an ideal choice.
Here is the typical workflow,
Protractor is a wrapper around WebDriver Js and its asynchronous. Your test scripts send commands to the Selenium Server, which in turn communicates with the browser driver.
Image from Protractor docs:
JsonWireProtocol communication happens between the server and the browser.
Lets see the difference between the WebDriverJs API and Protractor API
Example setup of Protractor
Go through this page it gives a good explanation about a spec file and config file. Nothing more is needed.
I have put together a simple Project for a new starter. Feel free to add in tests by sending in PR’s.
Link to repository.
Look out for posts relating to Protractor…!
Am a contributor the Protractor tool too..!!
List of my contributions to the tool