What is Nightwatch? Straight from the website: "Write End-to-End tests in Node.js quickly and effortlessly that run against a Selenium/WebDriver server.” Added in 8.6, Nightwatch makes it easier to test Drupal’s JavaScript and expands on testing limitations found in the PHPUnit FunctionalJavascript tests — it’s not exactly practical to test JavaScript with PHP! I won’t talk about writing tests in Nightwatch, just running them. You can head over to the documentation to learn more about writing JavaScript tests in Nightwatch.

In order to run Nightwatch, you need to have a few dependencies available: Node.js, Chrome (and Chromedriver), and Yarn. Luckily for us, the web container for DDEV comes with Node.js and Yarn preinstalled! My last post covered getting up and running with Chromedriver as an additional service in your DDEV project, but I’ll reiterate that quickly.

We are going to use a Chromedriver Docker image provided by DrupalCi — the one used when executing tests on Drupal.org. To do this, we need to define a custom service for DDEV. It is petty simple: we just need to add a file called docker-compose.chromedriver.yml to our project's .ddev directory.

version: '3.6'
services:
chromedriver:
container_name: ddev-${DDEV_SITENAME}-chromedriver
image: drupalci/chromedriver:production
labels:
# These labels ensure this service is discoverable by ddev
com.ddev.site-name: ${DDEV_SITENAME}
com.ddev.approot: $DDEV_APPROOT
com.ddev.app-url: $DDEV_URL
# This links the Chromedriver service to the web service defined
# in the main docker-compose.yml, allowing applications running
# in the web service to access the driver at `chromedriver`.
web:
links:
- chromedriver:$DDEV_HOSTNAME

This file goes right into the project’s .ddev directory. Now, restart your project and bring the new service online. The Docker image will be pulled down and the container started, managed by DDEV.

Now that you have Chromedriver available, let's get ready to run Nightwatch.

To get setup we need to install the Node.js dependencies for Drupal core. Inside of the core directory run yarn install to download the Node.js dependencies.

ddev ssh
cd core
yarn install

You should see something similar for the output:

Next, we need to configure Nightwatch by copying .env.example to .env.

cp .env.example .env

We need to edit the DRUPAL_TEST_BASE_URL variable and set it to be http://web, just like our phpunit.xml in the previous posts. By default, Nightwatch will try to use SQLite. DDEV did not provide SQLite until its latest version (LINK). So, just in case, we will configure it to use the database container. Change DRUPAL_TEST_DB_URL to mysql://db:[email protected]/db just like our phpunit.xml configuration. Finally, we need to modify the hostname for Chromedriver. Change DRUPAL_TEST_WEBDRIVER_HOSTNAME from localhost to chromedriver.

We are almost ready. We have two more environment variables to change. Modify DRUPAL_TEST_CHROMEDRIVER_AUTOSTART from true to false. This tells Nightwatch to use the Chromedriver we have running as a service instead of trying to run it on the web container. We also need to pass some arguments to ensure Chrome runs headless. Uncomment DRUPAL_TEST_WEBDRIVER_CHROME_ARGS and set it to --disable-gpu --headless --no-sandbox

Here’s an example of what a finished .env would look like (comments removed):