E2E Testing on Angular App with Protractor ( tips included)

Head ups! This is not a MASTER COURSE of Protractor, is just one kindly and simple approach to it, so you can start. Once you read this article you will have more questions that for sure, but also you will have an idea on what it protractor and how to start to use it.

What is protractor?

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, using Selenium.

We can say in other words that Protractor is a tool that helps us to test Angular Apps using Selenium.

And in case you are wondering, is ONLY for Angular App. If you are app is not Angular better start looking another tool to test it.

Why choose protractor?

One of the best things of Protractor is that is open source, and how it was created and for is very interesting too ( you can see here the presentation made by Julia, alias the creator, Video ).

Protractor was made so anybody can test UI in a way that is simple and fast. And when I say anybody, I mean not only QA Engineers.

Another main reason to choose Protractor is as usual: community. Since a lot of people is using it, you can find several articles ( here on Medium and also on other pages), and for sure lot of resolved issues on StackOverflow :)

What other tools are available on the field?

Well…. you know you have a lot of fishes in the sea. So you also have other options regarding testing Angular App.

I will mention some of them and you can take a look whenever you want:

Mocha

Chai

Jest

Let’s start!

The first step first, you will need to get node.js and npm on your local. Here I would strongly recommend you to use the console all the time to perform this. Please if you are using Windows look for a console that is similar to Linux. This is written thinking on Mac mainly very similar is on Linux.

1)To get node.js → https://nodejs.org/en/

verify version executing :

node -v

2)To get npm → https://www.npmjs.com/get-npm

* or simply execute:

apt-get install npm

verify version executing :

npm version 

3) To get protractor from npm →https://www.protractortest.org/#/

* just execute:

npm install -g protractor

verify version executing :

protractor --version

Running your first test

In order to run your first test with protractor you will need to :

1 ) get update webdriver-manager

2 ) write the test ( daaa, is obvious that, right?)

3 ) set the configuration to run the test

4 ) run it!

Ok, now you know what is need to be done, let’s go for it.

The first step is pretty easy, just execute:

webdriver-manager update
webdriver-manager start

Note: If you are wondering what you need to do this. Is simply because you are providing protractor with the selenium manager to execute your test. What is going to happen once you have your webdriver-manager up and running you will have the selenium server on http://localhost:4444/wd/hub.

The second step, write the test. Here I want to mention that protractor by default use Jasmine, with BDD makes really easy to write the test. ( You can use other instead Jasmine, but I’m not going to talk about those) . Instead of writing you can simply copy the following and name it helloWorld.js

describe('Angularjs homepage Hello World', function() {
   it ('Say hello world',function() {
     browser.get('https://angularjs.org');
     element(by.model('yourName')).sendKeys('World');
     var welcomeMessage = element.all(by.tagName('h1'));
     expect(welcomeMessage.get(1).getText()).toEqual('Hello World!');
   });
});

Follow step is to configure, use this and name it as conf.js

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['helloWold.js']
}

Last step ( you are waiting for this??)

Now you are ready and can execute:

protractor conf.js

This will finally ( yes, FINALLY) execute your test using protractor!

Using page object with Protractor

Nice and easy till this point, but… for a more complex test, I would strongly recommend to you use Page Object Pattern or you maybe thought that testing on Angular you can escape from it?

My recommendations here are:

1)Create a really useful folders structure. Example e2e/src/pages/section1/miPageOfSection1 e2e/src/pages/section2/miPageOfSection2

2)Use descriptive names for your pages. I know is well known, but it doesn’t hurt to repeat it :)

3)Use po.ts extension ( here I’m assuming you are using Typescript otherwise it po.js) It not a rule, but is a nice convention to use, in order to identify your

4)Create a class that is the base for all pages, you can name it as you want but is commonly named BasePage

I know that ALL people want examples, so here a simple example (I’m using Typescript 3.2.2, Angular 7+, just in case is different from yours)

// Copyright 2019 YOUR_COMPANY_NAME
//
#Get the BasePage from your folder structure, remember?
import { BasePage } from '../../../base-page';
export class SomethingImportantPage extends BasePage {

    readonly ID_ITEM= 'myId';
    ..........
    // element getters
    getMyButton() {
        return this.getElementById(this.ID_ITEM);
    }
    ..........
    // async operations
    /**
     * @method goSomewhere
     * @desc YOUR_DESCRIPTION_HERE
     */
    async goSomewhere() {
        await this.waitForElementToBeClickeable(this.ID_ITEM);
        return this.getMyButton().click();
    }
   ........
}

Some tips

In order to run headless or inside a docker container ( I’m simplifying your life with this, trust me) use the following on your configuration file( conf.js):

'chromeOptions': {
            'args': ['--no-sandbox','--headless','--window-size=1600x1000']

Will explain briefly:

'--no-sandbox'

This one allows us to run the browser inside the docker container, MUST BE THERE.

'--headless'

Does this one really need an explanation? This is the one that tells, in this case, the chrome driver, to run headless.

'--window-size=1600x1000'

Oh, my friend, this one use it in case you are successful to run the test but, BUT somehow the items are not found at point (x,y). If you face that issue then use this magic or you can set window-size full screen.

A tip about Concourse. In case, you deal with this . ( Like I’m dealing right now ) my pieces of advice are:

1. If your team already have set up a pipeline which is working and have the dependencies for your project. Example the checkout for your project. Then use that as a start, simple clone the YAML file and change the name to work a separate pipeline on Concourse ( I believe I’m going to write another article talking about that, just wait for it!)
2. If you need particular stuff, then create your own docker image for running protractor otherwise you can simply use an existing one ( example another myexample)

If you have an issue with webdriver-manager, let say you face this kind of error: This version of ChromeDriver only supports Chrome version 74

This is something that has worked for me, execute the following:

webdriver-manager shutdown
webdriver-manager clean
webdriver-manager update —versions.chrome=74.0.3729.169

Some explanation of what is going on here, on the first line we are stopping all the things the manager have running. On the next one, we clean all, meaning we delete all the drivers the manager have. On the last line, we are downloading a specific version of chrome.

To check it worked run this:

webdriver-manager status

The result should be something similar to :

 I/status - selenium standalone version available: 3.141.59 [last]
 I/status - chromedriver version available: 75.0.3770.140 [last]
 I/status - geckodriver version available: v0.24.0 [last]
 I/status - android-sdk is not present
 I/status - appium is not present

Useful links

TamaraTorres/protractorExample

Protractor Automation Testing for Angular

Is on Spanish

Protractor: End to End testing framework for AngularJS Apps

Worthly to see

15 Best Practices for Building an Efficient Protractor Framework | LogiGear Blog

Julie, the creator

End-to-End testing using protractor with async-await

Thanks for ready and see you on the next one!