Wypróbowuję Protractor to e2e test aplikacji Angular i nie wiem, jak wykryć, czy element ma określoną klasę, czy nie.
W moim przypadku test klika przycisk przesyłania, a teraz chcę wiedzieć, czy formularz [name = "getoffer"] ma klasę .ngDirty. Jakie mogą być rozwiązania?
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
});
});
źródło
expect(hasClass(element(by.name('getoffer')), 'ng-dirty')).toBe(true);
Jeśli używasz Kątomierza z Jasmine, możesz użyć
toMatch
dopasowania jako wyrażenia regularnego ...expect(element(by.name('getoffer')).getAttribute('class')).toMatch('ngDirty');
Pamiętaj też, że
toContain
jeśli tego potrzebujesz, będzie pasować do elementów listy.źródło
element
sięhasClass
, żeexpect
zwrócę obiekt metodą, którą można zawinąć w wywołanie ...toContain
może być lepszym wyborem niżtoMatch
w tym przypadku./(^|\s)ngDirty($|\s)/
..not.toContain
do sprawdzenia, czy nie ma określonej klasy lub.toContain
do sprawdzenia, czy istniejeNajprostszy to:
expect(element.getAttribute('class')).toContain("active");
źródło
java.util.ArrayList cannot be cast to java.lang.String
w przeglądarce Microsoft EdgeW oparciu o odpowiedź od Sergeya K, możesz również dodać niestandardowy element dopasowujący, aby zrobić to:
(skrypt kawowy)
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 ) }) )
Następnie możesz go użyć w testach takich jak ten:
expect($('div#ugly')).toHaveClass('beautiful')
Jeśli tak się nie stanie, pojawi się następujący błąd:
Message: Expected div#ugly to have class beautiful Stacktrace: Error: Expected div#ugly to have class 'beautiful'
źródło
Czy próbowałeś...
var el = element(by.name('getoffer')); expect(e.getAttribute('class')).toBe('ngDirty')
lub odmiana powyższego ...
źródło
Zrobiłem ten matcher, musiałem zawinąć go w obietnicę i użyć 2 zwrotów
this.addMatchers({ toHaveClass: function(a) { return this.actual.getAttribute('class').then(function(cls){ var patt = new RegExp('(^|\\s)' + a + '(\\s|$)'); return patt.test(cls); }); } });
w moim teście mogę teraz zrobić takie rzeczy:
var myDivs = element.all(by.css('div.myClass')); expect(myDivs.count()).toBe(3); // test for class expect(myDivs.get(0)).not.toHaveClass('active');
działa to również, gdy element ma wiele klas lub gdy element nie ma w ogóle atrybutu klasy.
źródło
Tutaj niestandardowy element dopasowujący Jasmine 1.3.x
toHaveClass
z.not
obsługą negacji plus odczekaj do 5 sekund (lub cokolwiek wybierzesz).W tym streszczeniu znajdź pełny niestandardowy element dopasowujący, który ma zostać dodany do bloku onPrepare
Przykładowe użycie:
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'); });
źródło
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; }); }
Tak to przynajmniej robię, bez potrzeby używania funkcji oczekiwania. Ta funkcja po prostu zwraca wartość true, jeśli klasa znajduje się wewnątrz elementu, lub false, jeśli nie. Używa to również obietnic, więc możesz ich używać w następujący sposób:
checkHasClass('#your-element', 'your-class').then(function(class_found){ if (class_found) console.log("Your element has that class"); });
Edycja: właśnie zdałem sobie sprawę, że jest to zasadniczo to samo, co najlepsza odpowiedź
źródło
Jednym ze sposobów osiągnięcia tego byłoby użycie xpath i użycie
contains()
Przykład:
var expectElementToHaveClass = function (className) { var path = by.xpath("//div[contains(@class,'"+ className +"')]"); expect(element.all(path).count()).to.eventually.be.eq(1); };
źródło
Możesz użyć parsera CSS, aby sobie z tym poradzić, sprawdzając, czy istnieje element o podanej klasie:
expect(element(by.css('.form[name="getoffer"].ngDirty')).isPresent()).toBe(true);
źródło