Question

我有一个典型的登录表单，其中包含电子邮件和密码以及提交按钮。密码和电子邮件字段是必需的，即设置表单上的必需属性。这样，当用户单击提交并且例如电子邮件字段为空时，将弹出错误“请填写字段”。这在手动测试中工作正常。

问题是我想用nightwatch自动检查，我想到了以下内容：

使用: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'],
  ...
}

使用HTML5验证API和带有nightwatch API的伪选择器测试表单验证

1 个答案: