3

我正在创建一个关于 codeacademy 的课程，使用户能够了解 HTML 表单的创建。这主要是为了我自己的娱乐，所以我们都在同一页上。在阅读了提交测试指南和 API之后，我决定使用它expect.js来处理我的大部分验证，因为我需要遍历 DOM。

因此，我正在创建的课程要求用户创建两个标签元素（标签标签内包含内容）和两个输入字段（type定义了属性并将值设置为text）。同样，标准如下：

  1. <label>在元素内部创建两个元素<form>。请务必指明用户将填写的内容！
  2. <input>在每个元素下方创建两个<label>元素。一定要包含并定义type属性！

假设我有以下代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <form>
            <label>Foo</label>
            <input type="text">
            <label>Bar</label>
            <!-- should below here here -->
            <input>
        </form>
    </body>
</html>

这会过去的。根据我对 expect.js 操作方式和当前验证的理解，它不应该通过，因为用户忽略了添加第二个type="text"属性

我的验证标准如下：

// do the items exist?
$expect('form > label').to.have.items(2, 'Did you forget to create two <label></label> tags?').and.to.have.text(/[a-zA-Z0-9]{1,}/i, 'Do the label tags have information inside of them? <label>My Label</label>');
$expect('form > input').to.have.items(2, 'Did you forget to create two <input> tags?').and.to.have.attr('type', 'text');

// do input fields exist below labels?
$expect('label').to.have.siblings('input', "Are the input fields below the labels?");

如果用户提交 HTML 代码，那么它应该会失败，但它正在通过。我的断开连接是当用户输入第二组和<label>标签<input>时。如果他们在第二个中省略内容<label>和/或type具有它的值的属性text仍然会通过。

我在这里缺少什么特别或独特的东西吗？我已经尝试了上面提供的验证代码，无论是否使用 out 方法链接都无济于事。

我试过的

  1. 在 Codeacademy 上查看有关如何纠正此问题的任何提示
  2. 查看 expect.js README 以获取任何提示
  3. 在 StackOverflow 上寻找任何提示
  4. 删除了方法链并重新建立了方法链
4

1 回答 1

0

我认为您需要该that/which功能，该功能已详细记录。

$expect('form > input').to.have.items(2, 'Did you forget to create two <input> tags?').that.has.attr('type', 'text');
于 2013-07-09T15:51:12.653 回答