Although we haven't written any tests yet, we can simply copy the test script we wrote for our API and place it in scripts/e2e.test.sh:

#!/bin/bash

# Set environment variables from .env and set NODE_ENV to test
source <(dotenv-export | sed 's/\\n/\n/g')
export NODE_ENV=test

# Run our web server as a background process
yarn run serve > /dev/null 2>&1 &

# Polling to see if the server is up and running yet
TRIES=0
RETRY_LIMIT=50
RETRY_INTERVAL=0.2
SERVER_UP=false
while [ $TRIES -lt $RETRY_LIMIT ]; do
  if netstat -tulpn 2>/dev/null | grep -q ":$SERVER_PORT_TEST.*LISTEN"; then
    SERVER_UP=true
    break
  else
    sleep $RETRY_INTERVAL
    let TRIES=TRIES+1
  fi
done

# Only run this if API server is operational
if $SERVER_UP; then
  # Run the test in the background
  npx dotenv cucumberjs spec/cucumber/features -- --compiler js:babel-register --require spec/cucumber/steps &

  # Waits for the next job to terminate - this should be the tests
  wait -n
fi

# Terminate all processes within the same process group by sending a SIGTERM signal
kill -15 0

The only difference between our script and the backend test script is this line:

yarn run serve > /dev/null 2>&1 &

With > /dev/null, we are directing stdout into the null device (/dev/null), which discards anything piped into it. With 2>&1, we are directing stderr to stdout, which will end up at /dev/null eventually. Basically, this line is saying "I don't care about the output of yarn run serve, just throw it away".

We do this because, as Selenium is navigating between different pages, the output from the http-server will be sent to stdout and interspersed between the test results, making it hard to read.

Also, don't forget to install the script's dependencies:

$ yarn add dotenv-cli --dev

We also need to create a .babelrc file to instruct babel-register to use the env preset:

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

Finally, update the package.json with the new script:

"scripts": {
  "build": "rm -rf dist/ && webpack",
  "serve": "./scripts/serve.sh",
  "test:e2e": "./scripts/e2e.test.sh"
}