With Nightwatch in Drupal 8 for some time now, have you managed to integrate it into your CI workflow? Are you leveraging it to its full potential?
Now just yet?
Even though you're so relieved (like I am) that the days when the PHPUnit was the only option for browser testing in Drupal are over?
Well then, time to get familiar with this JS tool for writing browser tests now included in Drupal core.
In this respect, here's an overview of:
- the most attractive benefits for using a JavaScript tool to test the JavaScript functionality of your Drupal website (compared to PHPUnit browser testing)
- the main reasons for choosing Nightwatch.js over all the other JS testing frameworks
- how to use Nightwatch to test your Drupal websites/web apps (themes, modules etc.); helpful tips and resources on writing your own custom browser tests, commands and assertions and running them in Drupal CI
1. Why Nightwatch.js Over other JS Tools?
There had been a while since JavaScript developers had expressed their need of a... JS-based browser testing tool in Drupal.
One that would overcome all the PHPUnit's limitations and streamline the cycle of setting up continuous integration and writing custom, automated browser tests.
And their wish was more than... legitimate:
To test JS with a JS testing framework.
"Yes, but why precisely Nightwatch.js?"
Before we dig up some key advantages for using this specific JS framework, here's Nightwatch.js summed up in just a few words:
A Node.js-based framework for automated testing and continuous integration that uses W3C WebDriver API to execute commands and assertions on DOM elements.
Here are some of the heavy-weighing reasons for using this tool for Drupal 8 JavaScript testing:
- it's easy to use due to its clear syntax and rich documentation
- it supports both end-to-end and unit testing
- comes with out-of-the-box support for the Mocha runner
- it seamlessly integrates with CI systems (TeamCity, Jenkins, Hudson)
- its pre-built command line test runner enables you to run both sequential and parallel testing sessions, simultaneously, by tags, group or single
- it supports Page Object Model
- it's supported by all browsers
- it enables you to write and to run your own custom commands and assertions
- it supports real-time testing in the browser
- it uses the webdriver protocol
2. Nightwatch in Drupal 8: Your JS Browser Testing Tool in Drupal Core
Do you remember those days when:
- Behat would rule supreme in the PHP world?
- we used to get tangled up in Gherkin syntax whenever we had to write our browser tests?
- as front-end developers working on Drupal web projects we had to know the ins and outs of PHP, there was no other way?
And doing JavaScript testing in Drupal using PHP was prone to error and, overall, a major dread?
But now, now you have Nightwatch in Drupal core. A JS tool for testing... JS code.
It all started with the JavaScript modernization initiative, that whole movement built around redesigning the whole editorial and admin experience in Drupal.
And, in order to improve developers' experience working with Drupal 8, such a modern JS framework meant to streamline the creation of tests for the browser was highly requested.
Now here's the front-end developer's experience with Nightwatch in Drupal 8 in a few words:
You can write your tests in JavaScript and then run them on various web browsers.
While testing your themes and contributed modules in your browser, Nightwatch makes sure that no updates made to your system would affect the JS functionality in question.
“But how do I use Nightwatch to test my Drupal website's JS functionality more precisely?”
First of all, make sure you have these 3 key dependencies:
- Yarn
- Chrome
- Node.js
The tests that you'll write for your website, themes and modules get executed by Drupal CI and will be accessible to any core developers and module authors in the test log.
And, due to the detailed documentation, creating your custom tests is unexpectedly easy.
But, nevertheless, here are some of the most helpful resources for leveraging Nightwatch in Drupal 8:
- the “how to install Nightwatch.js” instructions, on Github
- Nightwatch.js tests in Drupal 8.6 (for example loginTest.js, exampleTest.js, statesTest.js...)
- the developer's guide on writing custom commands (class-style and function-style commands) and assertions
- API reference
- the Drupal.org guide on JavaScript testing using Nightwatch
3. Final Word
Re-imagining the back-end Drupal experience also means modernizing the testing tools available in core.
And, although the CMS already provides substantial test coverage, having Nightwatch in Drupal 8 means having a more modern framework right at hand for testing JS on our websites.
Photo by James & Carol Lee on Unsplash.It means making Drupal more “welcoming” for the community of JavaScript developers and streamlining the whole process of writing and running tests in the browsers.