Bagaimana cara menguji apakah suatu elemen memiliki kelas menggunakan Busur derajat?

Saya mencoba Protractor untuk menguji aplikasi Angular e2e dan belum menemukan cara untuk mendeteksi apakah suatu elemen memiliki kelas tertentu atau tidak.

Dalam kasus saya, pengujian mengklik tombol kirim dan sekarang saya ingin tahu apakah form [name = "getoffer"] memiliki class .ngDirty. Apa solusinya?

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

Satu gotcha yang harus Anda perhatikan dengan menggunakan toMatch(), seperti dalam jawaban yang diterima, adalah kecocokan parsial. Misalnya, Anda memiliki elemen yang mungkin memiliki kelas correctdan incorrect, dan Anda ingin menguji bahwa ia memiliki kelas correct. Jika Anda menggunakannya expect(element.getAttribute('class')).toMatch('correct'), itu akan mengembalikan nilai true meskipun elemen tersebut memiliki incorrectkelas.

Saran saya:

Jika Anda hanya ingin menerima pencocokan persis, Anda dapat membuat metode pembantu untuk itu:

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

Anda dapat menggunakannya seperti ini (memanfaatkan fakta yang expectsecara otomatis menyelesaikan promise di Protractor):

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

Jika Anda menggunakan Busur derajat dengan Jasmine, Anda dapat menggunakan toMatchpencocokan sebagai ekspresi reguler ...

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

Juga, perhatikan bahwa toContainakan cocok dengan item daftar, jika Anda membutuhkannya.

Yang paling sederhana adalah:

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

Berdasarkan jawaban dari Sergey K, Anda juga bisa menambahkan custom matcher untuk melakukan ini:

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

Kemudian Anda bisa menggunakannya dalam tes seperti ini:

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

Dan Anda akan mendapatkan kesalahan berikut jika tidak:

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

Sudahkah kamu mencoba ...

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

atau variasi di atas ...

Saya membuat matcher ini, saya harus membungkusnya dengan janji dan menggunakan 2 pengembalian

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

dalam pengujian saya, saya sekarang dapat melakukan stuf seperti ini:

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

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

ini juga berfungsi ketika sebuah elemen memiliki beberapa kelas atau ketika sebuah elemen tidak memiliki atribut kelas sama sekali.

Di sinitoHaveClass pencocokan khusus Jasmine 1.3.x dengan .notdukungan negasi plus tunggu hingga 5 detik (atau apa pun yang Anda tentukan).

Temukan pencocokan kustom lengkap untuk ditambahkan ke blok onPrepare Anda di inti ini

Penggunaan sampel:

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

Ini adalah cara saya melakukannya setidaknya, tanpa perlu menggunakan fungsi ekspektasi. Fungsi ini hanya mengembalikan nilai true jika kelas ada di dalam elemen dan false jika tidak. Ini juga menggunakan promise sehingga Anda akan menggunakannya seperti:

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

Sunting: Saya baru menyadari ini pada dasarnya sama dengan jawaban teratas

Salah satu cara untuk mencapai ini adalah dengan menggunakan xpath dan use contains()

Contoh:

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

Anda dapat menggunakan pengurai CSS untuk menangani ini dengan memeriksa apakah elemen dengan kelas yang diberikan ada:

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