nightwatchjs-end2end

It provides the initial configuration to start implementing end2end tests for your web apps with NightwatchJS.

Usage no npm install needed!

<script type="module">
  import nightwatchjsEnd2end from 'https://cdn.skypack.dev/nightwatchjs-end2end';
</script>

README

NightWatch JS library Project for end2end testing.

Automate your acceptance tests and run them in real browsers!

nightwatch-logo-with-slogan

Dependencies

  • xvfb (For headless tests only)
  • Java (The version of Java depends on what Version the latest Selenium needs, Selenium 3.x requires Java 8 which was the latest at the time of writing this).
  • Depending on the latest ChromeDriver you will need your Chrome version to be above a specific number. We can't put a specific number here sadly.
  • A BrowserStack account if you want to run the tests through their platform.

How to install

  • run npm install nightwatchjs-end2end

After this command you should be able to run most of the commands explain here, this library is intended to work just after installation. You should not need anything else (apart from configuring some environment variables for BrowserStack).

What the installation process does

  • It downloads Selenium JAR, Chrome and Firefox driver for Selenium.
  • It installs NightwatchJS.
  • It creates a nightwatch.conf.js file in the root of your project.
  • It creates some examples in the folder ./tests/end2end/ so you have something to see this working right away (we are using PageObject pattern).
  • It adds some exceptions to .gitignore file if it exists.
  • It adds some entries to the scripts key in your package.json:
    • test-end2end command.
    • test-end2end-headless command (does exactly the same as test-end2end but headless for CI environments).
    • test-end2end-all command (it runs the test in Chrome, Firefox and IE11 (IE through BrowserStack though)).
    • test-end2end-headless-all command (Same as the command above it's just the headless version for CI environments).
    • test-end2end-browserstack command (It runs the tests through the BrowserStack platform in Chrome).
    • test-end2end-browserstack-chrome command (Same as the one above)
    • test-end2end-browserstack-firefox command (Same but in Firefox)
    • test-end2end-browserstack-safari command (Same but in Safari)
    • test-end2end-browserstack-ieedge command (Same but in Edge)
    • test-end2end-browserstack-ie11 command (Same but in IE11)
    • test-end2end-browserstack-ie10 command (Same but in IE10)

To run tests through BrowserStack (Recommended)

Consider that you need a BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY environment variables correctly set for this to work, , also make sure that the application is running locally and set the ENVIRONMENT_TESTING_URL to the corresponding url and port. I recommend this way because it's easier to tests in multiple Browsers without any struggle.

  • $ npm run test-end2end-browserstack

If you want to run in Chrome, Firefox (real Browsers) and IE (IE through BrowserStack):

  • $ npm run test-end2end-all

and for the headless version of that:

  • $ npm run test-end2end-headless-all

Lastly you can configure whatever browser you want using the existing commands that are created through this library for different browsers, so running:

  • $ npm run test-end2end-browserstack

Will run the tests in BrowserStack but only for Chrome browser, if you want to add more browsers just check your package.json and you will see that there are more options to do so. The idea is that you add those to the same test-end2end-browserstack with &&. An example of that command for running all the possible configurations that this library provides:

  • "test-end2end-browserstack": "npm run test-end2end-browserstack-ci-ieedge && npm run test-end2end-browserstack-ci-ie11 && npm run test-end2end-browserstack-ci-ie10 && npm run test-end2end-browserstack-ci-chrome && npm run test-end2end-browserstack-ci-firefox && test-end2end-browserstack-ci-safari"

Of course you can use those as you wish depending on your needs.

To run tests in real Browsers through plugins

Have in mind that this command uses xvfb-maybe internally, which tries to run the test with xvfb-run if we are in a headless Linux Environment, otherwise it will show the tests in the browser:

  • $ npm run test-end2end

To run the test explicitly headless you can use:

  • $ npm run test-end2end-headless

Tests will default to run in Chrome but if you want to run them in Firefox:

  • $ npm run test-end2end -- -e firefox

Misc (BrowserStack environment configuration)

  • For providing environment variables for your project I recommend dotenv, just follow the instruction they have in their README.md.
  • The installation of this library will create a file called browserstack-local-runner.js on top of it you can put the require('dotenv').config(); line.
  • Finally add the 2 environment variables BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY to your .env file. After this, running npm run test-end2end-browserstack will work as expected and you will see the output in the console and in your BrowserStack's website (with the account of the provided credentials).

Explanation of the example generated.

In the example generated we have 4 page objects, a simple test case, a constants module and a page factory module.

  • Notice that the 4 page objects form a little dependency tree, Bixlabs Page Object depends on Google Result, Google Result depends on Google search. This approach let us reuse code in an easy way (and we present the intentions of the code better through the dependencies).
  • The initializer is where we put the basic options for opening the browser.
  • The test case is where the page objects are used and what actually makes NightwatchJS/Selenium run our code in the browser.
  • The constants module... well it's the constants module.
  • The page factory module is where we put our initialization of objects. The idea behind this file is that we don't have to deal with dependencies in the test cases files, instead we just call a function and the object will come correctly constructed with dependencies satisfied.

Credits to Learning Nightwatch, This project was created on top of that, also if you need more information they put some good documentation on it.