Wie wählt man alle Elemente aus, die KEIN Kind mit einer bestimmten Klasse haben?

Ich benutze Winkelmesser für Ende-zu-Ende-Tests einer Angular 2-App (und ich lutsche bei CSS).Wie wählt man alle Elemente aus, die KEIN Kind mit einer bestimmten Klasse haben?

Ich stecke fest, alle Elemente zu wählen, die kein (div) Kind mit einer bestimmten Klasse haben. Sie können div Kinder haben, nur keine mit dieser Klasse.

Die einzelnen Elemente aussehen (mehr oder weniger) wie folgt aus:

<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>

Ich kann mit element.all(by.css('.card')) alle ".card" Elemente erhalten.

Aber wie bekomme ich nur diejenigen, die kein Kind div mit der sold-overlay Klasse enthalten?

BEARBEITEN: Ich entfernte die CSS-Tags. Ich interessiere mich hauptsächlich dafür, wie man dies mit Winkelmesserlokalisierern erreicht - sei es durch einen CSS-Selektor, einen Xpath-Ausdruck oder auf andere Weise.

Quelle

2017-01-10 EagleBeak

Mit CSS ... Sie können nicht (** abgegeben **). Es gibt kein CSS [** Elternauswahl **] (http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) –

In CSS gibt es wirklich keine Elternselektoren. CSS wird _abwärts (und angrenzend) durch das DOM _cascade_ ... aber nicht nach oben. Was es klingt wie du willst, ist _hey CSS, finde alle divs, die dieses Kind nicht haben, dann gehe zurück und style dieses parent_, was bedeuten würde, dass du nach oben gehen müsstest. Wahrscheinlich müssen Sie Javascript verwenden, um Ihr Problem zu lösen. – zgood

Wie oben erwähnt, würde ich Javascript verwenden, um der Karte div eine zusätzliche Klasse zuzuweisen. Da diese Klasse nur für die Auswahl in Winkelmessern verwendet werden würde, würde ich ein Präfix wie "protractor-" verwenden, damit klar ist, dass es nur für Tests da ist. – chrigu

Sie auch filter() Methode verwenden können, um dies zu erreichen,

element.all(by.css(".card")).filter(function(cardElement){ 
    return cardElement.all(by.css(".sold-overlay")).count().then(function(count){ 
     return count == 0; 
    }); 
});

Quelle

2017-01-11 05:34:02

Leider weiß ich nicht einen Weg mit einem CSS Wähler zu tun, aber es könnte mit xpath erreicht werden:

element.all(by.xpath('//div[@class="card" and not(.//div[contains(@class, "sold-overlay")])]'))

wenn class mehr als einen Wert enthält, wäre es nicht ein gute Idee, @class=value zu entsprechen, da es das gesamte Eigentum zusammenbringt. Dies ist anders als css wenn div.value verwendet wird.

Quelle

2017-01-10 17:13:41 eLRuLL

Uh-huh! Danke, dass Sie über meine unzureichende Konzentration auf CSS-Selektoren nachgedacht haben. Dies hat jedoch nicht den Trick gemacht. Der Test warf den Index außer Kontrolle. Es wird versucht, auf das Element mit Index: 0 zuzugreifen, aber es gibt nur 0 Elemente, die dem Locator entsprechen. By (xpath, // div [@ class = "card" und nicht (.// div [@ class = "sell-overlay"]) ]) ' – EagleBeak

Auf den ersten Blick würde ich sogar lieber eine zusätzliche Klasse mit JavaScript hinzufügen, wie in den Kommentaren zu meiner Frage vorgeschlagen. Das scheint mir weniger invasiv. – EagleBeak

Nun, das könnte daran liegen, dass all deine 'div's mit' class = card' ein inneres 'div' mit' class = "sold_overlay" 'haben. Sie müssen die gesamte Struktur teilen, um sicher zu sein, was Sie bekommen. Auf der anderen Seite habe ich gesehen, dass Sie gerade Ihre Frage mit 'class' bearbeitet haben, die mehrere Attribute enthält, überprüfen Sie bitte die aktualisierte Antwort – eLRuLL

Wie wählt man alle Elemente aus, die KEIN Kind mit einer bestimmten Klasse haben?

Antwort

Verwandte Themen