Nightwatch + Webpack

25 Aug 2017

Intro

So you’ve started a fancy new JavaScript project and the first thing you’re probably thinking about is setting up a proper integration testing suite right? Of course you are, because test driven development is the bee’s knees!

Why are integration tests so much better than unit tests? Well, the answer is simple, why test parts of a tech stack separately when you could just test the whole solution from end-to-end!

Nightwatch is a great end-to-end testing framework that works alongside Selenium (for more info on Selenium read this). However, Nightwatch can be a bit tricky to set up now that it no-longer comes with the GeckoDriver by default anymore. It is especially tricky to set up on a gui-less dev environment, as it throws some pretty nasty errors. It is for these reasons that I chose to write up a quick summary of how I got it to work on a gui-less Ubuntu box for a vanilla Webpack project.

Prerequsites

My dev environment is a Ubuntu gui-less box running, Ubuntu 16.04.2 LTS so hopefully you’re running on something similar.

Nightwatch and it’s required browser drivers need a few prrequsites installed to work. So I’ll list them out here. Make sure to get the latest versions of each and/or update them if already installed.

If you’re trying to get this running on a gui-less environment like me, please ensure you have XVFB installed sudo apt-get install xvfb

Install Nightwatch and Selenium Dependencies

Install Nightwatch globally npm install -g nightwatch

I always test on Firefox and Chrome, so we’ll be using two drivers with Selenium, GeckoDriver (Firefox) and ChromeDriver. Assuming you have Yarn installed on your system, get the following packages using yarn install {NAME}

  • Selenium
  • GeckoDriver
  • ChromeDriver

To test if Selenium runs properly on your machine, navigate to the .jar file in your node_modules folder and run java -jar selenium-server-standalone-{VERSION}.jar

Selenium might throw errors if you’re missing some libs. I encountered the following on my machine.

  • libss3
  • libfontconfig1
  • libgconf-2-4

Simply sudo apt-get the library that you’re missing to clear up any errors.

If everything looks good, let’s move on!

Configuring Nightwatch

Nightwatch requires a nightwatch.json at the root of your project file to run. Here’s one that I use that includes GeckoDriver and ChromeDriver. I’ve also added some customized options for both which reduce errors while running tests.

There are a few things that you should double check. Mainly the relative paths to the drivers and the .jar file for Selenium. All three should be in the node_modules folder.

Tests should be stored in a ./tests/ folder. For more info in actually writing tests, check this page out.

Running Nightwatch

To run Nightwatch, we must first have the Selenium server running in the background.

To run a standalone server, simply navigate to the folder containing the .jar file and run java -jar selenium-server-standalone-{VERSION}.jar, where VERSION is the version of selenium currently installed.

Next, lets create a new virtual display using Xvfb, and output any logs to our /logs/ folder.

Xvfb :1 -screen 0 1024x768x16 & > ./logs/xvfb-log.txt

Lastly, we assign this new display and run Nightwatch giving it a browser name as the argument (chrome, firefox)

DISPLAY=:1.0 nightwatch --env {DRIVER NAME} --verbose

If everything is running as intended, your Nightwatch should run through your tests and display an output.

Automating Everything

For Nightwatch to work properly, it always needs a running Selenium server. However manually running the server, and then Nightwatch is not always ideal.

So, I wrote a simple bash script that automates everything and lets the user select the desired browser for testing.

Please keep in mind that this is purely optional, however, it did save me some time :)

Simply run the script with the browser name as the argument (chrome, firefox).

./nightwatchRunner.sh [browserName]

End

Nightwatch is really awesome once everything is set up, it’s well worth the effort.

And yes, Amsterdam was awesome! I highly recommend checking out Rijksmuseum :)

1. bash

Last updated: Sun May 31 17:29:48 on ttys000
Rohan-Likhites-MacBook-Pro:~ rohanlikhite$ cd Documents
Rohan-Likhites-MacBook-Pro:Documents rohanlikhite$ cat myBio.txt

About
-----/
> I am a creative software developer and product designer from Toronto, Canada. I have experience designing, building and testing robust enterprise applications for the web, desktop/mobile platforms, and AR/VR headsets using modern tech stacks. I enjoy modern art, Formula One, green tea and play tennis in my spare time.

Skills
------/
> JavaScript ES6, Golang, Ruby, Rails, Java, C#, Objective C, VueJs, Webpack, Nightwatch, Selenium, Capybara, Intern, Jenkins, HTML5, Slim, CSS3, SASS, Bootstrap/Foundation/Chocolate, Source Code Management (GIT + SVN), Bower, Yarn, NPM, Unity3D, Open Frameworks, Processing, MAX MSP, VPT7, Adobe Creative Suite, Autocad, Revit, Oculus Rift, META SpaceGlass.

Other Interests
---------------/
-Tennis
-Reading
-Formula One
-Architecture
-Music

Links
-----/
Email: [email protected]
Github: imRohan
Dribbble: imRohan
LinkedIn: rohan-likhite
Twitter: @rohanlikhite
Medium: @RohanLikhite


>Press ESC to close window
>Lovingly crafted by Rohan Likhite - 2015


Rohan-Likhites-MacBook-Pro:Documents rohanlikhite$