为什么要集成 HtmlUnit?

最明显的问题是,“我为什么需要这个?”答案最好通过探索一个非常基本的示例应用程序来找到。假设你有一个 Spring MVC Web 应用程序,它支持对 Message 对象进行 CRUD 操作。该应用程序还支持分页浏览所有消息。你将如何测试它? 使用 Spring MVC Test,我们可以轻松测试是否能够创建 Message,如下所示:

  • Java

  • Kotlin

MockHttpServletRequestBuilder createMessage = post("/messages/")
		.param("summary", "Spring Rocks")
		.param("text", "In case you didn't know, Spring Rocks!");

mockMvc.perform(createMessage)
		.andExpect(status().is3xxRedirection())
		.andExpect(redirectedUrl("/messages/123"));
@Test
fun test() {
	mockMvc.post("/messages/") {
		param("summary", "Spring Rocks")
		param("text", "In case you didn't know, Spring Rocks!")
	}.andExpect {
		status().is3xxRedirection()
		redirectedUrl("/messages/123")
	}
}

如果我们要测试让我们创建消息的表单视图呢?例如,假设我们的表单看起来像以下代码片段:

<form id="messageForm" action="/messages/" method="post">
	<div class="pull-right"><a href="/messages/">Messages</a></div>

	<label for="summary">Summary</label>
	<input type="text" class="required" id="summary" name="summary" value="" />

	<label for="text">Message</label>
	<textarea id="text" name="text"></textarea>

	<div class="form-actions">
		<input type="submit" value="Create" />
	</div>
</form>

我们如何确保我们的表单产生正确的请求来创建新消息?一个简单的尝试可能类似于以下内容:

  • Java

  • Kotlin

mockMvc.perform(get("/messages/form"))
		.andExpect(xpath("//input[@name='summary']").exists())
		.andExpect(xpath("//textarea[@name='text']").exists());
mockMvc.get("/messages/form").andExpect {
	xpath("//input[@name='summary']") { exists() }
	xpath("//textarea[@name='text']") { exists() }
}

这个测试有一些明显的缺点。如果我们将控制器更新为使用参数 message 而不是 text,我们的表单测试仍然通过,即使 HTML 表单与控制器不同步。为了解决这个问题,我们可以将两个测试结合起来,如下所示:

  • Java

  • Kotlin

String summaryParamName = "summary";
String textParamName = "text";
mockMvc.perform(get("/messages/form"))
		.andExpect(xpath("//input[@name='" + summaryParamName + "']").exists())
		.andExpect(xpath("//textarea[@name='" + textParamName + "']").exists());

MockHttpServletRequestBuilder createMessage = post("/messages/")
		.param(summaryParamName, "Spring Rocks")
		.param(textParamName, "In case you didn't know, Spring Rocks!");

mockMvc.perform(createMessage)
		.andExpect(status().is3xxRedirection())
		.andExpect(redirectedUrl("/messages/123"));
val summaryParamName = "summary";
val textParamName = "text";
mockMvc.get("/messages/form").andExpect {
	xpath("//input[@name='$summaryParamName']") { exists() }
	xpath("//textarea[@name='$textParamName']") { exists() }
}
mockMvc.post("/messages/") {
	param(summaryParamName, "Spring Rocks")
	param(textParamName, "In case you didn't know, Spring Rocks!")
}.andExpect {
	status().is3xxRedirection()
	redirectedUrl("/messages/123")
}

这将降低我们的测试错误通过的风险,但仍然存在一些问题:

  • 如果我们的页面上有多个表单怎么办?诚然,我们可以更新我们的 XPath 表达式,但随着我们考虑更多因素,它们会变得更加复杂:字段类型是否正确?字段是否启用?等等。

  • 另一个问题是,我们正在做的工作是我们预期工作量的两倍。我们必须首先验证视图,然后使用我们刚刚验证的相同参数提交视图。理想情况下,这可以一次性完成。

  • 最后,我们仍然无法解释一些事情。例如,如果表单有我们希望测试的 JavaScript 验证怎么办?

总体问题是测试网页不涉及单一交互。相反,它是用户如何与网页交互以及该网页如何与​​其他资源交互的组合。例如,表单视图的结果用作用户创建消息的输入。此外,我们的表单视图可能会使用影响页面行为的其他资源,例如 JavaScript 验证。

集成测试来拯救?

为了解决前面提到的问题,我们可以执行端到端集成测试,但这有一些缺点。考虑测试让我们分页浏览消息的视图。我们可能需要以下测试:

  • 当消息为空时,我们的页面是否向用户显示通知,指示没有可用结果?

  • 我们的页面是否正确显示一条消息?

  • 我们的页面是否正确支持分页?

为了设置这些测试,我们需要确保我们的数据库包含正确的消息。这导致了一些额外的挑战:

  • 确保数据库中包含正确的消息可能很繁琐。(考虑外键约束。)

  • 测试可能会变慢,因为每个测试都需要确保数据库处于正确状态。

  • 由于我们的数据库需要处于特定状态,我们无法并行运行测试。

  • 对自动生成的 ID、时间戳等项目执行断言可能很困难。

这些挑战并不意味着我们应该完全放弃端到端集成测试。相反,我们可以通过重构详细测试以使用运行更快、更可靠且没有副作用的模拟服务来减少端到端集成测试的数量。然后,我们可以实现少量真正的端到端集成测试,以验证简单的工作流,以确保所有内容都正常协同工作。

HtmlUnit 集成登场

那么,我们如何在测试页面交互和在测试套件中保持良好性能之间取得平衡呢?答案是:“通过将 MockMvc 与 HtmlUnit 集成。

HtmlUnit 集成选项

当你想将 MockMvc 与 HtmlUnit 集成时,你有多种选择:

  • MockMvc 和 HtmlUnit:如果你想使用原始 HtmlUnit 库,请使用此选项。

  • MockMvc 和 WebDriver:使用此选项可简化开发并在集成测试和端到端测试之间重用代码。

  • MockMvc 和 Geb:如果你想使用 Groovy 进行测试,简化开发,并在集成测试和端到端测试之间重用代码,请使用此选项。