Como testar se um elemento tem classe usando Protractor?

Estou testando o Protractor para testar o aplicativo Angular do e2e e não descobri como detectar se um elemento tem uma classe específica ou não.

No meu caso, o teste clica no botão enviar e agora quero saber se form [name = "getoffer"] tem a classe .ngDirty. Quais podem ser as soluções?

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

Uma pegadinha que você deve procurar usar toMatch(), como na resposta aceita, são as correspondências parciais. Por exemplo, digamos que você tenha um elemento que pode ter as classes correcte incorrect, e deseja testar se ele tem a classe correct. Se você fosse usar expect(element.getAttribute('class')).toMatch('correct'), isso retornará verdadeiro mesmo se o elemento tiver a incorrectclasse.

Minha sugestão:

Se você deseja aceitar apenas correspondências exatas, pode criar um método auxiliar para isso:

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

Você pode usá-lo assim (aproveitando o fato de que expectresolve automaticamente as promessas no Protractor):

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

Se você estiver usando o Transferidor com Jasmine, poderá usar toMatchpara corresponder como uma expressão regular ...

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

Além disso, observe que toContaincorresponderá aos itens da lista, se necessário.

O mais simples é:

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

Com base na resposta de Sergey K, você também pode adicionar um matcher personalizado para fazer isso:

(coffeescript)

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

Então você pode usá-lo em testes como este:

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

E você obterá o seguinte erro se isso não acontecer:

 Message:
   Expected div#ugly to have class beautiful
 Stacktrace:
   Error: Expected div#ugly to have class 'beautiful'

Você tentou...

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

ou uma variação do acima ...

Fiz este matcher, tive que embrulhar em uma promessa e usar 2 retornos

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

em meu teste agora posso fazer coisas como esta:

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

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

isso também funciona quando um elemento tem várias classes ou quando um elemento não tem nenhum atributo de classe.

Aqui, um toHaveClassmatcher personalizado Jasmine 1.3.x com .notsuporte de negação e aguarde até 5 segundos (ou o que você especificar).

Encontre o matcher personalizado completo a ser adicionado ao seu bloco onPrepare nesta essência

Uso de amostra:

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

É assim que faço pelo menos, sem a necessidade de usar a função expect. Esta função simplesmente retorna true se a classe estiver dentro do elemento e false se não estiver. Isso também usa promessas, então você pode usá-lo como:

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

Edit: acabei de perceber que isso é essencialmente o mesmo que a resposta principal

Uma maneira de conseguir isso seria usar xpath e usar contains()

Exemplo:

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

Você pode usar o analisador CSS para lidar com isso, verificando se existe um elemento com a classe fornecida:

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