title: Protractor - Find an element with css selector
body: <p>I'm running protractor e2e tests on an angular page and I wan't to check some dropdown boxes for their selected options. I got the following html code generated from angular:</p>
  
  <pre><code>&lt;select class="ng-pristine ng-valid ng-touched" id="idxyz" ng-model="model" ng-options="xxx"&gt;
      &lt;option selected="selected" value="object:null"&gt;&lt;/option&gt;
      &lt;option label="Steuerung 1" value="number:1"&gt;Steuerung 1&lt;/option&gt;
      &lt;option selected="selected" label="Programme" value="number:2"&gt;Programme&lt;/option&gt;
      &lt;option label="Steuerung 2" value="number:3"&gt;Steuerung 2&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And this is the protractor code that I use to get the selected option.</p>
  
  <pre><code>expect(element(by.css("select[ng-model='model'] option[selected='selected']")).getAttribute("value")).toBe("Programme");
  </code></pre>
  
  <p>As you might have noticed - there are two options with <code>selected='selected'</code>.</p>
  
  <p>This is only the case when running the tests with protractor. When doing the same things by hand, only the truly selected option has the attribute <code>selected='selected'</code>.</p>
  
  <p>Can anyone explain why this happens? The css selector should only return one option element because only one can be selected. But since there are two with the selected attribute - protractor gives me the following warning:</p>
  
  <blockquote>
    <p>WARNING - more than one element found for locator By.cssSelector("select[ng-model='model'] option[selected='selected']") - the first result will be used</p>
  </blockquote>
  
  <p>The first result is the empty option which is actually not selected.</p>
  
  <p>Setup to run the tests:</p>
  
  <ul>
  <li>angular: 1.4.4</li>
  <li>grunt: 0.4.5</li>
  <li>protractor: 2.5.1</li>
  <li>grunt-protractor-runner: 2.1.0</li>
  </ul>