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

Question

给出一个简单的页面：

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

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

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

由于页面使用的是浏览器功能内置的电子邮件检查，因此检查出现错误信息是否有意义？它与检查浏览器滚动条是否有效处于同一级别。我们不再检查Web应用程序，而是检查平台（浏览器）。

此处关于SO的早期相关问题是：How do I test error conditions in HTML5 pages with cucumber?

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

P.s：我假设输入标签有id“a”

Answer 2

我同意这已经开始接近'测试浏览器'了，如果您的代码依赖于该浏览器功能，那么该网站需要生成正确的html（5）代码，以便浏览器知道您想要那个级别的验证，这是你可以验证的。

art of the web

的一些好背景

浏览器端验证是由特定输入类型（您可以通过watir的.type方法检查）和新的required属性（可能需要检查的tricker）的组合触发的。鉴于此我想我在Watir的新功能中看到了一个非常好的原因。我想我们可以使用.required?方法，该方法应支持所有支持新“必需”属性的输入元素，如果存在'required'属性，则返回true。

所以，目前您可以做的是，如果您知道自己在支持此功能的HTML5浏览器上运行，则可以检查输入类型是“电子邮件”，还是“必需”属性。 （我并不想知道如何做到这一点，但也许其他人可以建议一种方式）。

另一件事是确保提供无效值，并确保表单不允许自己提交。例如是强制执行的验证，还是仅仅是建议。 （并且不要忘记通过使用诸如curl或httparty之类的东西提交无效数据来检查服务器端，因为恶意用户可以轻易地绕过任何inbrowser验证并提交伪造的表单甚至是设计为导致缓冲的'敌对'值溢出或注入攻击。任何站点都不应完全依赖客户端验证。）

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

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

让我们从消息开始，右键click.examine-element显示

grower_selfregister.feature文件中的方案如下所示

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

关键的黄瓜步骤是：

When /^I try to self-register without agreeing to the terms and conditions$/ do
  @my_user.self_register(:agree_to_terms => FALSE)
end

Then /^I am informed that Acceptance of the terms and conditions is required$/ do
  on Register do |page|
    page.agree_to_terms_required_message.should be_visible
  end
end

Then /^I remain on the register page$/ do
  on Register do |page|
    #ToDo change this to checking the page title (or have the page object do it) once we get titles
    page.url.should == "#{$test_site}/preso/register.html"
  end
end

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

class Register < BasePage

  #bunch of other element definitions removed for brevity

  element(:agree_to_terms_required_message) {|b|b.div(:class => "terms-error")}

end

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

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

Answer 3

我还没有找到检查实际错误消息的方法。但是，您可以使用:invalid CSS伪选择器输入非电子邮件后检查输入字段是否无效。

WebElement invalidInput = driver.findElement(By.cssSelector("input:invalid"));
assertThat(invalidInput.isDisplayed(), is(true));