Getting Started

Introduction

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

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

We will use the following in our framework:

  • WebDriverIO
    • Webdriver IO is a selenium wrapper written in javascript and runs on node.js. It is a custom implementation of W3C webdriver protocol. It is an independent implementation of the JSON Wire Protocol by Christian Bromann (SO profile), who works at Sauce Labs, a provider of cloud-base cross-browser testing. WebdriverIO wraps its lower level requests into useful commands, with a concise syntax: client.
  • 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.

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 🙂

  1. Download the appropriate Visual Studio Code for your Operating System from https://code.visualstudio.com/download
  2. 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.

  1. Open up Visual Studio Code
  2. 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.

  1. Go to https://brew.sh/
  2. 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
  1. Open up Terminal and use Homebrew to install Node.js (NPM will be installed with Node)…
    brew install node
  2. 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.

  1. Search for CMD Prompt
  2. Right-click on Command Prompt and select ‘Run as administrator’
  3. 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"
  4. 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
  1. 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
  2. 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 installed, we can install 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. Let’s setup our test framework directory now

  1. Open up Terminal (or Command Prompt)
  2. Make a new directory and call it something suitable like ‘webdriverio-framework’…
    mkdir webdriverio-framework
  3. Change directory (cd) into the folder you just made…
    cd webdriverio-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.

  1. 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/webdriverio-framework/package.json:
      
      {
        "name": "webdriverio-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 🙂

WebDriverIO

  1. Enter the following in Terminal (or Command prompt)…
    npm install --save-dev webdriverio@4

Selenium Standalone

This is a handy utility for getting Selenium to run locally on our computer.

  1. Enter the following in Terminal (or Command prompt)…
    npm install --save-dev wdio-selenium-standalone-service

Babel

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Babel-Register

  1. Enter the following in Terminal (or Command prompt)…
    npm install --save-dev @babel/register

Babel-Core

  1. Enter the following in Terminal (or Command prompt)…
    npm install --save-dev @babel/core

Babel-Preset-Env

  1. Enter the following in Terminal (or Command prompt)…
    npm install --save-dev @babel/preset-env

Chai

Let’s now install our assertion library.

  1. Enter the following in Terminal (or Command prompt)…
    npm install chai

Glob

This package allows us to match files using the patterns the shell uses, like stars/asterisks and stuff.

  1. Enter the following in Terminal (or Command prompt)…
    npm install glob

Reporters

WDIO-Spec-Reporter

This package is a reporter that displays pretty information on our test passes and failures in the console.

  1. Enter the following in Terminal (or Command prompt)…
    npm install --save-dev wdio-spec-reporter

WDIO-Cucumber-Snippet-Reporter

This package is a reporter that allows us to see undefined step definitions in the console, which will be useful later when creating our test scenarios.

  1. Enter the following in Terminal (or Command prompt)…
    npm install --save-dev wdio-cucumber-snippet-reporter

Cucumber

We will install Cucumber test framework during the setup of our WebDriverIO configuration!

In the next section, we will create our wdio config file using the Test Runner command line interface 🙂

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

Next Article

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.