【问题标题】:Check if "Please enter an email address" message appears检查是否出现“请输入电子邮件地址”消息
【发布时间】:2013-03-16 05:28:05
【问题描述】:

给定一个简单的页面:

<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?

【问题讨论】:

  • 页面上是否出现警告?我的第一个猜测是通过 firebug 获取它的 ID,然后在以后使用它
  • 警告出现在页面上 - 您在浏览器窗口中看到它,但它没有出现在页面上 - DOM 中没有出现任何新内容。魔法。 :)
  • 我实际上认为这没有意义,因为这意味着测试第 3 方,而不是 Web 应用程序。
  • 好吧,这是否意味着警告始终存在,但页面使其不可见?如果不是,那么我同意@p0deje - 对我来说测试 3rd 方应用程序也没有意义
  • 伙计们,这是不同的。这不是 javascript 客户端验证,它是一个新的 HTML5 功能,浏览器根据输入的“类型”以及字段是否定义了新的“必需”属性进行验证。因此,对用户的实际呈现是高度主观的,如果开发人员在其中编写代码(我认为使用 psuedoclasses?),则可以通过 CSS 的东西来加强(我认为使用 psuedoclasses?)有关更多信息,请参阅the-art-of-web.com/html/html5-form-validation/#.UVIWfFtATu0

标签: selenium webdriver watir watir-webdriver browser-automation


【解决方案1】:

我同意这已经开始接近“测试浏览器”了想要那种级别的验证,这是你可以验证的。

art of the web 有一些很好的背景知识

浏览器端验证是由特定输入类型(您可以通过 watir 的 .type 方法检查)和新的 required 属性(可能更难检查)的组合触发的在 Watir 中看到一个很好的理由。我想我们可以使用 .required? 方法,所有支持新的“必需”属性的输入元素都应该支持该方法,如果存在“必需”属性,则返回 true。

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

要确定的另一件事是提供无效值,并确保表单不允许自己提交。例如是强制执行的验证,还是只是建议性的。 (并且不要忘记通过使用 curl 或 httparty 之类的方式提交无效数据来检查服务器端,因为敌对用户可以轻松绕过任何浏览器验证并提交带有虚假甚至“敌对”值的表单以导致缓冲区溢出或注入攻击。任何站点都不应完全依赖客户端验证。)

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

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

让我们从消息开始,以及 right-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

Cucumber 的关键步骤是:

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 警报的东西,那么验证这一点可能很重要一旦被解雇(“我看到消息”步骤可能会做的事情),用户无论如何都没有进入该网站。

【讨论】:

    【解决方案2】:

    你可以这样试试

    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逻辑会根据字段的有效性返回真/假

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

    P.s:我假设输入标签的 id 为“a”

    【讨论】:

      【解决方案3】:

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

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

      【讨论】:

        猜你喜欢
        • 2016-04-06
        • 2016-08-20
        • 2012-09-09
        • 2011-06-08
        • 2011-08-17
        • 2011-10-25
        • 1970-01-01
        • 1970-01-01
        • 2022-07-27
        相关资源
        最近更新 更多