WebElement.findElement 未找到子元素

Question

我正在尝试从 html 代码中获取子元素（卡号），其中 html 标签和 class 名称相同。下面是 html 代码片段

<li class="paymentMethods-stored">  
    <li class="paymentMethod">
        <div class="stored-card-details">
            <span class="body-2">Name: </span>
            <span class="body-2 body-2-md"> VISA</span>
        <p>
            <span class="body-2">Number:</span>
            <span class="body-2 body-2-md"> ************4305</span>
        </p>
        <p>
            <span class="body-2">Expiry:</span>
            <span class="body-2 body-2-md"> 03/2030</span>
        </p>
        </div>
    </li>
    <li class="paymentMethod">
        <div class="stored-card-details">
            <span class="body-2">Name: </span>
            <span class="body-2 body-2-md"> VISA</span>
        <p>
            <span class="body-2">Number:</span>
            <span class="body-2 body-2-md"> ************4111</span>
        </p>
        <p>
            <span class="body-2">Expiry:</span>
            <span class="body-2 body-2-md"> 04/2031</span>
        </p>
        </div>
    </li>
</li>

以下是我试过的标识符。但都返回了第一个卡号“************4305”。

@FindBy(xpath = "//li[@class='paymentMethods-stored']//li[@class='paymentMethod']")
private WebElement firstSavedCard;
        
@FindBy(xpath = "(//li[@class='paymentMethods-stored']//li[@class='paymentMethod'])[2]")
private WebElement secondSavedCard; 
        
String firstCard=firstSavedCard.findElement(By.xpath("//*[@class='stored-card-details']/p[1]/span[2]")).getText();
String secondCard=secondSavedCard.findElement(By.xpath("//*[@class='stored-card-details']/p[1]/span[2]")).getText();

尝试了其他选项：这也返回了第一个卡号“************4305”。

secondSavedCard.findElement(By.xpath("/p[1]/span[2]")).getText();
secondSavedCard.findElement(By.xpath(".//*[@class='stored-card-details']/p[1]/span[2]")).getText()

Answer 1

尝试以下 xpath 到 select 所有编号的标签 -

//li[@class="paymentMethod"]/descendant::span[4]

对于 select 第一个元素使用 -

(//li[@class="paymentMethod"]/descendant::span[4])[1]

对于 selecting 第二个元素使用 -

(//li[@class="paymentMethod"]/descendant::span[4])[2]

等等。

此外，您可以使用 findelements 而不是 findelement 来查找所有元素。收集列表中的所有元素，然后迭代并提取文本。

Answer 2

在 XPATH 开头使用 "//" 将始终查看 DOM 的根并忽略您在父上下文中调用 "findElement" 的事实元素.

使用 ".//" 应该可以解决这个问题，因此您可能需要仔细检查一下。

或者，您可以使用 "self::*" 作为更详细和明显的方式

Answer 3

正如 @Robbie Wareham 在他的回答中提到的 //* 会从根元素开始搜索，但是作为您的代码块，您需要从已经找到的相关元素开始搜索。

要查找卡号作为替代方法，您可以使用以下：

@FindBy(xpath = "//li[@class='paymentMethods-stored']//following::li[1]//p//span[contains(., 'Number')]//following-sibling::span[1]")
private WebElement firstSavedCardNumber;

@FindBy(xpath = "(//li[@class='paymentMethods-stored']//following::li[2]//p//span[contains(., 'Number')]//following-sibling::span[1]")
private WebElement secondSavedCardNumber;

WebElement.findElement 未找到子元素

WebElement.findElement is not finding child element

java

selenium

xpath

webdriver

findelement