CODEWITHSUNDEEP
javascriptangularjsselenium-webdriverprotractorangular-ui-bootstrap
jpstearns
jpstearns

Reputation: 105

Testing UI-bootstrap-alert with protractor

I am trying to use protractor to test that my alerts are displayed correctly. Here is one of my spec files.

the HTML Code looks like

<div class="alert ng-scope floater bottom left fadeZoomFadeDown alert-success" 
ng-class="[type ? 'alert-' + type : null]" 
style="display: block;"><!-- ngIf: dismissable -->
  <button type="button" class="close ng-scope" ng-if="dismissable" ng-click="$hide()">
  </button><!-- end ngIf: dismissable --> <strong ng-bind="title" class="ng-binding"></strong>&nbsp;
 <span ng-bind-html="content" class="ng-binding">Test Person added successfully. </span>
</div>

the spec.js file for this alert

it('should be able to add a person to the person list from the list person view', function() {
    element(by.linkText('Persons')).click();
    personsUrl = browser.getCurrentUrl();

    count = element.all(by.repeater('person in persons')).length;
    element(by.linkText('Add Person')).click();
    element(by.id('person.firstName')).sendKeys('Test Person');

    //After adding person return to the persons list view.
    var alertElement = element(by.css('.alert-success'));
    element(by.buttonText('Add Person')).click().then(function(){
        expect(browser.getCurrentUrl()).toEqual(personsUrl);
        browser.wait(protractor.ExpectedConditions.visibilityOf(alertElement), 10000) //Wait for 10 seconds until alert is visible
        .then(function(){ 
             expect(alertElement.isDisplayed()).toBe(true);
        });
    });
});

The terminal is returning an error saying "Failed: No element found using locator: By.cssSelector(".alert-success")", but when I manually test and I pause the browser, I can inspect the alert and see that it has several classes, and alert-success is definitely one of them. I just don't understand what I am doing wrong.

Thanks in advance

Upvotes: 1

Views: 1087

Answers (2)

zayquan
zayquan

Reputation: 8062

One issue with testing <uib-alert> : if you use the dismiss-on-timeout attribute then protractor will detect the timeout as an outstanding action and it will not evaluate any further expressions until the timeout elapses. And once the timeout elapses, the <uib-alert> dissappears !

NB this example is for angular 1.5 and protractor 3.3.0

Given a DOM element

<uib-alert id="successAlert" type="success" close="$ctrl.closeAlert('success')" dismiss-on-timeout="{{$ctrl.alertTimeout}}">Success - You are great, good job!</uib-alert>

This browser.wait block will not work (it will timeout):

doSomethingToMakeTheAlertDisplay();

browser.wait(protractor.ExpectedConditions.visibilityOf(this.successAlert), 15000).then( function(result) {
  console.log("browser.wait is done waiting");
  return result;
})

But if you disable syncronization and then re-enable it then the browser.wait will work

doSomethingToMakeTheAlertDisplay();

browser.ignoreSyncronization = true;

browser.wait(protractor.ExpectedConditions.visibilityOf(this.successAlert), 15000).then( function(result) {
  browser.ignoreSyncronization = false;
  console.log("browser.wait is done waiting");
  return result;
})

The underlying issue is captured here : https://github.com/angular/protractor/issues/169

Upvotes: 1

giri-sh
giri-sh

Reputation: 6962

I suppose the alert wouldn't be visible immediately and won't be on the DOM all the time. So you have to wait until its visible and then perform operations on it. Here's how -

var alertElement = element(by.css('.alert-success'));
element(by.buttonText('Add Tenant')).click().then(function(){
    browser.wait(protractor.ExpectedConditions.visibilityOf(alertElement), 10000) //Wait for 10 seconds until alert is visible
    .then(function(){ 
         expect(alertElement.isDisplayed()).toBe(true);
         //Other operations on alert
    });
});

Hope it helps.

Upvotes: 2

Related Questions