Protractor - how to select heavily nested dropdown element?

Question

The site I am testing has a dropdown menu with the following code:

<ul class="nav navbar-nav navbar-right" data-ng-show="authentication.user">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span data-ng-bind="authentication.user.displayName" class="ng-binding">Testy McTesterson</span> <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a href="/#!/userprofile">View Profile</a>
                </li>
                <li>
                    <a href="/#!/settings/profile">Edit Profile</a>
                </li>
                <li id="h_manage_social_accounts">
                    <a href="/#!/settings/accounts">Manage Social Accounts</a>
                </li>
                <li data-ng-show="authentication.user.provider === 'local'" class="">
                    <a href="/#!/settings/password">Change Password</a>
                </li>
                <li class="divider"></li>
                <li>
                    <a href="/auth/signout">Signout</a>
                </li>
            </ul>
        </li>
    </ul>

How can I get protractor to click the links like "Signout" within the dropdown menu?

Answer 1

First, you need to click the toggle button, then choose the element from the dropdown:

element(by.css('li.dropdown > a.dropdown-toggle')).click();
element(by.linkText('Signout')).click();