End To End Automation for Angular Web Apps Using Protractor and Jasmine

If you are a Developer or Software Tester trying to flex your muscles to implement E2E automation testing for your angular application you have come to the right place

Protractor is an end-to-end test framework for Angular applications.Protractor run the test as a mock user using your application in a real browser.

SETUP

Use npm to install Protractor globally with:

npm install -g protractor
To make sure protractor is installed correctly use protractor --version.

The webdriver-manager is a good  tool to  get an instance of a Selenium Server running easily.

webdriver-manager update

Now start up a server with:

webdriver-manager start

This will start the Selenium Server running .

Writing the first Test Suite

You should have an angular app running. If you have an angular app you can continue with it or you can easily generate one using AngularCLI

ng new my-new-pro

All we need to be concerned about is this folder, e2e

Let’s write a basic test case. Here’s is a sample code. I have obtained this code by editing the default angular cli code. The edited portion is highlighted in blue.

The first line import another AppPage class from our own file app.po residing in the same directory. App.po is a Page Object.Page Object Model is a highly recommended design pattern used when writing E2E automation.It will help you in test Maintenance , avoid duplication of code and readability. It help you write readable tests by encapsulating information about the elements on your  page.For example in the code below app.po.ts we have declared a element tourOfHeroLink which represent a h2 element in the DOM .when ever we need the element in a test case we can use this instead of repeatedly calling the selector.We will talk more about selectors later. A Page Object can be reused across multiple tests and you only need to update the Page Object if there is change in the template of the page.

The describe and it syntax is from the Jasmine framework. The things inside a describe function is called as a suite by Jasmine.

The describe function is for grouping related specs, typically each test file has one at the top level. The string parameter is for naming the collection of specs and will be concatenated with specs to make a spec's full name. This aids in finding specs in a large suite. If you name them well, your specs read as full sentences in traditional BDDstyle.

Specs are defined by calling the global Jasmine function it, which, like describe takes a string and a function. The string is the title of the spec and the function is the spec or test. A spec contains one or more expectations that test the state of the code. An expectation in Jasmine is an assertion that is either true or false. A spec with all true expectations is a passing spec. A spec with one or more false expectations is a failing spec.

Since describe and it blocks are functions, they can contain any executable code necessary to implement the test. JavaScript scoping rules apply, so variables declared in a describe are available to any it block inside the suite.

Expectations are built with the function expect which takes a value, called the actual. It is chained with a Matcher function, which takes the expected value.

Each matcher implements a boolean comparison between the actual value and the expected value. It is responsible for reporting to Jasmine if the expectation is true or false. Jasmine will then pass or fail the spec

When writing E2E tests our major tasks are finding DOM elements ,interacting with them,and getting information about the current state of your application.

Protractor help a lot in this.Here we  uses the globals element and by, which are created by Protractor. The element function is used for finding HTML elements on your web page. It returns an ElementFinder object, which can be used to interact with the element or get information from it. In this test, we use sendKeysto type into <input>s, click to click a button, and getText to return the content of an element.

element takes one parameter, a Locator, which describes how to find the element. The by object creates Locators. There are many locator functions provided by protractor which you can refer in protractor documentation .Now we can discuss some of them

Running The Test

Now, let's run our test suite using ng e2e

The test passes successfully.

You can refer our next blog for advanced techniques like taking a screenshot, spec reporting, and other useful techniques and best practices

Subscribe to newsletter
Need more tech news? Tune in to our weekly newsletter to get the latest updates