Protractor Tutorial to Automate Angular JS Applications
Protractor is an end-to-end testing framework for AngularJS applications and works as a solution integrator combining powerful tools and technologies such as NodeJS, Selenium Webdriver, Jasmine, Cucumber and Mocha. It was initially developed by Google Developers to support angular applications and later it is released as an open-source framework. Now protractor supports both angular and Non-Angular applications. The protractor is a wrapper written on top of Webdriver.js, all the features which are supported in Selenium Webdriver are supported by it, in addition to angular specific features.
WebDriverJs is the Official javascript implementation of selenium. It uses the Selenium JSON-Wire-Protocol to interact with the browser as selenium java does. Protractor depends on WebdriverJs to interact with the browser.
Protractor Introduction
What is Protractor?
Protractor is an end-to-end testing framework, initially built for Angular application. Currently, it supports both angular and non-angualr applications. Protractor is testers pick for SPA applications. Protractor supports both Typescript and Javascript. The set of features such as support to various Assertion Libraries, CI/CD integration, HTML Results plugin, Headless Browser, Cross-Browser Testing, Parallel Execution, etc. made protractor to gain popularity.
How to Set up Protractor?
Protractor is nodeJS based framework. In order to set up protractor one must have nodeJS installed in his machine. Protractor set up is easy and 3 step process. 1) Download & Install Node 2)Install Protractor 3) Update webdriver manager.
List of Top 7 Protractor IDE
In the market we have a lot of IDEs available, but when it comes to deciding which is the best IDE we always get confused. We have tried to list best IDE's considering the feature Syntax Highlighting, Intellisense, Debugging Capability, Error Highlighting, Keyboard Shortcuts, Plugin Support. Every IDEs feature is explained in detail so that it would be helpful to choose the IDE which is most suitable.
Protractor Basics
Protractor Basics:
Protractor is an end to end automation framework. Unlike other frameworks, protractor doesn't need a complex set up to execute the test cases. At the minimal requirement, protractor needs at least one spec file and one config file. Understanding these two file functionalities are very important as these are building blocks for the protractor framework. The config file will have all the configuration to execute the protractor tests. The spec file holds the actual spec which is written using Jasmine syntax.
Writing first Protractor Test Script:
Protractor specs can be created using typescript or javascript If you are writing your first test case using a protractor framework you need to create two files 1. Configuration file 2. Spec file. once these two are created we can directly execute our first test case using command protractor<configfile_name>.
What is TypeScript?
TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. If you are aware of OOPS principles, typescript support all OOPS concepts just like C# and Java. It is a typed superset, which means it provides an additional layer to javascript. So that it will be easy for developers to come from another programming background and knows the OOPS concept.
Protractor Tutorial - Protractor with TypeScript
Install Visual Studio Code:
Visual Studio Code is the most widely used editor for Protractor automation tests. The visual studio Code supports Intellisense, Keyboard shortcuts and most importunately its free tool. Protractor is node.js based framework that supports typescript. Typescript gives powerful IntelliSense features which provide better coding experience with Visual Studio Code. In this series of Protractor Tutorials, we will be using Visual Studio as a preferred IDE.
Protractor Typescript:
TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. If you are aware of OOPS principles, typescript support all OOPS concepts just like C# and Java. It is a typed superset, which means it provides an additional layer to JavaScript. So that it will be easy for developers to come from another programming background and knows the OOPS concept.
Jasmine Test:
Jasmine is a test framework, which provides BDD (Behaviour Driven Development) functionalities for your automation framework. It is an independent framework i.e there is no dependency with other frameworks and doesn’t require DOM. A describe-block, it-block, and an expectation with a matcher makes one complete test script. Jasmine is used as a test framework for this series of Protractor Tutorial.
Custom Assertions in Jasmine:
Jasmine is a flexible assertion framework, it provides a lot of functionalities along with pre-defined functionalities and assertion libraries, it also allows users to customize the assertions i.e creating our own assertions needs 3 steps tasks. 1. Define the interface 2.Implement custom assertion 3.Add custom assertions to Jasmine
What is Promise in Protractor?:
If you are familiar with C# or Java-based framework, then switching to protractor is easy. But Protractor doesn't work in the same way, traditional automation framework commands return primitive types or objects directly when you execute the command, In protractor almost all the commands return promises, which will be resolved to primitive types or Objects.
Protractor Tutorial - Protractor Commands
Protractor Browser Commands:
Protractor is initially developed for Angular applications, However, it supports all web applications. It is widely used for Single Page Applications (SPA) to automate web applications. In addition to traditional webdriver commands protractor also supports its own set of commands which helps to automate the application faster and easier. The browser object of the ProtractorBrowser class comes handy while executing protractor browser commands.
Protractor Browser Window Commands:
Browser Window Class in Protractor handles the browser-window related operations. It provides functionalities like maximize, resize, get and set window position and size. browser.manage().window() has 5 methods namely: maximize(), getSize(), setSize(), getPosition(), setPosition()
Protractor Browser Navigation Commands:
Navigation commands in Protractor provide four methods to navigate namely back(), forward(), to() and refresh()
ElementFinder in Protractor
element() is alias function in protractor which helps to find the web element. Single webelement in protractor belongs to class ElementFinder this is very similar to selenium WebElement. Once can perform click(), type(), getText() etc... operation on this element. This element takes one argument which is locator. The locator can be proractor specific locators or webdriver inherited locators. Protractor provides user friendly functions on ElementFinder like getWebElement(),locator(),evaluate(),clone(),equals() which helps in faster test case automation.
ElementArrayFinder in Protractor
ElementArrayFinder in protractor is used for locating the element in webpage. ElementArray Finder helps to get the array of elements in the webpage. ElementArrayFinder supports set of functions namely clone(), all(), filter(), get(), first(), last(), count(), locator(), then(), each(), evaluate() etc. inturn helps in faster coding.
There are many more articles planned for our new Protractor Tutorial series, which will be published soon in the future.
