Nightwatch Tests in Cloud IDEs

Goal

Learn how to run Nightwatch tests to test your Drupal application on Acquia Cloud IDEs.

Overview

This is a follow up to "Running Nightwatch tests in Acquia Code Studio". As one "normally" may want to run some tests prior to actually committing and opening a merge request in Code Studio, it would stand to reason that we may want to run our tests on the Cloud IDE first. For that purpose lets explore what we would need to do to achieve that.

• A simple Nightwatch test

  To start, let's first copy our simple Nightwatch test from our "Running Nightwatch tests in Acquia Code Studio" tutorial. This test verifies Drupal is up and running by navigating to the Drupal login page and checking to see if the expected fields are present. If you already have Nightwatch tests for your application, you can go ahead and skip to the next step.

  At the root of our project, we will create the directories "tests/src/Nightwatch/Tests" and "tests/src/Nightwatch/Commands". For the purposes of this tutorial, we will only be using the first one to hold our simple test that checks whether we can access Drupal's login screen. In the other, you can put any custom Nightwatch commands you may have that help with running your tests.

  So, once we have our tests directory, let's go ahead and create a file called "checkDrupalLoginScreen.js" and add the following inside:

  copy

   module.exports = { '@tags': ['myproject'], before(browser) { browser .deleteCookies() .resizeWindow(1400, 1024); browser.globals.drupalSitePath = 'sites/default'; }, 'Test login screen': (browser) => { browser // Navigate to the Drupal login page. .drupalRelativeURL('/user/login') // Wait for the body of the page to be visible. .waitForElementVisible('body', 1000) // Check for the username field. .assert.visible('input[name="name"]', 'Login input field is visible') // Check for the password field. .assert.visible('input[name="pass"]', 'Password input field is visible') // Check for the login button. .assert.visible('input#edit-submit', 'Submit button is visible') },};

  Make note of the tag "myproject" we added to our test as we will use it later to run it.

• Setup

  Drupal and Nightwatch settings

  Find your Drupal core directory. If you installed your application using Acquia's acquia/drupal-recommended project, that should be "docroot/core". Inside Drupal's core directory create a file named ".env".

  Open this file in the IDE and add the following variables inside:

  copy

   # The URL where Drupal will be accessible during our tests.DRUPAL_TEST_BASE_URL='http://127.0.0.1'# The Drupal database URL Drupal will use during our tests.DRUPAL_TEST_DB_URL=mysql://drupal:drupal@localhost:3306/drupal# Hostname of the WebDriver server (Chromedriver in our case) that will be used for testing.DRUPAL_TEST_WEBDRIVER_HOSTNAME='127.0.0.1'# Port number of the WebDriver.DRUPAL_TEST_WEBDRIVER_PORT=4444# Whether ChromeDriver should start automatically during tests.DRUPAL_TEST_CHROMEDRIVER_AUTOSTART=false# Arguments for the Chrome browser when used by WebDriver. DRUPAL_TEST_WEBDRIVER_CHROME_ARGS=--disable-gpu --headless --no-sandbox --disable-dev-shm-usage --disable-extensions# Path to the directory where Nightwatch should search for tests. In our case the route of our project since that's where we defined our "tests" directory.DRUPAL_NIGHTWATCH_SEARCH_DIRECTORY=../# Directories to ignore when running tests.DRUPAL_NIGHTWATCH_IGNORE_DIRECTORIES=node_modules,vendor,.*,sites/*/files,sites/*/private,sites/simpletest# Where to store the Nightwatch reports.DRUPAL_NIGHTWATCH_OUTPUT=../tests/reports/Nightwatch

  Yarn

  Lets make sure Yarn is installed. Open a terminal window and run:

  copy

   curl -o- -L https://yarnpkg.com/install.sh | bashexport PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"

  The first command installs Yarn (in case it wasn't already installed) and the 2nd makes it available to the current terminal.

  Once yarn is installed we can install core's front end dependencies, which includes chromedriver, which will help us run our tests.

  copy

   yarn --cwd docroot/core install

  Chromedriver

• Running our tests

  Finally to run our tests we have a few options. From the root of our project we can:

  • Run all tests we have in our project (this will include Drupal core's Nightwatch tests as well which may not always be wanted):

    copy

     yarn --cwd docroot/core test:nightwatch

  • Run tests of a particular tag (e.g only tests related to our project):

    copy

     yarn --cwd docroot/core test:nightwatch --tag myproject

  • Run all tests included in a particular file e.g.:

    copy

     yarn --cwd docroot/core test:nightwatch --test="../../tests/src/Nightwatch/Tests/checkDrupalLoginScreen.js"

  • Run a particular test case in a particular file:

    copy

     yarn --cwd docroot/core test:nightwatch --test="../../tests/src/Nightwatch/Tests/checkDrupalLoginScreen.js" --testcase="Test login screen"

Additional Resources

• Running Nightwatch tests (Drupal core README.md)
• JavaScript testing using Nightwatch
• Running Nightwatch tests in Acquia Code Studio
• Running functional JavaScript tests on Acquia Cloud IDE