I CSS-Selektor müssen Elemente auswählen, die einen bestimmten Text

Question

Zeile enthalten:

<div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div> 
<div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div> 
<div class="btn btn-second-in-pair-not-desired btn-tall">Basic Search</div> 
<div class="btn btn-primary-stand-alone btn-tall search-btn">Search</div> 

Hier ist, was ich bisher versucht haben - ".btn: contains ('Clear Suche')", aber Selen ist nicht in der Lage, es zu fangen

Answer 1

CSS-Selektor unterstützt :contains() nicht mehr. Sie müssen XPath "//div[text()='Clear search']" verwenden.

Answer 2

Ich glaube nicht, CSS unterstützt Suche nach Inhalt des HTML-Elements.

Warum nicht versuchen:

<div class="btn btn-second-in-pair-not-desired btn-tall clear">Clear search</div> 
<div class="btn btn-second-in-pair-not-desired btn-tall raw">Raw Search</div> 
<div class="btn btn-second-in-pair-not-desired btn-tall basic">Basic Search</div> 
<div class="btn btn-primary-stand-alone btn-tall search-btn">Search</div> 

Und dann über die Auswahl:

.btn{ 
    color:red; 
} 

.clear, .raw, .basic, .search-btn{ 
    color:blue; 
} 

Oder Sie könnten versuchen immer ids mit

<div id="search">Search</div> 

wählen:

#search{ 
... 
} 

Answer 3

Wenn Sie Selenium verwenden, akzeptiert es auch XPATH-Zeichenfolgen, die in manchen Fällen manchmal flexibler als CSS-Selektoren sein können. Weil ich super faul bin auch, finde ich es ganz praktisch, dass Sie Recht, einen Tag in den Elementen Ansicht DevTools klicken und „Kopieren> Kopieren XPath“

webDriver.findElement(
    By.xpath(
    "//div[text()='Clear search']" 
) 
).click(); 

Answer 4

Sie die Klasse nicht ändern können, je nach Inhalt ?

<?php 
$content = $your_content_from_database; 
$arr_content = explode(" ", $content); 
$first = $arr_content[0]; 
echo '<div class="btn btn-second-in-pair-not-desired btn-tall clear" data-content="'.$first.'">'. $content. '</div>' ; ?> 

und die CSS

[data-content="Clear"]{ 
color:red; 
} 

Answer 5

Hallo auf der Grundlage der Quelle von Ihnen in der Frage, sofern Sie CSS-Selektor wie unten verwenden können, um die Elemente zu identifizieren

// take everything inside the list for div with same class 
List<WebElement> mycsselements = driver.findElements(By.cssSelector(".btn.btn-second-in-pair-not-desired.btn-tall")); 
System.out.println("Size of the div elements with same class name : " + mycsselements.size()); 
// printing value one by one 
System.out.println("First value is " + mycsselements.get(0).getText()); 
System.out.println("Second value is " + mycsselements.get(1).getText()); 
System.out.println("Third value is " + mycsselements.get(2).getText()); 

// and for the last one do it like below 

System.out.println("Last value is " + driver.findElement(By.cssSelector(".btn.btn-primary-stand-alone.btn-tall.search-btn")).getText()); 

und die Ausgabe ist:

Size of the div elements with same class name : 3 
First value is Clear search 
Second value is Raw Search 
Third value is Basic Search 
Last value is Search 

Hoffe, das hilft Ihnen

Answer 6

Benutzer unter CSS-Code:

css=div:contains('Clear search') 

Weitere Details auf den Link klicken: SauceLab