I am currently working on using protractor to verify the correct display of alerts. Below is an excerpt from one of my spec files.
The HTML code snippet looks like this:
<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>
<span ng-bind-html="content" class="ng-binding">Test Person added successfully. </span>
</div>
Included in the spec.js file for handling 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');
//Returning to the persons list view after adding a person.
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) //Waiting for 10 seconds until alert is visible
.then(function(){
expect(alertElement.isDisplayed()).toBe(true);
});
});
});
An error message is appearing in the terminal stating "Failed: No element found using locator: By.cssSelector(".alert-success")". However, upon manual inspection during browser pause, I can confirm that the alert contains multiple classes and "alert-success" is indeed among them. I am puzzled by what could be causing this discrepancy.
Any assistance would be greatly appreciated.