When selenium webdriver js / protractor won’t click the div that you want it to click

Somebody. Please! Sit down and dedicate as much of your life as you can to improving the documentation for protractor (and while you’re at it you can do selenium webdriver js as well).

In the test that I want to write I have a div, and when I click it a menu (another div that was previously hidden from view) is displayed, at which point I move the mouse to an option in the menu and I click said option.

Typical everyday usage, right? Should be relatively easy to achieve with protractor/WebDriver, right?
Wrong, because it isn’t relatively easy to achieve. It is, in fact, life threateningly difficult to achieve this with protractor/WebDriver.

Here is the (hideous, and clearly not optimal) way in which I’ve managed to get this done.

        it('should show a user config window if user name is pressed in the menu', function() {
            var menuButton = element(by.css("fooBar-menu-bar div.options"));

            var userWindow;

            browser.driver.wait(function(){
                return menuButton.click().then(function(){
                    return browser.waitForAngular().then(function(){
                        return browser.wait(function(){
                            return element(by.id("MenuOptionsContainer")).isPresent().then(function(flag){
                                if (flag === true){
                                    var item = element(by.id("MenuOptionUser"));
                                    browser.actions().mouseMove(item).perform();
                                    item.click();
                                    return browser.wait(function() {
                                        return browser.isElementPresent(by.tagName("fooBar-window")).then(function(flag){
                                            if(flag === true){
                                                userWindow = element(by.tagName("fooBar-window"));
                                                expect(userWindow.isPresent()).toBe(true);
                                                return flag;
                                            } else {
                                                return false;
                                            }
                                        });
                                    });
                                }
                                else{
                                    return false;
                                }
                            });
                        });
                    });
                });
            });
        });

If you’ve read this far then you’re probably trying to get this to work, too. Or, even better you may have found a way to make it work that is far less awful than the above.
Either way I hope you’ll leave a comment.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s