DOM 中的 hasAttribute 无法正常工作答案

【问题标题】：hasAttribute in DOM not working properlyDOM 中的 hasAttribute 无法正常工作
【发布时间】：2018-12-07 08:55:18
【问题描述】：

我在 tect.html 文件中有这个表单，我想测试按钮是否被禁用：

&lt;button id="ref_button"....[disabled]="editForm.form.invalid || isSaving" class="btn btn-primary"&gt;

我正在使用量角器、黄瓜和 chai dom 来测试当表单数据无效时这个按钮是否被禁用，所以我检查它的属性 disabled 像这样：

  JSDOM.fromFile("file.html").then(dom => {
   dom.window.document.getElementById("ref_button").has.attr('disabled').should.be.true;
     
    });
  });

现在测试失败了，因为它总是发现属性禁用，按钮是否禁用，数据是否有效。

我做错了什么？

【问题讨论】：

标签： javascript html angularjs testing protractor

【解决方案1】：

我认为属性[disabled] 不存在于按钮元素上（这就是为什么它总是正确的）。这是您必须寻找的属性disabled（没有[ 和] 标记。它是绑定语法。

所以当考虑它时，这应该有效：（没有测试......）

dom.window.document.getElementById("ref_button").should.not.have.attr("disabled");

但可能这将始终输出false，因为按钮确实具有该属性。为了使这始终有效，您应该获取 disabled 属性的值并检查它是否为真。

dom.window.document.getElementById("ref_button").getAttribute("disabled").toBeTruethy().

我实际上不知道 chai 中是否存在 toBeTruethy()，但我的意思是，您应该检查属性的值，而不仅仅是一般情况下是否存在属性。

还有一点要提的是：

element(by.css("*[id='field_nombre']")).click();
element(by.css("*[id='field_nombre']")).sendKeys('').then(callback);

我猜click() 也是一个异步函数，在上面的示例中，密钥是在click() 完成执行之前发送的。我认为这是正确的：

element(by.css("*[id='field_nombre']")).click().then(function() {
  element(by.css("*[id='field_nombre']")).sendKeys('').then(callback);
});

【讨论】：

Yell，是的，回答你的疑问，它永远不会找到'disabled'，但在数据有效和无效的两种情况下都只会找到['disabled']
element(by.css('ref_button').isEnabled().then(function(isEnabled) { /* verify it should be true or false here... */ }); 怎么样？我忘记了该功能，但它应该准确地检查您要检查的内容。
根据您的疑问，如果 func 是异步的，我可以在测试期间完美地看到执行的步骤并在浏览器中发送正确的数据。根据建议 dom.window.document.getElementById("ref_button").hasAttribute('disabled').should.be.true;总是错误的。
我修改了我的问题

【解决方案2】：

对于 angularJs，你应该在你的 html 中使用指令 ng-disabled

来自官方documentation：

一个特殊的指令是必要的，因为我们不能使用插值在 disabled 属性中。有关更多信息，请参阅插值指南信息。

【讨论】：