Element not recognized by protractor css selector
<p>I am quite new to protractor and am wondering why my button doesn't get clicked when running the test in Protractor using selenium webdriver manager.</p>

<p>The button:</p>

<pre><code>&lt;button class="preview-toggle" icon="add" icon-only="" right="" ng-reflect-router-link="add"&gt;&lt;/button&gt;
</code></pre>

<p>In chrome when I use the following selector: [ng-reflect-router-link="add"] the required element is found.</p>

<p>My protractor-conf.js:</p>

<pre><code>exports.config = {


seleniumAddress: 'http://localhost:4444/wd/hub', // This is targetting my local running instance of the selenium webdriver

specs: [
    './features/**/*.feature'
],

capabilities: {
    browserName: 'chrome' 
},

framework: 'custom', //We need this line to use the cucumber framework

frameworkPath: require.resolve('protractor-cucumber-framework'), // actual framework 

cucumberOpts: {
    format:  'pretty',
    require: './features/step_definitions/**/*.js' // This is where we'll be writing our actual tests
},

useAllAngular2AppRoots: true
</code></pre>

<p>};</p>

<p>My feature class is a simple one</p>

<pre><code>Feature: Cool_feature
  Scenario: I do something awesome
   Given I open up the application
   When I click on add
   Then I should be the best
</code></pre>

<p>My test.js class</p>

<pre><code>test = function() {


this.Given(/^I open up the application$/, function (callback) {
    browser.get('foo.com').then(callback);
});

this.When(/^I click on add$/, function (callback) {
    // Write code here that turns the phrase above into concrete actions
    browser.element(by.css('[ng-reflect-router-link="add"]')).click().then(callback);
});

this.Then(/^I should be the best"$/, function (callback) {

});
};
module.exports=test;
</code></pre>