Protractor : get element which has not a specific class

Question

Im trying to get an e2e test to work on the next example:

HTML:

<div ng-if="selectedItem">
  <span class-"xxx">This is line 1</span>
  <span class="xxx yyy">This is line 2</span>
</div>

Protractor:

..
element.findByCss('div[ng-if="selectedItem"] span[class!="yyy"]');
..

Gives the following error:

Failed: invalid element state: Failed to execute 'querySelectorAll' on 'Document': 'div[ng-if="selectedItem"] span[class!="yyy"]' is not a valid selector.

The selector works with jQuery though.. I know its not the same. But i cant seem to find how to exclude a class with protractor

Answer 1

Use the not negation pseudo-class:

$('div[ng-if=selectedItem] span:not(.yyy)');

Or, in your case, you can also match the complete class attribute value:

$('div[ng-if=selectedItem] span[class=xxx]');

Or, if this is applicable, you can also get the first span by index:

$$('div[ng-if=selectedItem] span.xxx').first();

^{$ here is a shortcut to element(by.css()), $$ - to element.all(by.css())}