如何基于 Chrome 开发工具中的元素编写 XPath？答案

【问题标题】：How to write XPath based on elements in Chrome Dev Tools?如何基于 Chrome 开发工具中的元素编写 XPath？
【发布时间】：2018-05-18 07:38:51
【问题描述】：

我正在尝试获取下图中带下划线的值的 XPath。我有一个总是不同的卡片列表，我需要从其类中具有“突出显示”的突出显示的卡片内部获取值。

当我通过在 Chrome 中检查一个元素来获取 XPath 时，我得到了类似 //*[@id="rental-asset"]/div/div[1]/div/rdo-nav-card-asset[11]/div/div[1]/div/i 的东西，这对我不起作用，因为括号中的 11 总是会是一个不同的值。如何根据它们的独特类为这些元素创建 XPath？

【问题讨论】：

请编辑问题以将其限制为特定问题，并请避免一次提出多个不同的问题。

标签： selenium selenium-webdriver

【解决方案1】：

这里是如何得到第一个下划线的东西。我想你应该可以从这里拿走它。

//rdo-nav-card-asset/div[contains(@class,'panel') and contains(@class,'highlight')]/div[contains(@class,'panel-heading')]/div[contains(@class,'panel-title')]

【讨论】：

【解决方案2】：

您可以拆分 xpath 并在预期发生的范围内进行迭代。

假设他们有 1-22 的值，你可以这样。这是一个python代码。

str1 = '//*[@id="rental-asset"]/div/div[1]/div/rdo-nav-card-asset['
str2 = ']/div/div[1]/div/i'
for i in range(1, 22):
    str3 = str1 + str(i) + str2
    a = driver.find_element_by_xpath(str3).text
    print a

您可以抓取循环内的其他元素或数据。

如果您有任何困惑，请在下方评论。

【讨论】：

这样我将从所有卡片中获取该元素的文本值，而不仅仅是从突出显示的卡片中获取。
您可以使用每个元素 xpath 并遍历这些 xpath 并获取元素的值，或者您可以将元素存储在变量中并创建子 xpath 以查找所需的元素。

【解决方案3】：

您可以先找到突出显示卡，并将其用作那些下划线文本的搜索上下文。

代码如下：

var activeCard = driver.findElement(By.css('rdo-nav-card-asset > div.rdo-card-highlight'));

// the text of 1rd underline
var title = activeCard.findElement(By.css('.panel-title')).getText();

// the text of 2rd underline
var title = activeCard.findElement(By.xpath('.//div[@class='rdo-card-metric'][1]'))
           .getText();

// the text of 3rd underline
var title = activeCard.findElement(By.css('.text-danger')).getText();

// the text of 4rd underline
var title = activeCard.findElement(By.xpath('.//div[@class='rdo-card-metric'][3]'))
           .getText();

【讨论】：