Acquia Developer Portal Logo

Running Nightwatch tests in Acquia Cloud IDEs

  • Last updated
  • 1 minute read

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.

  1. 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:

    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.

  2. 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:

    # 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:

    curl -o- -L https://yarnpkg.com/install.sh | bash
export 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.

    yarn --cwd docroot/core install

    Chromedriver

    Acquia Cloud IDEs ship with several tools in place that help make our developer lives easier. One such tool is Chromedriver which is used for running Drupal's functional Javascript tests. We can launch Chromedriver by running:

    chromedriver --port=4444&

    Passing the & character at the end of the command allows the process to continue running in the background.

    Once Chromedriver is successfully running we can proceed to run our tests.

    When we are finished, we can stop the Chromedriver process by running

    pkill chromedriver

  3. Running our tests

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

    1. Run all tests we have in our project (this will include Drupal core's Nightwatch tests as well which may not always be wanted): 
      yarn --cwd docroot/core test:nightwatch
    2. Run tests of a particular tag (e.g only tests related to our project): 
      yarn --cwd docroot/core test:nightwatch --tag myproject
    3. Run all tests included in a particular file e.g.: 
      yarn --cwd docroot/core test:nightwatch --test="../../tests/src/Nightwatch/Tests/checkDrupalLoginScreen.js"
    4. Run a particular test case in a particular file: 
      yarn --cwd docroot/core test:nightwatch --test="../../tests/src/Nightwatch/Tests/checkDrupalLoginScreen.js" --testcase="Test login screen"

Additional Resources

Similar Tutorials