Unable to click button in angular application using angular e2e testing

Question

This is the test case that I have wriiten :

 describe('Checkout flow testing', function () {


it('Testing Checkout',function(){
    console.log('navigating to product page');
    browser().navigateTo("/product/test-product5")
    element(':button.add-cart').click();
    sleep(2);
})

})

And the template of the button is as follows:

<!--

<button data-ng-if="product.available" class="ms-mb-xs btn btn-lg btn-primary add-cart"
                           id="add_to_cart" data-ng-click="check_required_options(product,data1.quantity)"
                           title="Add to Cart"><i class="fa fa-shopping-cart"></i> {{Add to Cart}} <button>     

Answer 1

Have you specified your element correctly? Try this way:

element(by.css('.add-cart')).click();

Here https://angular.github.io/protractor/#/locators you can find more about locators in Protractor.