Я пробую Protractor для тестирования приложения Angular e2e и не понял, как определить, имеет ли элемент определенный класс или нет.
В моем случае тест нажимает кнопку отправки, и теперь я хочу знать, имеет ли форма [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
});
});
источник
expect(hasClass(element(by.name('getoffer')), 'ng-dirty')).toBe(true);
Если вы используете транспортир с Jasmine, вы можете использовать
toMatch
для сопоставления как регулярное выражение ...expect(element(by.name('getoffer')).getAttribute('class')).toMatch('ngDirty');
Также обратите внимание, что это
toContain
будет соответствовать элементам списка, если вам это нужно.источник
element
вернуть объект сhasClass
методом, который вы могли бы обернуть внутриexpect
вызова ...toContain
может быть лучшим выбором, чемtoMatch
в этом случае./(^|\s)ngDirty($|\s)/
..not.toContain
чтобы проверить, нет ли у него определенного класса, или.toContain
для проверки, существует ли онСамый простой:
expect(element.getAttribute('class')).toContain("active");
источник
java.util.ArrayList cannot be cast to java.lang.String
в Microsoft EdgeОсновываясь на ответе Сергея К., вы также можете добавить настраиваемый сопоставитель для этого:
(кофе)
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'
источник
Попытался ли ты...
var el = element(by.name('getoffer')); expect(e.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); }); } });
в моем тесте я теперь могу делать вот так:
var myDivs = element.all(by.css('div.myClass')); expect(myDivs.count()).toBe(3); // test for class expect(myDivs.get(0)).not.toHaveClass('active');
это также работает, когда элемент имеет несколько классов или когда элемент вообще не имеет атрибута класса.
источник
Здесь пользовательский
toHaveClass
сопоставитель Jasmine 1.3.x с.not
поддержкой отрицания плюс ожидание до 5 секунд (или как вы укажете).Найдите полный настраиваемый сопоставитель, который будет добавлен в ваш блок onPrepare в этой сути
Пример использования:
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; }); }
По крайней мере, так я делаю, без необходимости использовать функцию ожидания. Эта функция просто возвращает истину, если класс находится внутри элемента, и ложь, если нет. Здесь также используются обещания, поэтому вы могли бы использовать его так:
checkHasClass('#your-element', 'your-class').then(function(class_found){ if (class_found) console.log("Your element has that class"); });
Изменить: я только что понял, что это по сути то же самое, что и главный ответ
источник
Один из способов добиться этого - использовать 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);
источник