browser.sleep() blocks browser JavaScript from executing?

[nub340]

Hello,

I'm trying to test an angular-ui/bootstrap carousel. Specifically I want to test that the auto-rotate functionality is working. We have it configured to auto-rotate every 5 seconds, so in order to test this I want to first check the index that the rotator is currently on, wait 5 seconds, then check again and see if the index has incremented by 1.

The problem I'm having is when I use browser.sleep(), no matter how long I sleep it for, the carousel never rotates. When it comes out of the sleep the test immediately fails but then the carousel starts auto-rotating again.

Therefore it seems that calling browser.sleep() doesn't just pause the execution of the driver/test but also the execution of any javascript running on the page. If this is how it's supposed to work, how then would one properly perform the test I outlined above?

As a workaround, this seems to work great:
...check current index...
var stop = new Date().getTime() + 5000;
while (new Date().getTime() < stop) { ; }
...check current index again and compare...

However this obviously feels bad, but I'm not sure how else to block the protractor/selenium test while allowing the browser to continue executing JavaScript. I tried installing the "sleep" npm module but the package currently seems to be broken, so this is what I came up with for the time being.

Any ideas or thoughts on this? Is there a better / "correct" way?

[NickTomlin]

Hi there!

Your question is better suited for StackOverflow or Gitter. Please ask a question there with the 'protractor' tag or post in the Gitter Channel to get help.

From the the getting help section of the README:

Please ask usage and debugging questions on StackOverflow (use the "protractor" tag) or in the Angular discussion group. (Please do not ask support questions here on Github.)

Browser.sleep should not stop the execution of JavaScript on the page. There must be something else going on. Let's dig into into this in one of the mediums suggested above : )

[nub340]

Yep, my bad! I'll post it on Stack tomorrow and provide a link to it here just to tie it together. Thanks for pointing me in the right direction :)

[nub340]

Okay I'm not sure what changed but this morning I can no longer reproduce this issue. Yesterday it seemed isolated to IE11 but when I got in this morning I ran it first thing and it appears to be working just fine now!? Closing issue out.

[nub340]

FYI - I think I determined what the source of my issue was. Sharing for completeness.

By design the carousel will temporarily suspend rotating if you hover the mouse over it. The test that was running just before the carousel test involved clicking a drop-down menu item. The drop-down menu happens to overlay the carousel. When the menu item was clicked, the menu disappears but I'm guessing the last known position of the mouse is now hovering over the carousel, causing it to suspend auto-rotating and thus fail the subsequent test.

I was moving things around and happened to insert a different test before the carousel test which had the effect of not leaving the mouse over the carousel after that test was done, so when it moved on to the carousel test it auto-rotated just fine and the test passed.

To confirm my hypothesis I added code to the carousel test to explicitly move the mouse off of the carousel before proceeding and then put the tests back in their original order and everything seems solid now!

// example: Given carousel is my page object abstraction
browser
    .actions()
    .mouseMove($('body'), { x: 0, y: 0 })
    .perform()
    .then(function () {
        return carousel.getCurrentItemIndex();
    })
    .then(function (currentIndex) {
        return browser.driver.sleep(5000).then(function () {
            return currentIndex;
        });
    })
    .then(function (oldIndex) {
        return carousel.getCurrentItemIndex().then(function (currentIndex) {                        
            expect(currentIndex).toBeGreaterThan(oldIndex);
        });
    });