Setup Protractor Automation Test in these Easy Steps

These steps are the steps that need in order to start with automation test script using protractor. Let me explain it in more steps.

Install Node

Install node js is the very first step in your automation. Without this, you will not able to run any npm commands. You can visit their site and download the appropriate application to your computer and install it.

Install Git Bash

I won’t go into detail on how to install git bash on your local, I know you know how to install it. If not, then Google Sensei will show you the way.

Still, what I can do is to give you the link, which I already link in the link 🙂 .

Why do we need to install git bash or any terminals? It’s because we will be running our automation test scripts through terminal. If ain’t that cool for you, you are way super advance to read this 🙂

Install Visual Code Editor

Once we are done install the git bash, we need an editor for ease of use to edit and debug the test scripts. Once again, I will not go into details on how to install this one and give you the link instead. As manual tester you know in and out on how to install and uninstall a program. That’s what I believe. We need to setup the editor with default terminal of bash.

Once we set it up, we are ready to go and install the rest using command line. But first we need to install a very helpful chrome extension before we proceed.

Install Ruto X-Path Finder Chrome Extension

As we will be going into our script, we need a helper to find an absolute xpath or css path or ID. Ruto is very useful for everyone that is doing automation testing.

Install Protractor

You might wonder why protractor? This is only for Angular website right?

And my answer is yes, this is originally for Angular website automation testing purpose but right now you can use it on any website as long you know the certain xpath, css or elements of the html.

Before anything else, create a folder where you want to put your automation. Remember where you save this cause you will need this in the next step.

Then we need to open the visual code that have git bash as default terminal and open the folder that just created. I only show where you can open the folder.

Since when you open the folder it will start anew, open up the terminal again. Type the following in terminal install protractor to your local npm install -g protractor.

Now we are done with the framework installation. Next step is to install selenium server to run the chromedriver.

Install Webdriver Manager

You might wonder why webdriver when I wrote earlier selenium server. With webdriver manager, you don’t need to setup step by step with the install of selenium server standalone. Or download a chromedriver and add it to your path when creating a test script. The webdriver manager will do that for you. It wasn’t name as manager for nothing.

In your terminal, we need to type in webdriver-manager update. Please don’t ask me why it is an update since I also asked the same thing. If anyone knows, you are very much welcome to drop by a comment.

One thing to remember, your version of chrome should match the version of chrome driver that’s being installed in the webdriver manager.

How to know the chromedriver version

Now we need to try start running the selenium webdriver. In your terminal, type in webdriver-manager start and it should look like below image.

Once you’ve seen the result, cancel the selenium server by doing shortcut command to your laptop which is Ctrl + C for windows. Now we can move on to chai assertion installation.

Install Chai Assertions

Protractor framework alone doesn’t have a good assertion, so we need another package to complete it up. In you terminal, type in npm install chai and you should be able to see the output below.

I did not investigate what this is for but since it said that you need to commit this, my instinct said that I need this file. Let’s move on to the final needed installation of the day, the protractor beautiful report.

Install Protractor Beautiful Report

Once you have done running the script, the report is not readible enough or can’t produce graph like reports. With this plugin, we can see graphs and test run in much understandable manner.

In you terminal again, type in npm install protractor-beautiful-reporter –save-dev and the output should look like below.

Now we are all set to start our coding which I believe I will do in the next blog.