无法为 Protractor UI Nav 测试定位 Angular 元素答案

【问题标题】：Trouble locating Angular element for Protractor UI Nav test无法为 Protractor UI Nav 测试定位 Angular 元素
【发布时间】：2017-05-19 15:29:52
【问题描述】：

我正在尝试选择下拉列表中的第三个选项。以下是有关该元素的一些详细信息：

外部 HTML：

<md-option _ngcontent-c6="" role="option" ng-reflect-value="last90Days" tabindex="0" id="md-option-2" aria-selected="false" aria-disabled="false" class="mat-option"><!--bindings={
  "ng-reflect-ng-if": "false"
}--> Last 90 Days <!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="mat-option-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLElement]"> </div> </md-option>

CSS 选择器：

#md-option-37 > div:nth-child(1)

对不起，糟糕的格式。如果有人对如何选择“过去 90 天”下拉项有任何建议，我将不胜感激。

【问题讨论】：

标签： angularjs protractor qa

【解决方案1】：

根据我从您的信息中了解到的 AngularJS md-select 您需要执行以下操作

// Open the md-select, use the correct selector, this is a demo
$('md-select').click();

// There is an animation, I don't know how long, you need to wait for the animation to be finished. 
// Quick and dirty is a browser.sleep(), but it's better to find a more stable way because if the animation will take longer in the future your test will break
browser.sleep(500);

// Click on you option, this can be done in several ways

// By index
$$('md-option').get(1).click();
// By text
element(by.cssContainingText('md-option', 'your text')).click();

// Wait for the menu to close, this is also an animation
browser.sleep(500);

对于element(by.css('selector'));，我总是使用shorthand notation，对于其余的选择器，请参见docs of Protractor。

我建议使用更好的方法来等待动画完成。这里我使用了browser.sleep()，但这不是未来的证明。您不希望您的脚本依赖睡眠。

希望对你有帮助。

【讨论】：