---
title: "Nightwatch in Drupal Core"
url: "/articles/nightwatch-in-drupal-core"
type: article
date: 2018-05-11
updated: 2023-10-26
---

# Nightwatch in Drupal Core

#  Nightwatch in Drupal Core 

 Functional Node.js-based browser testing is now available in Drupal core.

 By

 [  Sally Young   ](/about/sally-young) 

 May 11, 2018

  

Drupal 8.6 sees the [addition](https://www.drupal.org/commitlog/commit/2/aeb5733c8a3403fc4b20ac937cc3b2c7d9a8c99a) of Node.js based functional browser testing with [Nightwatch.js](https://nightwatchjs.org/). Nightwatch uses the [W3C WebDriver API](https://www.w3.org/TR/webdriver/) to perform commands and assertions on browser DOM elements in real-time.

Up until now, the [core method for testing](https://api.drupal.org/api/drupal/core%21core.api.php/group/testing/8.5.x) JavaScript and browser interactions in Drupal has been to use either Simpletest or PHPUnit. For tests that require a simulated browser, these have been running on PhantomJS, which is now minimally maintained and has been crashing frequently on [Drupal CI](https://www.drupal.org/drupalorg/docs/drupal-ci) (as of 8.5, Drupal can now use Chromedriver for these tests, however the majority of tests are still [running on Phantom](https://www.drupal.org/project/drupal/issues/2942900)). This situation requires Drupal themers and front-end developers, working primarily with HTML / CSS / JavaScript, to learn the PHPUnit testing framework and specifics of its implementation within Drupal, instead of being able to write tests for page interactions and JavaScript in JavaScript itself.

 ![Nightwatch logo of an owl](/sites/default/files/styles/max_900/public/assets/2018-05/logo-nightwatch.png.webp?itok=TgY_XwVy "logo-nightwatch.png")

Nightwatch is a [very popular](https://www.npmjs.com/package/nightwatch) functional testing framework that has now been integrated into Drupal to allow you to test your JavaScript with JavaScript! Drupal's implementation uses Chromedriver out of the box, however it can also be used with [many other browsers](https://seleniumhq.org/projects/webdriver/) via Selenium. The choice to use Chromedriver was because it's available as a [standalone package](https://nightwatchjs.org/gettingstarted) and so doesn't require you to install Java and Selenium, as well as running the tests slightly quicker.

```javascript
module.exports = {
  before: function(browser) {
    browser
      .installDrupal();
  },
  after: function(browser) {
    browser
      .uninstallDrupal();
  },
  'Visit a test page and create some test page': (browser) => {
    browser
      .relativeURL('/test-page')
      .waitForElementVisible('body', 1000)
      .assert.containsText('body', 'Test page text')
      .relativeUrl('/node/add/page')
      .setValue('input[name=title]', 'A new node')
      .setValue('input[name="body[0][value]"]', 'The main body')
      .click('#edit-submit')
      .end();
  },

};

```

A very powerful feature of Nightwatch is that you can optionally watch the tests run in real-time in your browser, as well as use the [`.pause()`](https://nightwatchjs.org/api/pause.html) command to suspend the test and debug directly in the browser.

[Embedded Video](http://www.lullabot.com/media/oembed?url=https%3A//vimeo.com/269177105&max_width=0&max_height=0&hash=Yls_ysZNTSB_mRXyK_V4kScG-Idc-2jYvITNKmZ6inM)

Right now it comes with one [example test](https://github.com/drupal/drupal/blob/8.6.x/core/tests/Drupal/Nightwatch/Tests/exampleTest.js), which will install Drupal and check for a specific string. The provided `.installDrupal` command will allow you to pass in different scripts to set Drupal up in various scenarios (e.g., different install profiles). Another available command will record the browser's console log if requested so that you can catch any fun JavaScript errors. The next steps in development for core are to write and provide more helpful commands, such as logging a user in, as well as [porting over](https://www.drupal.org/project/drupal/issues/2972229) the [8.x manual testing plan](https://www.drupal.org/node/1777342) to Nightwatch.

You can try Nightwatch out now by grabbing a pre-release copy of [Drupal 8.6.x](https://www.drupal.org/project/drupal/releases/8.6.x-dev) and following the [install instructions](https://github.com/drupal/drupal/blob/8.6.x/core/tests/README.md#nightwatch-tests), which will show you how to test core functionality, as well as how to use it to test your existing sites, modules, and themes by providing your own custom commands, assertions, and tests. For further information on available features, see the [Nightwatch API documentation](https://nightwatchjs.org/api/) and [guide to creating custom commands and assertions](https://nightwatchjs.org/guide/overview/what-is-nightwatch.html). For core developers and module authors, your Nightwatch tests will now be run by Drupal CI and can be viewed in the [test log](https://dispatcher.drupalci.org/job/drupal_patches/57631/console). For your own projects, you can easily run the tests in something such as [CircleCI](https://www.lullabot.com/articles/continuous-integration-drupal-8-circleci), which will give you access to artifacts such as screenshots and console logs.

   

   

 ![Failed test in CircleCI](/sites/default/files/styles/wide_xs/public/assets/2018-05/circleci1.png.webp?itok=lGKaPVSz "circleci1.png")

   

   
   
 ![Test artifacts in CircleCI](/sites/default/files/styles/wide_xs/public/assets/2018-05/circleci2.png.webp?itok=nIaptCPB "circleci2.png")

 Published in:

- [  Drupal Development   ](/topics/drupal-development)
- [  Front-end Development   ](/topics/frontend-development)
- [  JavaScript   ](/topics/javascript)

 

   You must have JavaScript enabled to use this form.

## Get in touch with us

### Tell us about your project. We'd love to hear from you!

 First Name  

 Last Name  

 Your email address  

 Your organization  

 How you heard about us  

 Tell us more 

     Leave this field blank