使用cssSelector選擇嵌套元素使用cssSelector - Selenium WebDriver

Question

我想根據文本選擇一個元素。我遇到的問題是元素文本在源代碼中存在多次。我使用xpath來找到它（儘管我試圖避免xpath），但這就是我能夠工作的一切。

下面是我對工作的HTML：

<ul id="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage" class="cbl centered d2" style="width:511px;"> 
    <li> 
     <input id="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_0" name="ctl00$ctl00$Dialogs$Dialogs$ctlAcknowledgeMessage_ConditionalDecline$cblMessage$0" onclick="CannedCommentSelected(this);" value="Complexity of job requires extra charge" type="checkbox"> 
     <label for="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_0">Complexity of job requires extra charge</label> 
    </li> 
    <li> 
     <input id="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_1" name="ctl00$ctl00$Dialogs$Dialogs$ctlAcknowledgeMessage_ConditionalDecline$cblMessage$1" onclick="CannedCommentSelected(this);" value="Complexity of job requires extra time" type="checkbox"> 
     <label for="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_1">Complexity of job requires extra time</label> 
    </li> 
    <li> 
     <input id="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_2" name="ctl00$ctl00$Dialogs$Dialogs$ctlAcknowledgeMessage_ConditionalDecline$cblMessage$2" onclick="CannedCommentSelected(this);" value="Current workload requires extra time" type="checkbox"> 
     <label for="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_2">Current workload requires extra time</label> 
    </li> 
    <li> 
     <input id="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_3" name="ctl00$ctl00$Dialogs$Dialogs$ctlAcknowledgeMessage_ConditionalDecline$cblMessage$3" onclick="CannedCommentSelected(this);" value="Distance to property requires extra charge" type="checkbox"> 
     <label for="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_3">Distance to property requires extra charge</label> 
    </li> 
</ul> 

我用driver.findElement(By.xpath("//label[contains(text(), 'Complexity of job requires extra charge')]"));，但我開始「元素當前不可見，因此可能無法與之交互」的錯誤，害得我發現有「工作的複雜性需要額外費用」文本的多個標籤。我試過driver.findElement(By.cssSelector("#Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage > #Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_0 > label[text='Complexity of job requires extra charge']"));，但它試圖找到元素超時。

我在做什麼錯？

我甚至試過driver.findElement(By.cssSelector("#Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage > input[value='Complexity of job requires extra charge']"));，我肯定會工作，但它超時尋找。

Answer 1

在這種情況下，你應該嘗試使用JavascriptExecutor與此如下交互： -

WebElement el = driver.findElement(By.cssSelector("input[value='Complexity of job requires extra charge']")); 

((JavascriptExecutor) driver).executeScript("arguments[0].click();",el); 

編輯： -

List<WebElement> els = driver.findElements(By.cssSelector("input[value='Complexity of job requires extra charge']")); 
for(WebElement el : els) 
{ 
    if(el.isDisplayed() && el.isEnabled()) 
    { 
    el.click(); 
    } 
} 

希望它能幫助... :)

Answer 2

你的CSS沒有工作，因爲它試圖找到標籤作爲輸入的孩子，這真的是兄弟姐妹。你可以告訴xpath通過ID查找父母ul。以下XPath應工作：

//ul[@id="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage"]/li/label[contains(text(), 'Complexity of job requires extra charge')] 

，如果你在選擇輸入，這樣就可以檢查框真正感興趣的，試試這個：

//ul[@id="Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage"]/li/label[contains(text(), 'Complexity of job requires extra charge')]/preceding-sibling::input 

Answer 3

你有兩個問題cssSelector：

>用於直接孩子，但ID與cblMessage和cblMessage_0結束元素具有與ID與cblMessage_0和結束元素之間的另一個元素，你正在尋找的元素是兄弟姐妹。

您可以使用此cssSelector與文本

driver.findElement(By.cssSelector("#Dialogs_Dialogs_ctlAcknowledgeMessage_ConditionalDecline_cblMessage_0 ~ label")); 

~代表兄弟來定位的元素。