使用 xpath 或 cssSelector 解析 HTML？答案

【问题标题】：Parsing HTML with xpath or cssSelector?使用 xpath 或 cssSelector 解析 HTML？
【发布时间】：2012-04-25 23:53:32
【问题描述】：

如何仅解析这些代码块的文本部分？我在 java 中使用 Selenium 客户端驱动程序。

<li id="NOT_PUT_PREF_STORE" style="">
<span id="STORE_AVAIL" class="BodyLBoldGrey StockStat">Out of stock</span> <span id="InYourLocal">in your local</span> <span id="storeRollover_2"><span id="STORE_CITY" class="BodyLBoldLtgry VIBSStore1">West Hills</span></span> store<span id="notSelectOptionSOI">.</span>
</li>

或

<li id="NOT_PUT_PREF_STORE" style="">
<span id="STORE_AVAIL" class="BodyLLtgry StockStat">Not carried</span> <span class="BodyLLtgry" id="InYourLocal">in your local</span> <span id="storeRollover_2"><span id="STORE_CITY" class="BodyLBoldLtgry VIBSStore1">West Hills</span></span> store<span id="notSelectOptionSOI">.</span>
</li>

或

<li id="NOT_PUT_PREF_STORE" style="">
<span id="STORE_AVAIL" class="BodyMBold StockStatGreen">In stock</span> <span id="InYourLocal">in your local</span> <span id="storeRollover_2"><span id="STORE_CITY" class="BodyLBoldLtgry VIBSStore1">West Hills</span></span> store<span id="notSelectOptionSOI">.</span>
</li>

我正在尝试解析 web 元素中每个变体中的文本部分（即：未携带、有货、缺货）。我是 selenium 和 html 解析的新手，所以这对我来说真的很难发挥作用。

我在想它会是这样的

WebElement driver = new FirefoxDriver(profile);
driver.get(Url);
System.out.println(driver.getElement(By.id("STORE_AVAIL").getText());

不确定如何使用 cssSelector 来实现，但人们告诉我这样更快。这行得通吗？

driver.getElement(By.xpath("//li[@id='NOT_PUT_PREF_STORE']./span[@id='STORE_AVAIL']").getText()

【问题讨论】：

"我要查找的字符串实际上并没有存储在页面源中。" 那么它是如何显示的呢？ JavaScript？ “但STORE_AVAIL实际上在页面源中”我认为您只是自相矛盾，但不清楚。
顺便说一句，上面的代码是做什么的？对我来说，它应该打印出你需要的东西......

标签： java html parsing selenium

【解决方案1】：

当我尝试在页面上查找元素时，我总是通过以下方式构建定位器：

id = driver.getElement(By.id("STORE_AVAIL").getText());
css 选择器 = driver.getElement(By.css("span#STORE_AVAIL").getText());
xpath = driver.getElement(By.xpath("//span[@id='STORE_AVAIL']").getText());

对于 webdriver 和我来说，id 似乎是最快和最简单的。 id 在页面上应该是唯一的。

CSS 需要我做更多的调查工作，但 webdriver 处理得很好。

最后，xpath 有时是不可避免的（除非你给开发者买了一杯啤酒并很好地要求更改为应用程序以便你可以更快地找到它 - 毕竟，无论如何你都是在测试它们）。使用 IE 通过 xpath 定位非常慢，编写复杂的 xpath 也很麻烦。

Xpath 也很脆弱，对 dom 的一个小改动可能会使您的 xpath 无法使用。然后你就可以调试/重写你的 xpath（听起来很有趣）。

我的建议是使用 Firefox 的 Firebug 和 FirePath 插件来帮助您制作定位器。

【讨论】：

【解决方案2】：

当您“查看页面源代码”时，它只会显示原始 HTML 源代码。它不会显示 AJAX 调用所做的更改，这看起来就像沃尔玛页面正在更新该部分/元素。这个question 提供了更好的解释。

假设您使用的是 Firefox（基于您使用的驱动程序），您可以转到该页面并单击 Ctrl+Shift+I 以调出 Inspector 工具。选择您感兴趣的元素。然后单击 [HTML] 按钮（在 Inspector 菜单中）以查看当前源代码。

请注意，当您使用 selenium webdriver 获取元素时，它将获取当前值而不是页面源中看到的原始值。因此您不必担心您在页面源中看到的内容。

【讨论】：

哦，我不知道它是如何工作的。谢谢，我知道了，我会再试一次。

【解决方案3】：

我尝试使用以下 html 代码片段

<li id="NOT_PUT_PREF_STORE" style="">
<span id="STORE_AVAIL" class="BodyLBoldGrey StockStat">Out of stock</span> <span id="InYourLocal">in your local</span> <span id="storeRollover_2"><span id="STORE_CITY" class="BodyLBoldLtgry VIBSStore1">West Hills</span></span> store<span id="notSelectOptionSOI">.</span>
</li>

我正在使用以下代码来解决它。我使用 XPath 获取 span 元素树，并解析其中的每一个以获取元素的文本。

driver.navigate().to("file:///C:/Users/abc/Desktop/test.html");
    List<WebElement> spanEle = driver.findElements(By.xpath("//li/span"));
    for (int i = 0; i < spanEle.size(); i++) {
             System.out.println(spanEle.get(i).getText());

【讨论】：