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 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?
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.
- 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?
But now, now you have Nightwatch in Drupal core. A JS tool for testing... JS code.
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:
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.
First of all, make sure you have these 3 key dependencies:
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
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.