Getting Started

Introduction

In this series, we will setup an automation framework from scratch to test against the UI frontend of a web application built using AngularJS.

The completed repository can be found at https://gitlab.com/testifyqa/javascript-web-protractor.

We will use the following in our framework:

Protractor
- Protractor is an automation testing tool for web applications testing; combining powerful technologies such as Jasmine, Selenium Webdriver, Node.js etc. The Protractor testing tool is an end to end behaviour-driven testing framework designed to test AngularJS applications, but as it is built on top of Selenium can also be used to test Non-Angular sites
Cucumber
- Cucumber is a software tool used by computer programmers for testing other software. It runs automated acceptance tests written in a behaviour-driven development style. Central to the Cucumber BDD approach is its plain language parser called Gherkin.
Chai
- Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.
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. TypeScript is designed for development of large applications and trans-compiles to JavaScript.

Setting Up Your Source Code Editor

The great thing about Javascript is that pretty much any browser instantly recognises the code. Javascript can be written using any simple text editor (e.g. TextEdit or Notepad), but for the sake of this course, let’s install a good editor like Visual Studio Code 🙂

Download the appropriate Visual Studio Code for your Operating System from https://code.visualstudio.com/download
Follow any instructions and complete the installation of Visual Studio Code.

Launch Visual Studio Code from Command Line / Terminal

Going forwards, it would be nice if we could launch Visual Studio Code from the terminal (if on macOS, on Windows it should be done automatically), so let’s do that now.

Open up Visual Studio Code
Open the Command Palette in Visual Studio Code
- press Ctrl/CMD + Shift + P
- Type
```
shell command
```
  to find the ‘Shell Command: Install ‘code’ command in PATH command, and select that
- Restart the Command Line / Terminal for the new $PATH value to take effect.
  - You’ll be able to type
```
code .
```
    in any folder in the Terminal (or Command Prompt) to start editing files in that folder 🙂

Node.js & NPM (Node Package Manager)

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.

NPM is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.

Setting up Node.js and NPM

MacOS:

Install HomeBrew (Package Manager)

Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple’s macOS operating system.

Go to https://brew.sh/
Copy the command and paste it into Terminal (if you run into any issues, consult https://docs.brew.sh/Common-Issues)…
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

Install Node.js

Open up Terminal and use Homebrew to install Node.js (NPM will be installed with Node)…
```
brew install node
```
You can check that Node.js and NPM were installed successfully by checking their appropriate version numbers in Terminal…
```
node -v
```
```
npm -v
```

Windows

Setting up Chocolatey

Chocolatey is a package manager for Windows. It is a single, unified interface designed to easily work with all aspects of managing Windows software (installers, zip archives, runtime binaries, internal and 3rd party software) using a packaging framework that understands both versioning and dependency requirements. Chocolatey packages encapsulate everything required to manage a particular piece of software into one deployment artefact by wrapping installers, executables, zips, and scripts into a compiled package file. Chocolatey packages can be used independently, but also integrate with configuration managers like SCCM, Puppet, and Chef.

Search for CMD Prompt
Right-click on Command Prompt and select ‘Run as administrator’

Run the following command…

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Let’s now check that Chocolatey was installed successfully by checking the version number (exit and restart command prompt first if necessary)…
```
chocolatey -v
```

Install Node.js

Open up an elevated Command Prompt (run as Administrator again) and use Chocolatey to install Node.js (NPM will be installed with Node)…
```
choco install nodejs
```
1. Agree to install [A]ll scripts if prompted
Let’s then check that Node.js and NPM have been installed successfully by checking their version numbers. Enter each of the following in the elevated Command Prompt…
```
node -v
```
```
npm -v
```

Setting up the Node Packages

Now that we have Node.js and NPM (Node Package Manager) installed, we can install node packages for our framework to use. We can either install it globally using the -g flag, or we can install it locally to the folder we are in. Installing locally will add it to a package.json file, easily allowing any other Developers on the team to get setup with their local environment. Let’s setup our test framework directory now

Open up Terminal (or Command Prompt)
Make a new directory and call it something suitable like ‘protractor-framework’…
```
mkdir protractor-framework
```
Change directory (cd) into the folder you just made…
```
cd protractor-framework
```

Let’s now initialise the directory with NPM, skipping any questions it may ask and going with the defaults (via the -y flag), so that it creates a package.json file. If any other developers checkout this test framework, they can simply run

npm install

and it will install all packages listed in the package.json file.

Make sure you are still in the project root and enter the following command…

npm init -y

You should see output like below in the Terminal (or Command prompt) window…

Wrote to /Users/username/protractor-framework/package.json:

{
  "name": "protractor-framework",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

We are now ready to start adding the Node packages locally in to our test framework directory 🙂

Node Type Definitions

Let’s install the type definitions for using node with TypeScript 🙂

Enter the following in Terminal (or Command prompt), whilst in the root directory of your project, to install the Node type definitions locally to our project…
```
npm install @types/node --save-dev
```

Protractor

Let’s install Protractor locally so other Developers can install it from the package.json…
```
npm install protractor --save-dev
```

TypeScript

Enter the following in Terminal (or Command prompt), whilst in the root directory of your project, to install TypeScript locally to our project (we use a specific version as a workaround for this bug – https://github.com/angular/protractor/issues/5348)…
```
npm install typescript@3.6.4 --save-dev
```

TS-Node

TS-Node is an executable, which allows TypeScript to be run seamlessly in a Node.js environment.

Enter the following in Terminal (or Command prompt), whilst in the root directory of your project, to install ts-node locally to our project…
```
npm install ts-node --save-dev
```

Cucumber

Enter the following in Terminal (or Command prompt), whilst in the root directory of your project, to install cucumber locally to our project…
```
npm install cucumber --save-dev
```

Cucumber Type Definitions

Enter the following in Terminal (or Command prompt), whilst in the root directory of your project, to install cucumber type definitions locally to our project…
```
npm install @types/cucumber --save-dev
```

Protractor Cucumber Framework

Enter the following in Terminal (or Command prompt), whilst in the root directory of your project, to install protractor-cucumber-framework locally to our project…
```
npm install protractor-cucumber-framework --save-dev
```

Chai

Enter the following in Terminal (or Command prompt), whilst in the root directory of your project, to install chai locally to our project…
```
npm install chai --save-dev
```

Chai-As-Promised

This extends Chai with asserting facts about promises

Enter the following in Terminal (or Command prompt), whilst in the root directory of your project, to install chai-as-promised locally to our project…
```
npm install chai-as-promised --save-dev
```

Installing VS Code Extensions

Let’s now open up Visual Studio Code and install some extensions which will be useful for our project 🙂

Open up Visual Studio Code
Select the Extensions icon on the left (the one that looks like four squares, with one square being broken off)
Search for ‘Cucumber (Gherkin) Full Support’ and click the green install button
Search for ‘Gherkin step autocomplete’ and click the green install button
Search for ‘Protractor Test Runner’ and click the green install button

In the next section we will start creating our framework structure and sorting out any configurations 🙂

Liked it? Take a second to support Thomas on Patreon!

A blog on QA Automation

Part 1. Getting Started (Protractor)

Getting Started

Introduction

Setting Up Your Source Code Editor

Launch Visual Studio Code from Command Line / Terminal

Node.js & NPM (Node Package Manager)

Setting up Node.js and NPM

MacOS:

Install HomeBrew (Package Manager)

Install Node.js

Windows

Setting up Chocolatey

Install Node.js

Setting up the Node Packages

Node Type Definitions

Protractor

TypeScript

TS-Node

Cucumber

Cucumber Type Definitions

Protractor Cucumber Framework

Chai

Chai-As-Promised

Installing VS Code Extensions

Next Article

Part 2. Framework Structure & Configuration

Leave a Reply Cancel reply