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

Question

我有一个典型的登录表单，其中包含电子邮件和密码以及提交按钮。密码和电子邮件字段是必需的，即设置了表单上的必需属性。这是这样的，当用户单击提交并且例如电子邮件字段为空时，会弹出错误 'Please fill in the field'。这在手动测试中效果很好。

问题是我想用 nightwatch 自动进行检查，我想到了以下几点：

使用 :invalid 伪选择器：.assert.cssClassPresent('.c-textfield__input--password', ':invalid')。但是，这失败了，因为它只发现 .c-textfield__input--password 作为输入元素上定义的 class。
访问 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'],
  ...
}

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

testing form validation with HTML5 validation API and pseudo-selector with nightwatch API

nightwatch.js