title: Element not recognized by protractor css selector
body: <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>