Question

我想使用css选择器或xpath从嵌套的html路径中检索webelement。我的特定用例是，我想在以下片段中选择i元素：

<td class="headerActionsTd" data-rolename="Speaker">
  <div class="headerActions">
    <span class="addNewParticipantSection">
      <i class="icon fa fa-user-plus" title="Add New"></i>
      </span>

如何使用CSS选择器或xpath获取i网络元素？

Answer 1

使用以下xpath：//td[@data-rolename='Speaker']//div//span//i[@title='Add New']或
css：div.headerActions i

driver.findElement(By.cssSelector("div.headerActions i"));

对于多个元素：

List<WebElement> users = driver.findElements(By.xpath("//td[@data-rolename='Speaker']//div//span//i[@title='Add New']"));

Answer 2

一个简单的例子是：

CSS_SELECTOR

i.icon.fa.fa-user-plus[title='Add New']

请注意，如果此css选择器包含多个元素，则可以使用此功能来区分它们：

:first-child  
:nth-child(n)  
:nth-last-child(n)

更多信息，请访问this link

XPATH：为：

//td[@data-rolename='Speaker']/descendant::span[@class='addNewParticipantSection']/i

希望有帮助。

Answer 3

由于您说的data-role仅更改了对方的评论，因此这里是您可以使用的xpath

"//td[@data-role='Speaker']//i"

或

"//td[@data-role='Speaker']/div/span/i"

Answer 4

另一个选择是您可以尝试在其他元素内定位元素。例如，您可以将addNewParticipantSection div存储在WebElement中，然后使用该WebElement的findElement方法在其中定位i元素。像这样：

WebElement section = driver.findElement(By.className("addNewParticipantSection"));
WebElement icon = section.findElement(By.tagName("i"));
icon.click();

如何在html中选择嵌套的webelement？

4 个答案: