nightwatchjs - 如何等待ajax呼叫完成

Question

I am using nightwatchJS for browser automation. One common usecase I am seeing is, most of the content in my webpage are updated through data from ajax call. So, in my testing, i am looking for a way to hold my testing until i get result from Ajax. I could not find any api in nightwatch or selenium for this.

I have tried with waitForElementVisible , but I feel this will not be suffice. What will happen if my ajax call doesn't return any data.

Has anybody tried this before?

Answer 1

If you know ajax path here is the way how it can be solved, the idea is to attach 'ajaxComplete' event to client and match executed request path:

client
    .timeoutsAsyncScript(15000) // set async exec timeout
    .click('.btn-submit') // ajax form submit
    .executeAsync(
        function(targetUrl, done){
            var nightwatchAjaxCallback = function(ajaxUrl) {
                if(ajaxUrl.indexOf(targetUrl) === 0) { // if url match notify script that xhr is done
                    done(true);
                }
            };

            if(!window.nightwatchAjaxInited) { // make sure ajaxComplete is attached only once

                window.nightwatchAjaxInited = true;

                $(document).ajaxComplete(function(e, res, req) {
                    nightwatchAjaxCallback(req.url);
                });
            }
        },
        ['/ajaxpath'], // expected xhr request path
        function(status){
            // executes once ajax is done
            client.verify.containsText('.entry', 'lorem ipsup...') // verify post is created
        }
    );

Here is command named 'ajaxWait' created from the code above:

exports.command = function(targetUrl, action, callback) {

    this.timeoutsAsyncScript(15000);

    action();

    this.executeAsync(function(targetUrl, done){

        var nightwatchAjaxCallback = function(ajaxUrl) {
            if(ajaxUrl.indexOf(targetUrl) === 0) {
                done(true);
            }
        };

        if(!window.nightwatchAjaxInited) {

            window.nightwatchAjaxInited = true;

            $(document).ajaxComplete(function(e, res, req) {
                nightwatchAjaxCallback(req.url);
            });
        }

    }, [targetUrl], function(status){

        callback();
    });
};

and call should look like this:

client.ajaxWait('/ajaxpath', function(){
    // ajax form submit
    client.click('.btn-submit') // ajax form submit
}, function(){
    // executes once ajax is done
    client.verify.containsText('.entry', 'lorem ipsup...') // verify post is created
})

Answer 2

We have a custom command available here: https://github.com/mobify/nightwatch-commands

We have been working to decouple our commands from adaptive.js specific requirements so anyone can use them in their projects.

You will need to include nightwatch-commands: 1.6.0 in your package.json and reference the custom commands in your settings.json

"custom_commands_path": "./node_modules/nightwatch-commands/commands",
"custom_assertions_path": "./node_modules/nightwatch-commands/assertions",

Answer 3

I am facing similar problems and I see two possible solutions:

1) Do a pause statement before you want to click/check everything that comes after the ajax request. Most of the time the test fails because the ajax request is not yet complete and something is missing.

client.pause(5000); should to the trick.

2) adaptive.js seems to have a waitForAjax implementation for nightwatchJS. Anyhow it seems to be closed code and I can not tell you anything about it.

3) Use the --verbose option to verify what is happening. Verbose can tell you the unhandled error message and this can lead you to a tricky small problem that you can solve.