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

cssSelector有兩個問題：

>用於直接子代，但是ID以cblMessage和cblMessage_0元素之間還有另一個元素，ID以cblMessage_0的元素和您正在尋找的元素是同級元素。

您可以使用此cssSelector查找帶有文本的元素

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

~表示同級。

Answer 3

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