How to select an element in protractor having multiple classes?

Question

I have a div like this:

<div class="class1 class2 class3" ng-click="displayItems(category.categoryId, category.categoryDescription, category.associatedToElements, 'isItemChecked')"> </div>

When I am trying to get the element in Protractor by css:

var elementList =  element.all(by.css('class2'));

I am getting undefined.

When I am trying the same with ng-click:

var elementList = element.all(by.css('[ng-click="displayItems(category.categoryId, category.categoryDescription, category.associatedToElements, "isItemChecked")"]'))

still I am unable to track any element.

Suggestions are most welcome.

This is my code:

var categoryList, firstCategory;
beforeEach(function(){
    categoryList = element.all(by.css('.class2'));
    firstCategory = categoryList.last();
});

it('Should display values correctly', function(){
    firstCategory.click();
});

score 33 · Answer 1 · answered Jan 20 '15 at 16:06

33

If you are learning how to use protractor I would suggest you to try elementor. It will suggest selectors based on the currently selected item.

You can do this:

$('.class1.class2.class3')

It is the same as:

element(by.css('.class1.class2.class3'))

answered Jan 20 '15 at 16:06

Andres D

8,910
2
26
31

score 13 · Accepted Answer · answered Jan 20 '15 at 11:26

13

Try replace class2 to .class2.

answered Jan 20 '15 at 11:26

IProblemFactory

9,551
8
50
66

On giving a dot I am getting element not visible error. – Jyotirmoy Pan Jan 20 '15 at 11:28
so element is found then?:) Are you sure it is visible during the test? – IProblemFactory Jan 20 '15 at 11:31
No the test is failing. It is unable to find the elements. – Jyotirmoy Pan Jan 20 '15 at 11:33
4

@JyotirmoyPan the answer is correct. You have a different problem - element is found but not visible. – alecxe Jan 20 '15 at 14:20

How to select an element in protractor having multiple classes?

2 Answers2