用HTML5验证API测试表单验证和用nightwatch API测试伪选择器

Question

我有一个典型的登录形式与电子邮件和密码和提交按钮。需要密码和电子邮件字段，即设置表单上所需的属性。这样，当用户单击submit，例如电子邮件字段为空时，会弹出“请填写该字段”的错误。这在手工测试中很好。

问题是，我想用夜报自动检查，我想到了以下几点：

• 使用:invalid伪选择器：.assert.cssClassPresent('.c-textfield__input--password', ':invalid')。但是，这失败了，因为它只发现.c-textfield__input--password作为在输入元素上定义的类。
• 访问validity属性(.assert.attributeEquals('.c-textfield__input--email', 'validity', 'somevalue))。但这也失败了。

Testing if attribute validity of <.c-textfield__input--email> equals "somevalue". Element does not have a validity attribute. - expected "somevalue" but got: "null"

有人知道如何使表单验证测试自动化吗？

Answer 1

我能够通过使用自定义断言来做到这一点。

在文件test/e2e/custom-assertions/isValidInput.js中：

exports.assertion = function (selector, stateAttr, stateValue) {
  this.message = 'Testing if element <' + selector + '> has ValidityState ' + stateAttr + ': ' + stateValue
  this.expected = stateValue

  this.pass = function (val) {
    return val === this.expected
  }

  this.value = function (res) {
    return res.value[stateAttr]
  }

  this.command = function (cb) {
    var self = this
    return this.api.execute(
      function (selector) {
        return document.querySelector(selector).validity
      },
      [selector],
      function (res) {
        cb.call(self, res)
      }
    )
  }
}

然后，您可以这样使用它，例如，对于所需的空输入表单：

browser
  .assert.isValidInput('#form-input-id', 'valid', false)
  .assert.isValidInput('#form-input-id', 'valueMissing', true)

不要忘记加载自定义断言。对我来说，我不得不在我的nightwatch.conf.js文件中添加以下内容：

module.exports = {
  ...
  custom_assertions_path: ['test/e2e/custom-assertions'],
  ...
}