Skip to content

An XHR "Listener" for Nightwatch.js

License

Notifications You must be signed in to change notification settings

squaredup/nightwatch-xhr

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Nightwatch XHR All Contributors

We've encountered some issues with our e2e tests. We tried checking if clicks on specific links behave as they should (which also meant, send a POST XHR request to a tracking server).

Since we couldn't find any package for that, we wrote one.

So - this package waits for XHR to complete and enables a callback with its values for assertion.

Have fun!

Install

npm install nightwatch-xhr

or

yarn add nightwatch-xhr

In order for your project to be able to access these commands and assertions you need to include them in your projects nightwatch config.

...
"custom_commands_path": ["./node_modules/nightwatch-xhr/src/commands"],
"custom_assertions_path": ["./node_modules/nightwatch-xhr/src/assertions"],
...

or, for legacy (ES5) Javascript, use

...
"custom_commands_path": ["./node_modules/nightwatch-xhr/es5/commands"],
"custom_assertions_path": ["./node_modules/nightwatch-xhr/es5/assertions"],
...

Commands

waitForXHR

Calls the trigger, waits for a delay to complete, and then calls callback with an array of all xhr requests corresponding to the given urlPattern.

waitForFirstXHR

Calls the trigger, and then calls callback with the first xhr request corresponding to the given urlPattern, failing if timeout is exceeded.

listenXHR

Only set up listening. If it has already been called, it resets the requests list.

getXHR

Calls the callback with all requests corresponding to the given urlPattern. If given delay waits that time before failing.

Usage Examples

The function expects these parameters:

  • urlPattern - a regex match for url pattern, will only listen to urls matching this, use '' for all urls.
  • timeout - well, timeout
  • trigger - activate a trigger in the browser after initiating the listener
  • callback - use this to assert the request after it completes

waitForFirstXHR Without Trigger:

module.exports = {
    'Catch all XHRs': function (browser) {
        browser
            .url('some/path')
            .waitForFirstXHR('', 1000, null, function assertValues(xhr) {
                browser.assert.equal(xhr.status, "success");
                browser.assert.equal(xhr.method, "POST");
                browser.assert.equal(xhr.requestData, "200");
                browser.assert.equal(xhr.httpResponseCode, "200");
                browser.assert.equal(xhr.responseData, "");
            })
    }
 }

waitForXHR With Click Trigger:

module.exports = {
    'Catch all XHRs, trigger click': function (browser) {
        browser
            .url('some/path')
            .waitForXHR('', 1000, function browserTrigger() {
                browser.click('.tracking-link-1');
            }, function assertValues(xhrs) {
                browser.assert.equal(xhrs[0].status, "success");
                browser.assert.equal(xhrs[0].method, "POST");
                browser.assert.equal(xhrs[0].requestData, "200");
                browser.assert.equal(xhrs[0].httpResponseCode, "200");
                browser.assert.equal(xhrs[0].responseData, "");
            });
    }
}

"Listening" to a specific URL or Regex

module.exports = {
    'Catch user update request': function(browser) {
        browser
            .url('some/path')
            .waitForFirstXHR(
                'user\/([0-9]*)\/details',
                1000,
                function browserTrigger() {
                    browser.click('.update');
                },
                function assertValues(xhr) {
                    browser.assert.equal(xhr.status, "success");
                    browser.assert.equal(xhr.method, "POST");
                    browser.assert.equal(xhr.requestData, "200");
                    browser.assert.equal(xhr.httpResponseCode, "200");
                    browser.assert.equal(xhr.responseData, "");
                }
            );
    }
}

The callback function returns an object containing the following properties :

  • status (success/error/timeout)
  • method (GET/POST)
  • url (url of request)
  • requestData (raw POSTed data)
  • httpResponseCode (HTTP status response code in string, eg: "200", )
  • responseData (raw response data)

When the anticipated XHR request has not occurred, it fails an assertion. Callback is not called.

With listenXHR / getXHR

module.exports = {
    'Listens and the Gets': function(browser) {
      browser.url('some/path')
      .listenXHR()
      .doStuff()
      .doOtherStuff()
      .getXHR('some/pattern', xhrs => {
          browser.asset.equal(xhrs.find(x => x.method==='POST').status, 200);
      });
    }
}

With listenXHR / getXHR and some delay

module.exports = {
    'Listens and the Gets': function(browser) {
      browser.url('some/path')
      .listenXHR()
      .doStuff()
      .doOtherStuff()
      .getXHR('some/pattern', 1000, xhrs => {
          browser.asset.equal(xhrs.find(x => x.method==='POST').status, 200);
      });
    }
}

Contributors

Thanks goes to these wonderful people (emoji key):


Or Zilca

πŸ’» πŸ“– πŸ’‘ πŸ‘€

Jalil Arfaoui

πŸ’» πŸ“– πŸ’‘ πŸ‘€ ⚠️ πŸ”§

Louis Bompart

πŸ› πŸ”§

Maxime Boudier

πŸ”§ ⚠️

Leonardo Kewitz

πŸ’»

Sergey Titievsky

πŸ’»

Veetil
πŸ› πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

About

An XHR "Listener" for Nightwatch.js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%