如何使用黄瓜测试HTML5页面中的错误条件?

我正在使用黄瓜测试Web应用程序行为(使用Selenium和Watir在引擎盖下).我的网络应用程序具有 HTML5页面,并使用新的“必需”属性.如果我有一个包含必填字段的数据输入表单,并且我将该表单提交为空白,我想验证网络应用程序是否正确响应错误条件.

不幸的是,当使用HTML5网络浏览器进行测试时,在失败的字段验证中弹出的错误消息似乎无法通过Web驱动程序对黄瓜进行访问.无论如何,表单未提交,页面仍保留在数据输入表单上.

另一方面,当测试无头或使用非HTML5兼容的浏览器时,表单可能会提交,允许我的网络应用程序陷阱错误,并将用户发送回表单页面显示错误消息.

在第二种情况下,我可以轻松测试错误消息的存在,因为它是页面中提供的HTML的一部分.我的问题是,我无法看到如何编写一个单一的测试场景,这将验证无头和HTML5浏览器情况的错误条件.

这可能是因为目前Selenium和Watir Web驱动程序的状态是不可能的.但是如果有任何人有任何想法如何验证HTML5“必需”错误弹出消息,那将是一个很大的帮助.

编辑2012-06-02:这是一个示例页面,其中包含HTML5浏览器警告的示例,如下所示:
http://railsdotnext.com/stackoverflow/required.html

一个必需的文本和选择,一个显示内部提示文本的文本框和一个正则表达式输入验证的文本框.该页面没有任何CSS或JavaScript来混淆问题,它只是香草HTML5.请参阅w3schools page about HTML5 field attributes完整故障.表单提交到一个简单的cgi脚本,只是回应表单输入,假设表单成功.提交失败将保留在样本表单页面上.

解决方法

我以前没有使用HTML5必需属性.但是从它的外观来看,这个必需属性只是提醒浏览器,该表单字段必须被填写(即DOM不会改变).

在我看来,只要断言所需的属性存在于适当的表单域的HTML中是合理的.该测试应通过BOTH HTML5浏览器和非HTML5浏览器.

试图断言,就像你正在测试浏览器的功能一样,我看起来更像是这样.

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码