Angular e2e Testacular Test: how to report visibility?

Question

Question

Has anyone successfully checked if Bootstrap mod is displayed when a button is clicked?

More details

I am writing a Testacular test that checks to see if the Bootstrap mod is displayed when a button is clicked. The problem is that calling css('display') returns 'none' , although I can see the window pops up and is visible.

I am wondering if something is happening with Bootstrap Modal, which duplicates the html block and then displays this with a different identifier. I certainly hope not!

code

Scenario

 describe('e2e', function() { beforeEach(function() { browser().navigateTo('/chessClub/'); }); it('should display editor when add member button clicked', function() { expect(element('title').text()).toBe("Chess Club"); expect(element('#myModal').css('display')).toBe('none'); //as expected, it is none //click the button to show the modal element('#addMemberButton','Add Member Button').click(); //this 2nd expect still return 'none' expect(element('#myModal').css('display')).toBe('block'); }); }); 

test output

 Chrome 25.0 e2e should display editor when add member button clicked FAILED expect element '#myModal' get css 'display' toBe "block" /Users/jgordon/learning/chessClub/web-app/test/e2e/scenarios.js:17:4: expected "block" but was "none" 

HTML

 <!-- Modal --> <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">{{editorLabel}}</h3> </div> <div class="modal-body"> <form> <label> Name </label> <input type="text" ng-model="editedMember.name" placeholder="John Doe"> <label> Grade </label> <input type="text" ng-model="editedMember.grade"> <label> Ladder Position </label> <input type="text" ng-model="editedMember.ladderPosition"> </form> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary" ng-click="saveMember()">Save changes</button> </div> </div> 

Answer 1

I just needed to call sleep(1) in the test. I assume that the code that shows the modal was not as fast as the test was when checking the style.

Answer 2

One way, though a bit of a hack is using the selector :visible and counting the number of matches

 expect(element('#someElement:visible').count()).toBe(1); 

A source

Answer 3

I managed to do the following to check if the element is hidden:

 expect(element("#id_element").css("display")).toBe("none"); 

And to make sure that this element is visible:

 expect(element("#id_element").css("display")).not().toBe("none"); 

I think this is not the best way. But it is simple, and it worked for me.

Hooray!