I am not able to click on button in protractor

Question

Html code

 <button type="button" ng-click="submitPosition($event, true);navigate($event,'/#/project')" class="btn  btn-main" name="submit">CREATE POSITION AND AUTOSOURCE</button>

My code.

Two buttons have same class name so am using filter.

element.all(by.css('button.btn.btn-main')).filter(function(button,index){
            return index == 1;
            }).each(function(button){
            button.click();
            });

I am getting this error

UnknownError: unknown error: Element is not clickable at point (1049, 162). Other element would receive the click: <ul class="modal-breadcrumb list-unstyled block">...</ul>
  (Session info: chrome=43.0.2357.132)

Please help me.

Answer 1

Based on the error, it looks like you've got a modal blocking your click. Not seeing the rest of the code, it's hard to say, but you'll need to get around that. That said, the overall issue could be your locator strategy. Using filter here is overboard, and perhaps trying to clicking the wrong thing?

I would try:

element(by.cssContainingText('button.btn.btn-main', 'CREATE POSITION AND AUTOSOURCE'));

or

$$('button.btn.btn-main').get(1); // assuming index 1 is the button you're after

or if it's the only submit:

$('button[name="submit"]');