量角器检查 DOM 是否已更改

Question

我有一个 bootstrap 表单，用户可以在将其共享给其他人填写之前进行预览，但在预览表单中，我希望按钮不被禁用，而只是对它们不执行任何操作。按它们根本没有任何作用。

我最初的想法是这样的：

var modal = element(by.id('my-modal'));
element(by.id('submit-button')).click();
expect(element(by.id('my-modal'))).toBe(modal);

但这失败了，结果是项目不相等。

如何使 DOM 相同？

Answer 1

不是比较元素，而是比较它的 getText 长度：

var modal = element(by.id('my-modal'));
var m1length;
modal.getText().then(function(text) {
      m1length = text.length;
    });
element(by.id('submit-button')).click();
element(by.id('my-modal')).getText().then(function(text) { 
expect(text.length).toBe(m1length);
});

Answer 2

toBe 进行参考比较，因此您的示例不起作用，因为您有两个 element(by.id('my-modal')) 实例。

这取决于你想比较什么。如果你想确保 DOM 是相同的（直到属性和结构），你可以比较结果 html:

var htmlBefore = element(by.id('my-modal')).getOuterHtml();
element(by.id('submit-button')).click();
expect(element(by.id('my-modal')).getOuterHtml()).toBe(htmlBefore);

或者您可以比较文本（即 getText()）。这实际上仅取决于您定义为 "same".

的内容

量角器检查 DOM 是否已更改

protractor check if DOM has changed

twitter-bootstrap

angularjs

protractor