Eric Elliott has written an article about JavaScript testing: JavaScript Testing: Unit Testing, Functional Testing, and Integration Testing, which explains different types of tests and when to use which test.

This article will explore JavaScript functional testing in more depth and demonstrate using the Nightwatch.js library.

Before we start, let's review what functional testing is and why it is important. Simply put, functional testing is designed to ensure that the application works as expected from a user's perspective.

We are not talking about technical tests like unit testing or integration testing. The goal here is to ensure that users can seamlessly execute specific scenarios such as logging into the platform, purchasing products, and so on.

Key Points

• Nightwatch.js is an end-to-end testing framework based on Node.js. It relies on Selenium for web browser automation, allowing scripted scenarios to be written and then automatically executed by the browser.
• Nightwatch.js requires Node.js to be installed on the machine, and it relies on the Selenium WebDriver API, which requires the Selenium WebDriver server running on Java, so the Java Development Kit (JDK 7) needs to be installed in the user's environment. ).
The configuration of
• Nightwatch.js can be placed in the nightwatch.json file or the nightwatch.conf.js file at the root of the project. It allows the creation of multiple test environments, such as the default environment, staging environment, or production environment.
• Nightwatch.js supports page object methods that wrap the tested page or page snippet into the object to abstract the underlying HTML and common configuration, simplifying the scenario and making the test suite easier to maintain.

Nightwatch.js Introduction

Nightwatch.js describes itself as an end-to-end testing framework based on Node.js. It relies on Selenium, a project designed to facilitate automation of web browsers.

With user-friendly syntax, Nightwatch.js can "script" the scenario and then automatically executed by the browser (not necessarily non-headless).

Installation Nightwatch

Nightwatch itself is a Node.js module, which means you need to install Node.js on your machine. The easiest way is to use a version manager, such as nvm. Nightwatch is distributed on npm, so you can install it like you would install other modules - install it globally with -g or install it in the current project using --save-dev.

npm install --save-dev nightwatch

Nightwatch relies on the Selenium WebDriver API, so it requires a Selenium WebDriver server. It runs on Java, which means you must also install the Java Development Kit (JDK 7) in your environment. You can download the JDK from the Oracle website.

After downloading and installation is complete, you can use java -version to make sure Java is available on your machine. The last step is to download the Selenium standalone server packaged as a jar from the Selenium download page. I suggest you put it in the bin folder in your project.

npm install --save-dev nightwatch

Okay, we are ready now. Let's get started.

Configuration Nightwatch

As you can imagine, Nightwatch has many configurations. Fortunately, we don’t have to know everything to get started. The configuration can be placed in the nightwatch.json file or the nightwatch.conf.js file in the root directory of the project. I recommend using the latter because it is more flexible and allows you to add comments.

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

Note: I personally think it is easier to read when the configuration file is split into smaller configuration objects, and JSON files do not allow this.

In this case, we tell Nightwatch that our tests will be in the tests folder, using a specific Selenium configuration and specific test settings. Let's look at it one by one:

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

With this configuration object, we tell Selenium to run on 127.0.0.1:4444, which happens to be the default value of Nightwatch. We also make sure it starts automatically using the Selenium server we downloaded and stored in the bin folder.

Note: For more advanced usage, be sure to check out the list of all Selenium options.

Continue to the actual test setup:

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

Nightwatch's test_settings option expects an object whose key is the name of each environment, mapped to another configuration object. In this case, we have not set up a custom environment (not yet), so we use the default environment. Later, we can have a staging or production testing environment.

In the environment configuration, we tell Nightwatch which URL to open (for example, the URL for the staging environment will be different) and which browser should be used to run the test.

Note: For more advanced usage, be sure to check out the list of all test options.

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

In this case, we will use Firefox, enable JavaScript, and accept an SSL certificate. We can go a step further and specify a specific browser version (using version) or operating system (using platform).

Note: For more advanced usage, be sure to check out the list of all feature options.

Okay, we now have the correct configuration. It's time to write your first test!

Writing Nightwatch Test

For our tests, we will consider a login page located at /login with an email field, a password field, and a submit button. After submitting the form, the user should be redirected to a page that displays "News Feed".

In our configuration, we specify that the tests are located in a folder named tests. Let's create this tests folder, and a file named login.js.

npm install --save-dev nightwatch

This file will export an object that describes our scenario. Each key (if there are multiple) is the name of the test, mapped to the function containing the steps to be performed.

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

test function exposes an object that provides the API required to describe the scene. The first thing to do is navigate to the login URL. Then, fill in the fields and press the button. Finally, check if we can see the "News Feed" text.

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

Note: Always use .end() to terminate the command list so that the Selenium session is properly closed.

This is very simple! We can now run our test to see if it works:

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

This should give us a result like this:

Note: With the release of Firefox 47, the extension-based version of FirefoxDriver has stopped working. This has been fixed in Firefox 47.1 and Selenium 2.53.1. To run tests using a different browser, check the project's wiki.

The last thing we can do is to avoid accessing the Nightwatch binary every time, create a small npm script as an alias in package.json:

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

Improve Nightwatch Test

Having a lot of functional tests results in a lot of duplicate information, which makes maintenance (yes, the test suite also requires maintenance). To prevent this, we can use the page object.

In the end-to-end testing world, the page object approach is a popular pattern that involves wrapping the page (or page fragment) to the object. The goal is to abstract the underlying HTML and common configuration to simplify the scenario.

Luckily, Nightwatch has an easy way to handle page objects. The first thing we need to do is add the page_objects_path option to the configuration. I think tests/pages makes sense; however, you can specify any folder you want.

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

Now, we can create a login.js file in this folder. The file name will be used as the key to retrieve all the configurations specified in this file, so I recommend giving it a meaningful name.

In this file, we will specify a URL and alias some HTML elements with a friendly name to make writing future scenarios easier.

<code>your_project/
|
|– bin/
|   |– selenium-server-standlone-2.53.1.jar
|
|– tests/
|   |– login.js
|
|- nightwatch.conf.js
`– package.json</code>

Please note that we do not have hardcoded URLs. Instead, we make it dependent on the launchUrl option defined in the environment configuration. In this way, our page object has no context and it works regardless of the environment.

Modifying our tests to use page objects is now very simple. First, we need to retrieve the page from the page object through the client. Each page object is exposed as a function named after the page object file name (e.g. login()).

We can then replace our CSS selector with our alias and prefix it with the @ symbol to indicate that we are referring to a custom name. That's it.

npm install --save-dev nightwatch

Note how we terminate the session on the client itself, not on the page.

Using multiple environments

Ability to run functional tests in different environments is very useful to ensure that local work does not break any user paths, or that staging and production environments work in the same way.

To run tests in a specific environment, we can use the --env option in the CLI. When we omit this option, the default environment (already in our configuration) will be used.

Let's add the staging environment to our configuration.

<code>your_project/
|
|– bin/
|   |– selenium-server-standalone-2.53.1.jar
|
`– package.json</code>

Now, when we run the test, the launch_url options will vary according to the environment.

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

Summary

Let's summarize all of this. Nightwatch.js is a JavaScript framework for writing end-to-end functional testing. It relies on the Selenium WebDriver API and is able to run different browsers automatically.

Writing tests mainly involves defining typical user scenarios. For this purpose, there is a simple but very complete API.

From here I will leave it to you and encourage you to start writing functional tests for your biggest project to make sure you never break user features again!

Nightwatch.js FAQ (FAQ)

What is the main purpose of Nightwatch.js in JavaScript testing?

Nightwatch.js is a powerful and easy-to-use web application and website testing solution written in Node.js. It simplifies the process of setting up continuous integration and writing automated tests. Nightwatch.js can also be used to write Node.js unit tests. It provides a clean syntax that allows you to write tests quickly, and it has a built-in command line test runner that allows you to run tests sequentially or in parallel, grouped or standalone.

How does Nightwatch.js compare to other JavaScript testing frameworks?

Nightwatch.js stands out because of its simplicity and ease of use. It has a concise and clear syntax that makes writing tests less complicated. Unlike other testing frameworks, Nightwatch.js comes with a test runner, no other tools are required. It also supports CSS and XPath selectors, making it more universal when dealing with different types of elements on a web page.

Can Nightwatch.js be used for end-to-end testing?

Yes, Nightwatch.js is an excellent tool for end-to-end testing. It allows you to write tests that simulate users' interactions with your web application, ensuring that all components work together as expected. With Nightwatch.js, you can simulate various scenarios such as form submission, page navigation, and even complex processes.

How to deal with asynchronous testing?

Nightwatch.js uses a simple callback mechanism to handle asynchronous tests. Each test command in Nightwatch.js runs asynchronously in the defined order. The test runner waits for each command to complete before continuing with the next command. This ensures that all commands are executed in the correct order, even if they are asynchronous.

Can I use Nightwatch.js with other test libraries?

Yes, Nightwatch.js can be used with other test libraries. It is designed to work seamlessly with other libraries like Mocha, Jasmine, and QUnit. This allows you to take advantage of multiple test libraries to create a comprehensive test suite for your web applications.

How to set Nightwatch.js for my project?

Setting up Nightwatch.js includes several steps. First, you need to install Node.js and npm on your machine. You can then install Nightwatch.js using npm. After the installation is complete, you need to create a configuration file for Nightwatch.js where you specify your test settings and options. After that, you can start writing tests.

Can Nightwatch.js be used for cross-browser testing?

Yes, Nightwatch.js supports cross-browser testing. It integrates seamlessly with Selenium WebDriver, a tool for automated browsers. This means you can write tests that can run on multiple browsers using Nightwatch.js to ensure that your web application works properly on different platforms.

How to debug tests in Nightwatch.js?

Nightwatch.js provides several debugging test options. You can use the built-in debugger in Node.js or use external tools like Chrome DevTools. Nightwatch.js also provides detailed error messages and stack traces to make it easier to identify and fix problems when tests fail.

Can I use Nightwatch.js for mobile testing?

While Nightwatch.js is mainly used for web testing, it can also be used for mobile testing by integrating with Appium, a popular mobile testing framework. This allows you to write tests for mobile applications using the same syntax and tools as web testing.

How to run tests in parallel using Nightwatch.js?

Nightwatch.js natively supports parallel test execution. You can specify the tests to run in parallel in the configuration file. When you run a test, Nightwatch.js automatically assigns the tests to multiple worker programs, speeding up overall test execution time.

The output maintains the original image formatting and placement. The text has been paraphrased and reorganized for improved flow and readability while preserving the original meaning.

The above is the detailed content of JavaScript Functional Testing with Nightwatch.js. For more information, please follow other related articles on the PHP Chinese website!