javascript - 如何用 Protractor 选择单个元素

Question

我是 Protractor 的新手，我有一个 angularjs 脚本，我试图选择元素“收件箱”。这是 3 个 Accordion 类型下拉菜单中的第二个。

<div class="container">
 <div class="ng-scope" ui-view="" style="">
  <div class="logo-container ng-scope">
  <img class="img-responsive center-block" src="images/logo.png">   
 </div>
  <a class="ng-scope" ng-click="toggleNav('/inboxes/alerts')">
   <div class="inboxes inbox-alerts panel">
   <div class="panel-body">
   <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="panel-text ng-binding">
Alerts
<span class="badge ng-binding">3</span>
</span>
</div>
</div>
</a> 
<a class="ng-scope" ng-click="toggleNav('/inboxes/inbox')">
  <div class="inboxes inbox panel">
    <div class="panel-body">
      <span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
      <span class="panel-text ng-binding">
      Inbox
    <span class="badge ng-binding">41</span>
   </span>
  </div>
 </div>
</a>

我能够使用 element.all 做到这一点，但这会返回一个元素数组 “[‘警报 3’、‘3’、‘收件箱 41’、‘41’、‘观察名单 104’、‘104’]” 但我真正想要的是获得特定元素。 下面是我的代码

it('should open & close the Inbox panel', function() {
    var inbox_elm1 = element.all(by.binding('Inbox')).get(2);
      inbox_elm1.click();
 ]);
}); 

如前所述，我正在使用 get(2) 获取第二个元素。但是我不想使用 element.all 来获取这个元素。
我尝试过其他返回 nil 的东西，例如

var inbox_elm1 = element(by.binding('Inbox'));

或

var inbox_elm1 = element.all(by.binding('Inbox')).first(); 

返回一个错误。

考虑到这一点，我已经很容易地成功选择了 Alerts 元素，因为它是第一个使用以下面板的面板:

var alrt_elm = element.all(by.binding('Alerts')).first();
alrt_elm.click();

但是重复上述代码并将“Alerts”更改为“Inbox”只是继续选择 Alerts Accordion 而不是 Inbox Accordion 。建议？抱歉阅读时间过长。

Answer 1

您可以使用 cssContainingText，它将 css 定位器作为第一个参数，将文本作为第二个参数。

var alerts = element(by.cssContainingText('span.panel-text', 'Alerts'));
var inbox = element(by.cssContainingText('span.panel-text', 'Inbox'));

来源:http://www.protractortest.org/#/api?view=ProtractorBy.prototype.cssContainingText