使用xpath或cssSelector解析HTML？

Question

如何仅解析这些代码块的文本部分？ 我在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()

Answer 1

当您“查看页面源代码”时，它将仅显示原始HTML源代码。 它不会显示AJAX调用所做的更改，就像Walmart页面如何更新该部分/元素一样。 这个问题提供了更好的解释。

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

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

Answer 2

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

1. id = driver.getElement(By.id("STORE_AVAIL").getText());
2. css选择器= driver.getElement(By.css("span#STORE_AVAIL").getText());
3. 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插件来帮助您制作定位器。

Answer 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());