92

分度器を e2e テスト Angular アプリにしようとしていますが、要素に特定のクラスがあるかどうかを検出する方法がわかりません。

私の場合、テストは送信ボタンをクリックして、フォーム[name="getoffer"]にクラス.ngDirtyがあるかどうかを知りたいです。解決策は何ですか？

describe('Contact form', function() {
    beforeEach(function(){
        browser.get('http://localhost:9000');
        element(by.linkText('Contact me')).click();
    });

    it('should fail form validation, all fields pristine', function() {
        element(by.css('.form[name="getoffer"] input[type="submit"]')).click();
        expect(element(by.name('getoffer'))).toHaveClass('ngDirty'); // <-- This line
    });
});
4

11 に答える 11

113

toMatch()受け入れられた回答のように、using で注意しなければならない問題の 1 つは、部分一致です。たとえば、クラスcorrectと を持つ可能性のある要素がありincorrect、それがクラス を持つことをテストしたいとしますcorrect。を使用するexpect(element.getAttribute('class')).toMatch('correct')と、要素にincorrectクラスが含まれていても true が返されます。

私のおすすめ：

完全一致のみを受け入れたい場合は、ヘルパー メソッドを作成できます。

var hasClass = function (element, cls) {
    return element.getAttribute('class').then(function (classes) {
        return classes.split(' ').indexOf(cls) !== -1;
    });
};

次のように使用できます ( expectProtractor でプロミスを自動的に解決するという事実を利用します)。

expect(hasClass(element(by.name('getoffer')), 'ngDirty')).toBe(true);
于 2014-04-13T17:40:27.183 に答える
57

ジャスミンで分度器を使用している場合はtoMatch、正規表現として一致するために使用できます...

expect(element(by.name('getoffer')).getAttribute('class')).toMatch('ngDirty');

toContainまた、必要に応じてリスト項目と一致することに注意してください。

于 2013-12-02T16:57:20.863 に答える
19

最も簡単なのは次のとおりです。

expect(element.getAttribute('class')).toContain("active");
于 2016-12-09T12:01:34.080 に答える
4

Sergey K からの回答に基づいて、カスタムマッチャーを追加してこれを行うこともできます。

(コーヒースクリプト)

  beforeEach(()->
    this.addMatchers({
      toHaveClass: (expected)->
        @message = ()->
          "Expected #{@actual.locator_.value} to have class '#{expected}'"

        @actual.getAttribute('class').then((classes)->
          classes.split(' ').indexOf(expected) isnt -1
        )
    })
  )

次に、次のようなテストで使用できます。

expect($('div#ugly')).toHaveClass('beautiful')

そうでない場合は、次のエラーが発生します。

 Message:
   Expected div#ugly to have class beautiful
 Stacktrace:
   Error: Expected div#ugly to have class 'beautiful'
于 2014-07-31T14:47:47.070 に答える
2

私はこのマッチャーを作成しました。プロミスでラップし、2 つのリターンを使用する必要がありました

this.addMatchers({
    toHaveClass: function(a) {
        return this.actual.getAttribute('class').then(function(cls){
            var patt = new RegExp('(^|\\s)' + a + '(\\s|$)');
            return patt.test(cls);
        });
    }
});

私のテストでは、次のようなことができるようになりました：

   var myDivs = element.all(by.css('div.myClass'));
   expect(myDivs.count()).toBe(3);

   // test for class
   expect(myDivs.get(0)).not.toHaveClass('active');

これは、要素に複数のクラスがある場合、または要素にクラス属性がまったくない場合にも機能します。

于 2015-01-20T08:51:15.417 に答える
2 
function checkHasClass (selector, class_name) {
    // custom function returns true/false depending if selector has class name

    // split classes for selector into a list
    return $(selector).getAttribute('class').then(function(classes){
        var classes = classes.split(' ');
        if (classes.indexOf(class_name) > -1) return true;
        return false;
    });
}

これは、期待関数を使用する必要なく、少なくとも私が行う方法です。この関数は、クラスが要素内にある場合は true を返し、そうでない場合は false を返します。これも promise を使用するため、次のように使用します。

checkHasClass('#your-element', 'your-class').then(function(class_found){
    if (class_found) console.log("Your element has that class");
});

編集：これは本質的にトップの回答と同じであることに気付きました

于 2015-05-07T17:32:03.953 に答える
1

これを達成する1つの方法は、xpathを使用して使用することですcontains()

例：

var expectElementToHaveClass = function (className) {
    var path = by.xpath("//div[contains(@class,'"+ className +"')]");
    expect(element.all(path).count()).to.eventually.be.eq(1);
};
于 2015-07-06T06:45:05.867 に答える
1

ここでは、否定をサポートし、最大 5 秒 (または指定したもの) まで待機する Jasmine 1.3.x カスタムtoHaveClassマッチャーを示します。.not

この要点で onPrepare ブロックに追加する完全なカスタムマッチャーを見つけます

使用例:

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');
});
于 2014-08-06T02:06:33.607 に答える