Dennis Ferguson Dennis Ferguson - 4 months ago 79x
AngularJS Question

How to select single element with protractor

I am new to protractor and have an angularjs script that I am trying to select the element "Inbox". Which is the second of 3 accordion type drop downs.

<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">
<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">
<span class="badge ng-binding">3</span>
<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">
<span class="badge ng-binding">41</span>

I was able to do this using element.all, but this returns an array of the elements
"[ 'Alerts 3', '3', 'Inbox 41', '41', 'Watch List104', '104’ ]”
but what I really would like is to get the specific element.
Below is my code

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

As mentioned I am using the get(2) to get the second element. But I would like to not use the element.all to get this element.

I have tried other things that are returning a nil such as

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


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

which returns an error.

Now with that in mind, I have successfully selected the Alerts element easy enough since it was the first panel using:

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

But repeating this code above and changing 'Alerts' to 'Inbox' just kept selecting the Alerts accordion and not the Inbox accordion. Suggestions? Sorry for the long read.


You could use cssContainingText which takes a css locator as the first parameter, and the text as the second parameter.

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