{{announcement.body}}
{{announcement.title}}

Running Nightwatch E2E Tests With Headless Chrome and Vue CLI 3

DZone 's Guide to

Running Nightwatch E2E Tests With Headless Chrome and Vue CLI 3

I'll show you how to set up an Ubuntu server for headless Chrome, and how to configure the Vue CLI 3 Nightwatch plugin for headless mode.

· Web Dev Zone ·
Free Resource

Image title

If you're using a virtual development environment like Vagrant or Docker, or perhaps using a remote server for CI, you may want to run your Nightwatch E2E tests in an environment without a dedicated GUI.

In this case, you're going to need to use Chrome in the "headless" mode; however, if you're using the Nightwatch plugin for Vue CLI 3, the default settings will be for regular Chrome, not headless.

You may also like: 

In this brief tutorial, I'll show you how to set up an Ubuntu server for headless Chrome, and how to configure the Vue CLI 3 Nightwatch plugin for headless mode.

Environment Set Up

Your Ubuntu server will need to have Node, NPM, Vue CLI 3, and Chrome installed. You can use the following snippet in a Vagrantfile or manually run it from the terminal.

Provision.sh

JSON




xxxxxxxxxx
1


 
1
apt-get update -y && \ ## Install Node and NPM cd /opt && \ wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz && \ tar xf node-v10.15.3-linux-x64.tar.xz && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/node /usr/local/bin/node && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/node-waf /usr/local/bin/node-waf && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/npm /usr/local/bin/npm && \ ## Install Vue CLI 3 npm install -g @vue/cli@3.5.0 && \ echo "export PATH=\"$PATH:/opt/node-v10.15.3-linux-x64/bin\"" >> /home/vagrant/.bashrc && \ source /home/vagrant/.bashrc && \ ## Install Chrome apt install -y openjdk-11-jdk && \ apt-get install -y libdbusmenu-gtk3-4 libappindicator3-1 libgtk-3-0 libxss1 xdg-utils fonts-liberation && \ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -P /tmp/ && \ dpkg -i /tmp/google-chrome*.deb
1
apt-get update -y && \ ## Install Node and NPM cd /opt && \ wget https://nodejs.org/dist/v10.15.3/node-v10.15.3-linux-x64.tar.xz && \ tar xf node-v10.15.3-linux-x64.tar.xz && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/node /usr/local/bin/node && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/node-waf /usr/local/bin/node-waf && \ ln -s -f /opt/node-v10.15.3-linux-x64/bin/npm /usr/local/bin/npm && \ ## Install Vue CLI 3 npm install -g @vue/cli@3.5.0 && \ echo "export PATH=\"$PATH:/opt/node-v10.15.3-linux-x64/bin\"" >> /home/vagrant/.bashrc && \ source /home/vagrant/.bashrc && \ ## Install Chrome apt install -y openjdk-11-jdk && \ apt-get install -y libdbusmenu-gtk3-4 libappindicator3-1 libgtk-3-0 libxss1 xdg-utils fonts-liberation && \ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb -P /tmp/ && \ dpkg -i /tmp/google-chrome*.deb



Vue CLI 3 Nightwatch Plugin Config

The default settings of Vue CLI 3 are for regular Chrome, not headless, so we'll need to change that.

To make Chrome run in headless mode you can simply pass some flags when you boot it from the CLI. If you're using Nightwatch you can add these flags as args to the Chrome options in the config.

By default, the Vue CLI 3 Nightwatch plugin doesn't have a config file, so you'll need to create one in the root of your Vue project:

$ touch nightwatch.json

Nightwatch.json

JSON




x


 
1
{ "test_settings": { "chrome": { "desiredCapabilities": { "chromeOptions": 
2
{ "args": [ "--headless", "--no-sandbox", "--disable-gpu" ] } } } } }



Note: any settings we add here will be merged with the default config.

Running Tests

If you followed the above tests, your set up is now complete. From the server you've installed this on, run:

$ npm run test:e2e

Fingers crossed you'll see some green ticks!


Further Reading

Topics:
vue.js ,nightwatch ,e2e testing ,chrome ,web dev ,tutorial

Published at DZone with permission of Anthony Gore , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}