Protractor - How to count elements containing specified text - angularjs

Question

I'm trying to do something I thought would be very simple but has had me stumped for two days now. I just want to count the number of elements with a specific class that contain a specific line of text.
My code looks like this:
element.all(by.className('interaction-thumb-titlebar')).map(function(element) {
return element.getText();
});
console.log("View names:", viewNames);
From what I've read, this should produce something like the following:
View names: ['apple', 'orange', 'apple', 'banana']
And I'll simply search through this array to count whatever I need to count.
The problem of course is that everything, these days, has been changed to promises rather than actual values, meaning what I actually get is this:
View names: { closure_uid_209027314: 2004,
flow_:
{ events_: {},
closure_uid_209027314: 1,
activeFrame_:
{ events_: {},
closure_uid_209027314: 1954,
flow_: [Circular],
parent_: [Object],
children_: [Object],
lastInsertedChild_: [Object],
pendingTask_: null,
isLocked_: false,
isBlocked_: false,
pendingCallback: false,
pendingRejection: false,
cancellationError_: null },
schedulingFrame_:
{ events_: {},
closure_uid_209027314: 1954,
flow_: [Circular],
parent_: [Object],
children_: [Object],
lastInsertedChild_: [Object],
pendingTask_: null,
isLocked_: false,
isBlocked_: false,
pendingCallback: false,
pendingRejection: false,
cancellationError_: null },
shutdownTask_: null,
eventLoopTask_: null,
hold_:
{ _idleTimeout: 2147483647,
_idlePrev: [Object],
_idleNext: [Object],
_idleStart: 1437638541678,
_onTimeout: [Function: wrapper],
_repeat: true },
yieldCount_: 3 },
stack_: null,
parent_:
{ closure_uid_209027314: 2002,
flow_:
{ events_: {},
closure_uid_209027314: 1,
activeFrame_: [Object],
schedulingFrame_: [Object],
shutdownTask_: null,
eventLoopTask_: null,
hold_: [Object],
yieldCount_: 3 },
stack_: null,
parent_:
{ closure_uid_209027314: 2000,
flow_: [Object],
stack_: null,
parent_: [Object],
callbacks_: [Object],
state_: 'pending',
handled_: true,
pendingNotifications_: false,
value_: undefined },
callbacks_: [ [Object] ],
state_: 'pending',
handled_: true,
pendingNotifications_: false,
value_: undefined },
callbacks_: null,
state_: 'pending',
handled_: false,
pendingNotifications_: false,
value_: undefined }
I've even tried changing the line return element.getText(); to return 'turtle' and I get exactly the same output.
Can anyone help me?
Andy

Answer 1

There is a locator by.cssContainingText, which may solve your problem in a bit more elegant way: first parameter it applies is a CSS selector, and the second one is a text you want an element to have. You can then use it in conjunction with a method count:
var els = element.all(by.cssContainingText('.interaction-thumb-titlebar', 'apple'));
expect(els.count()).toBe(2);

Answer 2

So as #gillesc pointed out to me in the question's comments, the issue I am having is that even the map function returns a promise. Promises all the way down! Thankfully, this promise will resolve the promises returned in the map function so the code I needed was like so:
element.all(by.className('interaction-thumb-titlebar')).map(function(element) {
return element.getText();
}).then(function(viewNames){
console.log("View names:" viewNames);
});
console.log("View names:", viewNames);
Now to complete the counting function I needed, the complete solution looks like this:
function countElements (css, text) {
//if no text specified, return number of matching elements with css
if(!text) {
return element.all(by.css(css)).then(function(elements){
return elements.length;
});
}
//if text specified, return number of matching elements with css that have the specifed text
return element.all(by.css(css)).map(function(element) {
return element.getText();
}).then(function(textArray) {
var numElements = 0;
for(var i in textArray) {
if(textArray[i] == text) {
numElements++;
}
}
return numElements;
});
}
Which I can use like so:
expect(countElements('.interaction-thumb-titlebar').toBe(4);
expect(countElements('.interaction-thumb-titlebar', 'apple').toBe(2);