Zombie.js pressButton Long Callback Delay

Question

I've been trying to figure this out by using a bunch of console.logs and still can't figure out why these load times are so long.

So I have the following code in my beforeEach in my Mocha unit test file.

browser.fill('email', '[email protected]');
browser.fill('password', 'testtest');
browser.pressButton('Login').then(function () {
    console.log("#100 - "+ new Date().getTime());
    done();
});

Pressing the button in this case will have a few redirects then finally display a dashboard page. At the bottom of that html file I have the following code.

<script>
    $(document).ready(function () {
        console.log("#200 - "+ new Date().getTime());
    });
</script>

So after running the tests if I take the value after #100 minus the value after #200 it's always about 5000-6000. Because #200 always gets printed before #100 by like 5-6 seconds.

I don't understand why after loading the page it takes an additional 5-6 seconds about for Zombie.js to call that callback function.

Does Zombie.js have some wait or delay that I'm missing after loading the page? What else could be causing this 5-6 second delay between the page loading and Zombie.js calling that callback function?

EDIT I now have this same problem but with like a 50000ms. And that really adds up super quickly over all of my tests. I still can't figure out why this is happening.

EDIT 2

If I add browser.debug() to my test it prints the following at the very end. It also prints a lot of other stuff but that happens overall pretty quickly. I think the following might be the problem. Just not sure why it's doing that or how to fix it.

zombie Fired setInterval every 5000ms +11ms
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s
zombie Fired setInterval every 5000ms +5s

What is causing all of the zombie Fired setInterval every 5000ms and how do I fix it to make it not take 55000ms+?

EDIT 3

I also added the following code at the beginning of the unit test.

browser.addListener("setInterval",function (a,b) {
    console.log("a: "+a);
    console.log("b: "+b);
});

After printing each zombie Fired setInterval every 5000ms +5s it also prints the following because of that listener.

a: function (){var b,c,d;if(b=window.location.href,b!==h){try{d=JSON.stringify({action:"ping",sid:a.utils.getSessionID(),muid:a.utils.getMerchantID(),referrer:h,url:b,title:document.title}),e.contentWindow.postMessage(d,"*")}catch(f){c=f}return h=b}}
b: 5000

a and b are the same after each one of those 11 zombie Fired setInterval every 5000ms. It doesn't change at all between those 11 times.

I thought that function would help in someway but I still don't understand why this is happening or how to fix it at all.

Answer 1

Zombie loads all resources and processes all events before triggering the callback. Instead of using pressButton, try submitting the form directly and using wait with a terminator callback which will be called after each event. This should show you what's causing the delay:

browser.document.forms[0].submit();
browser.wait(function(){
   //called after each event
}, function() {
   //all events processed
});

From the API docs:

browser.wait(callback)

browser.wait(terminator, callback)

Process all events in the queue and calls the callback when done.

You can use the second form to pass control before processing all events. The terminator can be a number, in which case that many events are processed. It can be a function, which is called after each event; processing stops when the function returns the value false.