Testing AngularJS applications using protractor is quiet cool. It automates the UI testing and ensures consistent quality throughout your project. Experimenting with the new Angular Material I ran into a problem: interacting with select items using the protractor API.

The problem

There are a few ways you can select an option using protractor. A very elegant solution was proposed on stackoverflow. While this works for regular angularjs projects, angular material is a little different. That is because the

unknown error: Element is not clickable at point (253, 520). Other element would receive the click: 

This is because of the overlay that Angular Material puts on the display. It doesn’t disappear right away. So we need to wait for the material effects to take place.

the solution (quickfix):

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    //select the select
    browser.driver.sleep(500);              //wait for the renderings to take effect
    element(by.css('md-option')).click();   //select the first md-option
    browser.driver.sleep(500);              //wait for the renderings to take effect
});

now the selection works one at a time and angular material has enough time to take away that overlay which is in the way of clicking our second