检查是否显示"请输入电子邮件地址"消息

Question

给出一个简单的页面:

<form>
  <input type="email">
  <button>click</button>
</form>

如果我在非电子邮件的文本字段中输入任何内容并单击该按钮,Please enter an email address则会显示消息.

有没有办法检查是否使用Selenium或Watir显示消息？据我所知,浏览器DOM中没有出现任何新内容.

由于页面使用的是构建在浏览器功能中的电子邮件检查,因此检查出现错误消息是否有意义？它与检查浏览器滚动条是否有效处于同一级别.我们不再检查Web应用程序,而是检查平台(浏览器).

此处关于SO的早期相关问题是:如何使用黄瓜测试HTML5页面中的错误条件？

Answer 1

你可以这样尝试

JavascriptExecutor js = (JavascriptExecutor) driver;
driver.findElement(By.cssSelector("input[type='email']")).sendKeys("asd");
Object s=js.executeScript("return document.getElementById(\"a\").validity.valid");
System.out.println(s);
driver.findElement(By.cssSelector("input[type='email']")).sendKeys("asd@gmail.com");
s=js.executeScript("return document.getElementById(\"a\").validity.valid");
System.out.println(s);

上面一行的输出是

false
true

因此，基于此您可以得出结论，给定的值是否有效。

下面的 JavaScript 逻辑将根据字段的有效性返回 true/false

document.getElementById(\"a\").validity.valid

PS：我假设输入标签的 ID 为“a”

Answer 2

我同意这开始接近“测试浏览器”，如果您的代码依赖于该浏览器功能，那么该网站需要生成正确的 html(5) 代码，以便浏览器知道您想要那种级别的验证，而这是您可以验证的。

\n\n

关于网络艺术的一些很好的背景

\n\n

浏览器端验证是由特定输入类型（您可以通过 watir 的.type方法检查）和新required属性（检查可能比较棘手）的组合触发的，鉴于此，我认为我实际上在这里看到了一个很好的原因Watir 的新功能。我想我们可以使用一种.required?方法，该方法应该支持所有支持新“required”属性的输入元素，并且如果存在“required”属性，则返回 true。

\n\n

因此，目前您可以做的是，如果您知道自己正在支持此功能的 HTML5 浏览器上运行，则可以检查输入类型是否为“电子邮件”以及“必需”属性是否存在。（我暂时不知道如何做到这一点，但也许其他人可以提出一种方法）。

\n\n

另一件需要确定的事情是提供无效值，并确保表单不允许自身被提交。例如，是强制验证还是仅建议验证。（并且不要忘记使用curl或httparty之类的东西提交无效数据来检查服务器端，因为恶意用户可以轻松绕过任何浏览器验证并使用伪造的甚至“敌对”值提交该表单，这些值旨在导致缓冲区溢出或注入攻击。任何站点都不应完全依赖于客户端验证。）

\n\n

当然，要考虑的另一件事是，如果用户使用的浏览器不支持该特定验证功能，那么页面会做什么？我假设有某种客户端 JavaScript 和显示的消息。

\n\n

在这种情况下，这实际上取决于消息“显示”的方式。在我正在测试的应用程序中，此类消息恰好位于一个方便的 div 中，具有独特的类，这些类由 css 控制，通常隐藏，然后在客户端 JS 检测到需要显示消息时设置为显示用户。所以我当然有类似的测试。以下是某人同意我们的条款和条件的示例。（注意：我们使用 Cucumber 和 Test-Factory gem 来做页面对象和数据对象）

\n\n

让我们从消息开始，以及 right-click.examine-element 揭示的内容

\n\n

\n\n

文件上的场景grower_selfregister.feature如下所示

\n\n

Scenario: self registering grower is required to agree to terms and conditions\n  Given I am a unregistered grower visiting www.climate.com\n  When I try to self-register without agreeing to the terms and conditions\n  Then I am informed that Acceptance of the terms and conditions is required\n  And I remain on the register page\n

\n\n

关键的黄瓜步骤是：

\n\n

When /^I try to self-register without agreeing to the terms and conditions$/ do\n  @my_user.self_register(:agree_to_terms => FALSE)\nend\n\nThen /^I am informed that Acceptance of the terms and conditions is required$/ do\n  on Register do |page|\n    page.agree_to_terms_required_message.should be_visible\n  end\nend\n\nThen /^I remain on the register page$/ do\n\xc2\xa0 on Register do |page|\n\xc2\xa0 \xc2\xa0 #ToDo change this to checking the page title (or have the page object do it) once we get titles\n\xc2\xa0 \xc2\xa0 page.url.should == "#{$test_site}/preso/register.html"\n\xc2\xa0 end\nend\n

\n\n

页面对象的相关部分register.rb是

\n\n

class Register < BasePage\n\n  #bunch of other element definitions removed for brevity\n\n  element(:agree_to_terms_required_message) {|b|b.div(:class => "terms-error")}\n\nend\n

\n\n

这有助于提供一个例子吗？

\n\n

注意：很容易有人认为第二次验证（停留在页面上）是多余的，因为如果我不在页面上，我就不太可能看到该消息。但它增加了场景中描述的预期用户体验的清晰度。此外，如果实现在哪里进行更改，这可能非常重要，例如，如果决定使用 javascript 警报之类的东西，那么验证这一点可能很重要一旦被拒绝（“我看到消息”步骤可能会做的事情），用户无论如何都不会继续进入该网站。

\n