Extractor를 사용하여 요소에 클래스가 있는지 테스트하는 방법

Extractor를 사용하여 요소에 클래스가 있는지 테스트하는 방법

나는 e2e 앱에 대해 Protractor를 사용해 보고 있는데, 요소에 특정 클래스가 있는지 없는지를 어떻게 감지해야 하는지 모르겠다.

내 경우, 테스트에서 제출 버튼을 클릭하여 양식[name="getofer"]에 .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
    });
});

One gotcha 사용 시 주의해야 할 점toMatch()는, 허가된 회답과 같이 부분 일치합니다.예를 들어 클래스가 있을 수 있는 요소가 있다고 가정해 보겠습니다.correct그리고.incorrect클래스 포함 여부를 테스트하고 싶다.correct를 사용하는 경우expect(element.getAttribute('class')).toMatch('correct')이 값은 요소에 다음 값이 있는 경우에도 true가 반환됩니다.incorrect학급.

제안:

완전 일치만을 받아들이는 경우는, 다음과 같이 도우미 방법을 작성할 수 있습니다.

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

다음과 같이 사용할 수 있습니다.expect는 자동으로 프로젝터의 약속을 해결합니다).

expect(hasClass(element(by.name('getoffer')), 'ngDirty')).toBe(true);

재스민이랑 같이 프로젝터를 사용한다면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'

이거 먹어봤어?

const el = element(by.name('getoffer'));
expect(el.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);
        });
    }
});

내 시험에서 나는 이제 이렇게 studf를 할 수 있다:

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

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

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

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

편집: 이것이 기본적으로 상위 답변과 같다는 것을 방금 알았습니다.

여기 Jasmine 1.3.x 커스텀이 있습니다.toHaveClass부정하는 사람.not지원 및 최대 5초(또는 지정한 시간)까지 기다립니다.

onPrepare 블록에 추가할 풀 커스텀매처를 다음 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');
});

이를 위한 한 가지 방법은 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);

기본적으로 다음과 같은 몇 가지 문제를 해결하고 있습니다.

1. "class"는이므로 이명령어(class" html Atribute)로 할 수 .await★★★★★★★★★★★★★★★★★★★★★★★」

let class = await element.getAttribute('class')

2. 일단 클래스의 가치를 얻으면, 당신은 그것을 주장하고 싶다.

// for exact value
expect(class).toBe("active");

// for partial match
expect(class).toContain("active");
// or
expect(class.includes("active")).toBe(true);

// BUT, keep in mind
expect('male').toContain('male');
expect('female').toContain('male');
// BOTH pass

언급URL : https://stackoverflow.com/questions/20268128/how-to-test-if-an-element-has-class-using-protractor