각도기를 사용하여 요소에 클래스가 있는지 테스트하는 방법은 무엇입니까?

나는 각도 앱을 e2e 테스트하기 위해 각도기를 시도하고 있으며 요소에 특정 클래스가 있는지 여부를 감지하는 방법을 찾지 못했습니다.

제 경우에는 테스트에서 제출 버튼을 클릭하고 이제 form [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
    });
});

toMatch()허용되는 답변에서 와 같이 using을 사용하여 찾아야 할 한 가지 문제 는 부분 일치입니다. 예를 들어, 당신이 클래스를 가질 수 요소가 있다고 가정하자 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);

Jasmine과 함께 Protractor를 사용 toMatch하는 경우 정규식으로 일치 하는 데 사용할 수 있습니다 .

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

또한 toContain필요한 경우 목록 항목과 일치합니다.

가장 간단한 것은 :

expect(element.getAttribute('class')).toContain("active");

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'

시도해 보셨습니까 ...

var el = element(by.name('getoffer'));
expect(e.getAttribute('class')).toBe('ngDirty')

또는 위의 변형 ...

이 매처를 만들었는데 약속에 싸서 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);
        });
    }
});

내 테스트에서 이제 다음과 같이 stuf를 할 수 있습니다.

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

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

이것은 요소에 여러 클래스가 있거나 요소에 클래스 속성이 전혀 없을 때도 작동합니다.

여기 에 toHaveClass부정을 .not지원 하는 Jasmine 1.3.x 사용자 지정 매 처가 있으며 최대 5 초 (또는 사용자가 지정한대로)를 기다립니다.

이 요점에서 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');
});

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");
});

편집 : 나는 이것이 본질적으로 최상위 답변과 동일하다는 것을 깨달았습니다.

이를 달성하는 한 가지 방법은 xpath를 사용하고 contains()

예:

var expectElementToHaveClass = function (className) {
    var path = by.xpath("//div[contains(@class,'"+ className +"')]");
    expect(element.all(path).count()).to.eventually.be.eq(1);
};

CSS 파서를 사용하여 주어진 클래스의 요소가 존재하는지 확인하여이를 처리 할 수 ​​있습니다.

expect(element(by.css('.form[name="getoffer"].ngDirty')).isPresent()).toBe(true);