Nightwatch.js

repository·main·Indexed 11 days ago

https://github.com/nightwatchjs/nightwatch

A Node.js-based integrated testing framework powered by the W3C WebDriver API. It provides a unified solution for end-to-end (E2E), component, mobile, API, visual regression, and accessibility testing. Version 3.16.0 supports integrated test runners like Cucumber.js and provides a comprehensive API for element manipulation, browser debugging, and cookie management.

Tokens
38.9K
Snippets
120
Records
145
Agent score
95%

What's inside Nightwatch

  1. Overview of Nightwatch testing capabilities

    main

    Nightwatch is an integrated testing framework powered by Node.js and the W3C Webdriver API. It supports a wide range of testing types within a single framework:

    • End-to-End (E2E) Testing: Testing web applications and websites.
    • Component Testing: Testing components in isolation (React, Vue, Angular, or Storybook) by mounting them in the browser.
    • Mobile App Testing: Native mobile application testing on Android and iOS via Appium.
    • API Testing: Includes request/response assertions, HTML report integration, and mock server support.
    • Visual Regression Testing (VRT): An in-house plugin that captures screenshots, compares them against baselines, generates difference reports, and allows for change approval.
    • Accessibility Testing: Uses the aXe-core plugin to perform ~90 types of accessibility tests for WCAG compliance.
    • Node.js Unit Testing: Support for testing Node.js logic.
  2. Run Nightwatch unit tests and check coverage

    main

    If you are contributing to the Nightwatch repository itself, you can run the internal test suite using Mocha.

    1. Clone and install dependencies:
    git clone https://github.com/nightwatchjs/nightwatch.git
    cd nightwatch
    npm install
    1. Run the complete test suite:
    npm test
    1. Check test coverage: Run npm run mocha-coverage, then open the generated coverage/index.html file in your browser.
    npm test
    npm run mocha-coverage
  3. Install and set up Nightwatch.js

    main

    To add Nightwatch to an existing project or initialize a new one, use the npm init nightwatch@latest command.

    During the interactive setup, you will be asked several configuration questions to tailor the environment:

    • Your preferred Language - Test Runner setup.
    • Where to run e2e tests.
    • The target platform (where you'll be testing on).
    • The directory for end-to-end tests.
    • The base_url of your project.

    Nightwatch will automatically configure the project and copy example tests into your directory to serve as boilerplate.

    # For an existing project's root directory
    npm init nightwatch@latest
    
    # To initialize a new project in a specific path
    npm init nightwatch@latest ./path/to/new/project
  4. Disable automatic WebDriver session start

    main

    If you need to perform operations (like updating capabilities) before the browser starts, set auto_start_session: false in your test_runner.options. You can then manually launch the browser using this.client.launchBrowser() within a Cucumber Before hook.

    Important: When manually launching the browser, you must assign the result to this.browser so Nightwatch can close it automatically, or call .quit() in your Cucumber After() hooks.

    // Configuration
    test_runner: {
      type: 'cucumber',
      options: {
        feature_path: 'examples/cucumber-js/*/*.feature',
        auto_start_session: false
      }
    }
    // _extra_setup.js
    const {Before} = require('@cucumber/cucumber');
    
    Before(async function(testCase) {
      if (!this.client) {
        console.error('Nightwatch instance was not created.');
        return;
      }
    
      this.client.updateCapabilities({
        testCap: 'testing'
      });
    
      this.browser = await this.client.launchBrowser();
    });
    # Run with the extra setup file
    $ nightwatch examples/cucumber-js/features/step_definitions --require {/full/path/to/_extra_setup.js}
  5. Run Cucumber.js tests with Nightwatch

    main

    You can run Cucumber tests using the Nightwatch CLI. If src_folders is defined in your configuration, simply run npx nightwatch. If not, you must provide the path to your step definitions as a CLI argument. You can also pass standard Nightwatch options like --headless or Cucumber-specific options like --parallel.

    # If src_folders is defined in config
    $ npx nightwatch 
    
    # Without src_folders defined
    $ npx nightwatch examples/cucumber-js/features/step_definitions 
    
    # Parallel running with 2 workers
    $ nightwatch examples/cucumber-js/features/step_definitions --parallel 2 
    
    # Using standard Nightwatch options
    $ npx nightwatch examples/cucumber-js/features/step_definitions --headless
  6. Understand the TestSuite class

    main

    The TestSuite class is the core engine responsible for managing the lifecycle of a test suite in Nightwatch.js. It orchestrates the execution of test cases, manages hooks (before, after, beforeEach, afterEach), handles retries, manages the browser session via a client, and coordinates reporting.

    Key responsibilities include:

    • Lifecycle Management: Running global hooks, suite-level hooks, and individual test cases.
    • Session Control: Creating and terminating browser sessions.
    • Error Handling: Distinguishing between assertion errors and unexpected exceptions, and deciding whether to skip subsequent tests or take screenshots.
    • Retries: Implementing both test-level and suite-level retry logic.
    • Global API Injection: Automatically injecting useful globals like browser, expect, By, and element into the global scope (unless disabled via configuration).
    const TestSuite = require('./lib/testsuite/index.js');
    
    // Note: In a standard Nightwatch run, this is managed internally by the runner.
    // The constructor requires a complex configuration object:
    // const suite = new TestSuite({
    //   modulePath: 'path/to/test.js',
    //   modules: ['path/to/test.js'],
    //   settings: { ... },
    //   argv: { ... }
    // });
  7. Use browser.Keys with the update() command

    main

    Nightwatch provides a browser.Keys object containing UTF-8 character constants as defined by the W3C WebDriver specification. You can pass these constants as arguments to update() to simulate keyboard interactions like pressing Enter, Tab, or Arrow keys.

    // Example of using a key constant
    browser.element('input').update('text', browser.Keys.ENTER);
  8. Manage test execution concurrency with the Concurrency class

    main

    The Concurrency class is used by Nightwatch to manage parallel test execution using either child processes or worker threads. It handles the orchestration of multiple test environments and modules, managing a pool of workers to optimize resource usage based on the available CPU cores or the test_workers.workers setting.

    Key behaviors:

    • Child Processes: Uses use_child_process to spawn separate OS processes for tests.
    • Worker Processes: Uses worker threads for parallel execution when testWorkersEnabled is true.
    • Environment Management: Can run multiple test environments (e.g., different browsers or configurations) in parallel.
    • Exit Codes: Tracks a globalExitCode which is updated if any child process returns a non-zero exit code.
    const Concurrency = require('./lib/runner/concurrency/index.js');
    
    // Example initialization
    const concurrency = new Concurrency(
      { 
        use_child_process: true, 
        test_workers: { workers: 4 } 
      }, 
      process.argv,
      true // isTestWorkerEnabled
    );
  9. Define elements, sections, and props in Page Objects

    main

    When initializing a Page subclass, you can define the following structures in the options object to organize your Page Object:

    • elements: A collection of element selectors.
    • sections: A collection of Page Sections.
    • props: A collection of properties.
    • commands: Custom commands specific to this page.

    These are automatically processed and accessible via the elements, section, and props getters on the Page instance.

  10. Understand the Element class

    main

    The Element class is the base class for all element representations in Nightwatch. It encapsulates how an element is located (via selectors, WebElement objects, or webElementId) and how it should behave during test execution (timeouts, retries, error handling).

    Key properties include:

    • selector: The string or object used to find the element.
    • index: An optional numeric index used for filtering results (e.g., when selecting the Nth element).
    • locateStrategy: Determines how the element is resolved (e.g., standard or Recursion).
    • abortOnFailure: Boolean indicating if the test should stop if this element is not found.
    • suppressNotFoundErrors: Boolean indicating if errors should be silenced when the element is missing.
    • timeout and retryInterval: Control the timing of element resolution.

    When an element is defined in a Page Object, it is typically instantiated as an Element subclass.

    // Conceptual representation of an Element definition
    const myElement = {
      selector: '.my-class',
      index: 0,
      timeout: 5000,
      abortOnFailure: true
    };