Focus issues make tests failing

Question

I'm using osx 10.9.2, protractor 0.21.0, selenium-server-standalone 2.40.0 and chromedriver 2.9.

I'm having some problems, which (I believe) was due to window focusing issue.

When I run my e2e test using protractor, the browser window would show but my terminal will still be the one in focus. This is apparent from "Terminal" was still shown in my menu bar rather than "Chrome" (osx behavior that indicates which app is in focus).

I tried to remedy the situation by doing this to no avail:

browser.driver.getAllWindowHandles().then(function(handles) {
  console.log(handles[0]);
  browser.driver.switchTo().window(handles[0]);
});

This situation causes some of my tests to fail. For example, tests that include clicking a field with bootstrap datepicker won't show the calendar and making my test cannot interact with the datepicker calendar.

The situation is even worse on firefox. Firefox won't even show any dropdown menu when clicked if the browser is not in focus.

Funnily, when I click the browser window manually after it shows up the first time, the tests will work normally.

When I tried a different approach: Doing the test on a freshly installed debian linux, still not working. Behavior is similar as described above.

These are my configuration files: https://gist.github.com/giosakti/ca24a13705d15f4374b0

Answer 1

I found a silver lining! I downgrade the chrome using installer from http://google-chrome.en.uptodown.com/mac/old and the focus issues are gone.. (the issues still persist on firefox though)..

If you search "chrome 34 focus issues" on google, you will find several reports that maybe correlate with this issue. for example: https://productforums.google.com/forum/#!topic/chrome/pN5pYf2kolc

but I still don't know whether this was a bug or expected behavior of chrome 34. So for now I block google updater and use Chrome 33.

Answer 2

Unfortunately IE & Firefox don't ensure the windows handlers order, so we need iterate them. And getting focus on the new browser window/tab can be tricky too.

I've run into these issues so i created:

A helper function to overcome those issues

// Needs an element to make sure we are on the correct popup
var waitForPopUpHandle = function(elm, errorMessage) {
    if (errorMessage == null) {
        errorMessage = 'Expected a new browser tab or window to pop up';
    };
    if (elm == null) {
        throw 'waitForPopUpHandle needs an element to wait for!';
    };

    browser.ignoreSynchronization = true; // not a protractor page
    // IE & Firefox don't ensure the windows handlers order, so we need iterate them.
    // First wait to have more that 1 browser tab
    browser.manage().timeouts().implicitlyWait(300); // a reasonable wait-retry time
    var i = 0;
    var popUpHandle = browser.driver.wait(function() {
        return browser.getAllWindowHandles().then(function(handles) {
            if (handles.length > 1) {
                return browser.switchTo().window(handles[i]).then(function() {
                    return browser.driver.isElementPresent(elm).then(function(result) {
                        if (result) {
                            return handles[i];
                        } else {
                            browser.sleep(400); // give it a break
                            i = i + 1;
                            if (i >= handles.length) {
                                i = 0;
                            };
                            return false;
                        };
                    });
                });
            } else {
                browser.sleep(400); // give it a break
                return false;
            };
        });
    }, browser.params.timeouts.pageLoadTimeout, errorMessage);
    // restore implicit wait
    browser.manage().timeouts().implicitlyWait(0); //restore

    return popUpHandle;
};

Sample usage of that helper

var popUpHandle = waitForPopUpHandle(by.css('div.some-element-unique-to-that-popup'));
browser.switchTo().window(popUpHandle).then(function() {
    browser.ignoreSynchronization = true; // not an angular page
    browser.driver.findElement(by.css('div.some-element-unique-to-that-popup')); // wait for the elm
    // your expect()'s go here ...
    // ...
    browser.close().then(function() {
        // This close() promise is necessary on IE and probably on Firefox too
        var mainTab = waitForMainWindow();
        expect(browser.switchTo().window(mainTab).then(function() {
            browser.ignoreSynchronization = false; // restore if main window is an angular page
            // Ensure we are back on the main window
            // ....
            return true;
        })).toBe(true);
    });
});

And finally waitForMainWindow helper

var waitForMainWindow = function(errorMessage) {
    if (errorMessage == null) {
        errorMessage = 'Expected main browser window to be available';
    };

    browser.ignoreSynchronization = true; // not an angular page
    return browser.driver.wait(function() {
        return browser.getAllWindowHandles().then(function(handles) {
            if (handles.length > 1) {
                var hnd = handles[handles.length - 1];
                return browser.switchTo().window(hnd).then(function() {
                    return browser.close().then(function() {
                        browser.sleep(400); // wait for close
                        return false;
                    });
                });
            } else {
                return handles[0];
            };
        });
    }, 5000, errorMessage);
};