如何testing一个元素是否使用了量angular器的类？

我正在尝试Protactor e2etestingAngular应用程序，并没有想出如何检测一个元素是否具有特定的类。

在我的情况下，testing点击提交button，现在我想知道表单[名称=“getoffer”]类.ngDirty。 什么可能是解决scheme？

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

Answer 1

你必须注意的一个问题是使用toMatch() ，正如在接受的答案中，是部分匹配。 例如，假设你有一个元素可能有correct和incorrect的类，你想testing它有correct的类。 如果你使用expect(element.getAttribute('class')).toMatch('correct') ，即使元素有incorrect类，它也会返回true。

我的build议：

如果您只想接受完全匹配，则可以为其创build一个辅助方法：

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

你可以像这样使用它（利用expect自动解决量angular器中的承诺的事实）：

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

Answer 2

如果你使用茉莉花量angular器，你可以使用toMatch匹配作为正则expression式…

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

另外，请注意，如果您需要， toContain将匹配列表项。

Answer 3

最简单的是：

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

Answer 4

你有没有尝试过…

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

或以上的变化…

Answer 5

根据Sergey K的回答，你也可以添加一个自定义的匹配器来完成这个工作：

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

那么你可以在这样的testing中使用它：

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

如果没有，你会得到以下错误：

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

Answer 6

我做了这个匹配器，我不得不把它包装在一个承诺，并使用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); }); } }); 

在我的testing中，我现在可以做这样的stuf：

  var myDivs = element.all(by.css('div.myClass')); expect(myDivs.count()).toBe(3); // test for class expect(myDivs.get(0)).not.toHaveClass('active'); 

当一个元素有多个类或者一个元素根本没有class属性的时候，这也是有效的。

Answer 7

这里有一个Jasmine 1.3.x自定义toHaveClass匹配器否定支持加上等待5秒（或任何你指定的）。

在这个要点find完整的自定义匹配器添加到您的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'); }); 

Answer 8

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

至less我这样做，而不需要使用expect函数。 如果该类在元素内部，则该函数仅返回true，否则返回false。 这也使用承诺，所以你会像使用它：

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

编辑：我刚刚意识到这是基本相同的最佳答案

Answer 9

实现这一点的一种方法是使用xpath并使用contains()

例：

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