angularjs - 포함 - 자바스크립트 classlist




Protractor를 사용하여 요소에 클래스가 있는지 테스트하는 방법은 무엇입니까? (8)

CSS 파서를 사용하여 주어진 클래스의 엘리먼트가 존재 하는지를 체크함으로써 이것을 처리 할 수있다 :

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

각도기 응용 프로그램을 시험해보고 요소가 특정 클래스를 가지고 있는지 여부를 감지하는 방법을 찾지 못했습니다.

필자의 경우, 테스트는 제출 버튼을 클릭하고 이제 폼 [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
    });
});

Jasmine과 함께 각도기를 사용하는 경우 toMatch 를 사용하여 toMatch 으로 일치시킬 수 있습니다 ...

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

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


가장 단순한 것 :

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

나는이 정규 표현식을 만들었고 약속을 지키고 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');

요소가 여러 클래스를 가졌거나 요소에 클래스 속성이 전혀없는 경우에도 작동합니다.


신중하다면 toMatch를 사용할 수 있습니다. 정규 표현식에서 \ b를 주목하십시오. 클래스 이름의 양쪽 끝에 경계가 있는지 확인합니다.

expect(element(by.name('getoffer')).getAttribute('class')).toMatch(/\bngDirty\b/);

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

예:

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

Here 재스민 1.3.x 커스텀 toHaveClass 매처는 부정 (negation) .not 지원하지 toHaveClass 플러스 (+)로 5 초 동안 기다린다.

Here

샘플 사용법 :

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

이것은 expect 함수를 사용할 필요없이 적어도 그렇게하는 방법입니다. 이 함수는 클래스가 요소 안에 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다. 이것은 또한 약속을 사용하므로 다음과 같이 사용할 수 있습니다.

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

편집 : 난 그냥 이것이 본질적으로 최고 대답과 동일하다는 것을 깨달 았어.





protractor