量角器 element.click() 触发无序列表中上一项的 click 事件

Question

我正在使用量角器对 Angular2 应用程序进行回归测试。当我通过 by.id 访问元素并执行click()事件以导航到应用程序的该部分时，它实际上单击了它上面的项。但是，对于无序列表中的前两个导航项，它的行为并非如此。

app-nav-smart-settings和app-nav-smart-resproperties工作正常...其他所有内容都会单击其上方的项目。

这是 HTML：

    <ng-container role="leftPanel">
    <ul class="nav navigation navigation-main navigation-accordion">
        <li>
            <a (click)="changeComponent('settings')" id="app-nav-smart-settings" [ngClass]="activeComponent == 'settings' ? 'active' : ''">
                <i class="icon-gear text-blue" tooltip content="Settings" position="right"></i> <span>Settings</span>
            </a>
        </li>
        <li>
            <a (click)="changeComponent('reservoirproperties')" id="app-nav-smart-resproperties" [ngClass]="activeComponent == 'reservoirproperties' ? 'active' : ''">
                <i class="icon-dice text-blue" tooltip content="Reservoir Properties" position="right"></i> <span>Reservoir Properties</span>
            </a>
        </li>
        <li>
            <a (click)="changeComponent('relativepermeabilities')" id="app-smartnav-relpermeabilities" [ngClass]="activeComponent == 'relativepermeabilities' ? 'active' : ''">
                <i class="icon-list text-blue" tooltip content="Relative Permeabilities" position="right"></i> <span>Relative Permeabilities</span>
            </a>
        </li>
        <li>
            <a (click)="changeComponent('wellcompletion')" id="app-nav-smart-wellcompletion" [ngClass]="activeComponent == 'wellcompletion' ? 'active' : ''">
                <i class="icon-hammer text-blue" tooltip content="Well and Completion" position="right"></i> <span>Well and Completion</span>
            </a>
        </li>
        <li>
            <a (click)="changeComponent('previewgrid')" id="app-nav-smart-previewgrid" [ngClass]="activeComponent == 'previewgrid' ? 'active' : ''">
                <i class="icon-ladder text-blue" tooltip content="Preview Grid" position="right"></i> <span>Preview Grid</span>
            </a>
        </li>
        <li>
            <a (click)="changeComponent('wellschedule')" id="app-nav-smart-wellschedule" [ngClass]="activeComponent == 'wellschedule' ? 'active' : ''">
                <i class="icon-calendar2 text-blue" tooltip content="Well Schedule" position="right" ></i> <span>Well Schedule</span>
            </a>
        </li>
        <li>
            <a (click)="changeComponent('results')" id="app-nav-smart-results" [ngClass]="activeComponent == 'results' ? 'active' : ''">
                <i class="icon-airplane2 text-blue" tooltip content="Results" position="right" ></i> <span>Results</span>
            </a>
        </li>
    </ul>
</ng-container>

这是量角器调用：

element(by.id('app-smartnav-relpermeabilities')).click();

Answer 1

尝试改为单击包含文本的元素

element(by.id('app-smartnav-relpermeabilities')).element(by.css('[class="icon-list text-blue"]')).click();