Protractor / Web Driver：检测何时将类添加到元素答案

【问题标题】：Protractor / Web Driver : Detect when Class is added to ElementProtractor / Web Driver：检测何时将类添加到元素
【发布时间】：2014-08-07 01:02:31
【问题描述】：

这是按钮的代码。基本上当按钮被点击时，它会变成蓝色

 <button id="testbutton" type="button" ng-class="selected('test')" ng-click="isMultiple('test')">test</button>

在浏览器中它基本上来自

class = btn btn-block btn-lg ts-btn-default

到

class = btn btn-block btn-lg ts-btn-blue

我已经有一个原始元素的 var。如何让量角器检测放入的 ts-btn-blue？我应该用不同的类制作另一个元素并做一个

isdiplayed()

对于那个还是有更好的方法？

【问题讨论】：

标签： selenium-webdriver protractor

【解决方案1】：

点击后检查类是否存在：

expect(yourElm.getAttribute('class')).toContain('ts-btn-blue');

如果您遇到时间问题，例如您的测试失败，因为 expect() 在 html 实际到达 DOM 之前运行，您可能会发现我在下面实际使用的内容很有用。

expect(yourElm).toHaveClass('ts-btn-blue');

Here 一个 Jasmine 1.3.x 自定义 toHaveClass 匹配器，带有否定 .not 支持加上最多等待 5 秒（或您指定的任何内容）。

Find the full custom matcher to be added on your onPrepare block in this gist

示例用法：

it('test the class finder custom matcher', function() {
    // These guys should pass OK given your user input
    // element starts with an ng-invalid class:
    expect($('#user_name')).toHaveClass('ng-invalid');
    expect($('#user_name')).not.toHaveClass('ZZZ');
    expect($('#user_name')).toNotHaveClass('ZZZ');
    expect($('#user_name')).not.toNotHaveClass('ng-invalid');
    // These guys should each fail:
    expect($('#user_name')).toHaveClass('ZZZ');
    expect($('#user_name')).not.toHaveClass('ng-invalid');
    expect($('#user_name')).toNotHaveClass('ng-invalid');
    expect($('#user_name')).not.toNotHaveClass('ZZZ');
});

更新

这仅适用于 ElementFinder。一旦 this jasminewd PR #9 被合并，就可以在 WebElements 上工作。

【讨论】：