Protractor: getText() doesn't work [Unable to get text from Span in header]

Question

AngularJS: Alert Popup

<div class="modal-header">
<h3>
<span class="firefinder-match" data-ng-show="dialog.stopOrService === 'STOP'" data-translate-values="{"days":"ALL_DAYS","time":"2015-06-20T08:39:46.654Z","stopOrService":"STOP","stopName":"Fairbairn Av after War Memorial Service [3473]","serviceList":[{"serviceNumber":"910","id":"6350571294206984726","name":"910 City via Majura Business Park(Net14NoAir"}],"selectedService":null,"receiveSituations":false,"processing":false}" data-translate="liveDepartures.alerts.addModal.stopHeader">Add a regular alert for upcoming buses at Fairbairn Av after War Memorial Service [3473]</span>
<span class="firefinder-match ng-hide" data-ng-show="dialog.stopOrService === 'SERVICE'" data-translate-values="{"days":"ALL_DAYS","time":"2015-06-20T08:39:46.654Z","stopOrService":"STOP","stopName":"Fairbairn Av after War Memorial Service [3473]","serviceList":[{"serviceNumber":"910","id":"6350571294206984726","name":"910 City via Majura Business Park(Net14NoAir"}],"selectedService":null,"receiveSituations":false,"processing":false}" data-translate="liveDepartures.alerts.addModal.serviceHeader">Add a regular alert for route </span>
</h3>
</div>

Assertion: Using getText()

        var pageHeader = element(by.css('.modal-header > h3 > span'))
        expect(pageHeader.getText()).toContain('Add a regular alert');
        pageHeader.getText().then(function(text){
            console.log("++++++++++++++++++++++++++++++++++++++" +text);

        });

Problem: Not able to get text from element I have tried a number of ways to identify the 'Text' on model header but could not succeed in getting the text from the element. The problem looks like the element is not getting identified. Can someone please help me to resolve this issue.

Answer 1

As the error confirms, your selector is returning both spans within the .modal-header. You could try catching them both and specifying one (Note: I've not tested these):

var pageHeader = $$('.modal-header > h3 > span');
expect(pageHeader.get(0).getText()).toContain('Add a regular alert');

Or try another approach on the selector. Maybe try :not to return only the visible span:

var pageHeader = $('.modal-header span:not(.ng-hide)'); 

Answer 2

As the warning says, you have multiple elements (an array) found by the locator, so get(n) will be needed. you can wait until the getText() promise to resolve, and finally go for assert/expect.

var spansInPageHeader = element.all(by.css('.modal-header > h3 > span'));
spansInPageHeader.get(1).getText().then(function(text){
    expect(text).toContain('Add a regular alert');
});