I'm using protractor for end-to-end tests of an Angular 2 app (and I suck at CSS).
I'm stuck trying to select all elements, which do NOT have a (div) child with a certain class. They can have div children, just none with that class.
The individual elements look (more or less) like this:
<div class="card"
(click)="clickEvent.emit(generator.id)">
<div id="card-title-anchor">
<div class="card-img-top">
<img src="{{generator.imageUrls.small}}">
</div>
<div *ngIf="!canFulfillAAC()" class="sold-overlay">
<p>bla</p>
</div>
<div class="col-3 price-overlay">
<p class="big-price">
bla
</p>
</div>
</div>
</div>
I can get all the ".card
" elements with element.all(by.css('.card'))
.
But how do I get only the ones , which do not include a child div with the sold-overlay
class?
EDIT: I removed the css tags. I mainly care about how to achieve this with protractor locators - be it through a css selector, xpath expression or otherwise.