1

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.

Knut Holm
  • 3,988
  • 4
  • 32
  • 54
MathurS
  • 23
  • 1
  • 4
  • Could you quote the actual error? Add an error handler to `then` and print the error. – Sulthan Jun 20 '15 at 11:18
  • The CSS selector looks correct. What is printed on the console? Are you sure there are no more `modal-header` elements on the page (that are e.g. invisible)? – alecxe Jun 20 '15 at 12:59
  • `Failures: 1) Live Departures Board As a user I can add alert for a bus stop Message: Expected '' to contain 'Add a regular alert'. Stacktrace: Error: Failed expectation at [object Object]. (C:\Users\Tests\tests\AcceptanceScenariosLDB.js:71:42) at C:\Users\Tests\node_modules\protractor\node_modules\jasminewd\index.js:94:14 at [object Object].webdriver.promise.ControlFlow.runInNewFrame_` – MathurS Jun 20 '15 at 15:29
  • `warning: more than one element found for locator By.cssSelector(".modal-header > h3 > span") - you may need to be more specific warning: more than one element found for locator By.cssSelector(".modal-header > h3 > span") - you may need to be more specific ++++++++++++++++++++++++++++++++++++++ Failed.` – MathurS Jun 20 '15 at 15:29

2 Answers2

2

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)');
Brine
  • 3,733
  • 1
  • 21
  • 38
  • @Btine Thanks for your suggestions, – MathurS Jun 21 '15 at 06:08
  • 1. First approach: When using **get(0)** throwing exception for unidentified method. 2. Second approach **try :not** works for me. Now the text assertion is getting passed. Note: Also I have seen you have used **$$** in your comment. I am not using these throughout my tests. Are they specific to any language? If this is a best practice for Protractor tests, please share some posts where I can get the details about this operator. – MathurS Jun 21 '15 at 06:18
  • 1
    `$` and `$$` are Protractor shortcuts for `element()` and `element.all()`. They __look__ like, but are not, jquery. https://angular.github.io/protractor/#/api?view=build$ – Brine Jun 21 '15 at 16:07
  • Oh, and I should mention `$` & `$$` are CSS selectors. Glad the `:not` worked for you... – Brine Jun 21 '15 at 16:12
0

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');
});
devbd
  • 431
  • 3
  • 12