HTMLUnit：与在 Chrome 中查看源代码时不同的代码答案

【问题标题】：HTMLUnit : different code from when view source in ChromeHTMLUnit：与在 Chrome 中查看源代码时不同的代码
【发布时间】：2013-09-18 14:07:52
【问题描述】：

我正在使用 HTMLUnit 获取网页上的页面。在这个网页中，有一个表格。当我从 Chrome 加载并查看源代码时：类似这样：

<form name="form" method="post" onsubmit="return checkDate();">
     <input name="check_in_date" id="check_in_date" readonly="readonly" type="text" class="hasDatepicker"/>
     <input name="check_out_date" id="check_out_date" readonly="readonly" type="text" class="hasDatepicker"/>
     <input name="check_availability" value="test condition" type="submit"/>
</form>

但是当我通过这段代码使用 HTMLUnit 加载时：

String url = "sample link";
WebClient webClient = new WebClient();
webClient.getOptions().setJavaScriptEnabled(true);
webClient.getOptions().setCssEnabled(false);
webClient.setAjaxController(new NicelyResynchronizingAjaxController());
HtmlPage page = webClient.getPage(url);
System.out.println(page.asXML());

我得到不同的 HTML 代码。更多细节：

<form name="form" method="post" onsubmit="return checkDate();">
         <input name="check_in_date" id="check_in_date" readonly="readonly" type="text" class="hasDatepicker"/>
         <input name="check_out_date" id="check_out_date" readonly="readonly" type="text" class="hasDatepicker"/>
         <input name="check_availability" value="test condition" type="text"/>
 </form>

这里不同的是：最后一行：<input name="check_availability" value="test condition" type="text"/> 现在输入文本，而不是提交，所以我不能这样的代码：

HtmlForm form = page.getFormByName("form");
HtmlSubmitInput submit = form.getInputByName("check_availability"); // error at this line
page = submit.click();

错误，因为现在这个字段不再是button，它只是一个文本`。我不知道为什么会有这种差异。请告诉我如何解决这个问题。

谢谢:)

【问题讨论】：

标签： java htmlunit

【解决方案1】：

使用 htmlunit 提交 html 表单有多种方式。

创建一个提交按钮并附加到表单，然后单击它。像这样的东西：

HtmlElement ele=page.createElement("input");
ele.setAttribute("type","submit");
form.appendChild(ele);
ele.click();

参考资料： First - Html Page

Second DomNode

Third - DomElement

第二种方法

只需触发 javascript 即可提交表单

String javaScriptCode="document.getElementById("formid").submit()";
Object result = page.executeJavaScript(javaScriptCode).getJavaScriptResult();

第二种方法不起作用，因为没有与表单关联的 ID，但为了完整的答案，我已经提到过。

注意：以上代码未经测试，但应该可以正常工作。

【讨论】：

【解决方案2】：

在回答你的问题之前先说几句：

您在 Chrome 检查器中看到的内容与 HtmlUnit 返回的代码不同是有道理的。此外，您在 Chrome 检查器中看到的代码将与您在查看页面本身的源代码 (CTRL+U) 时看到的代码不同，因为前者已经执行了 Javascript。

HtmlUnit 的 javascript 引擎与 Chrome 的不同，因此即使您在 HtmlUnit 中启用了 JavaScript，您也可能会得到不同的结果。甚至asXml() 也会在代码中执行格式更改。

话虽如此，我可以想到 2 个选项：

您正在比较已处理 javascript 的页面与未处理的页面
您发现了一个错误

我敢打赌这是第一个。为了帮助您调试启用/禁用 JavaScript 以及将 asXml() 的结果与 HtmlUnit 正在下载的页面的实际内容的结果进行比较（我的意思是，没有处理）。要了解有关如何执行此操作的更多信息，请查看以下问题：

How to get the pure raw HTML of a page in HTMLUnit while ignoring JavaScript and CSS?

如果您有效地发现这是 HtmlUnit 的错误并且网页的处理失败，请在SourceForge 项目中提交一个新错误。我还希望您提供测试用例来重现这一点。

【讨论】：