E2E test with protractor--Run your first test

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 ( are you waiting for this??)

Now you are ready and can execute:

protractor conf.js

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