how to select child element in my test case

Question

I am trying to test a click event for my html

html

<div class="testGroup">
    <div ng-repeat="test in tests">
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
    </div>
</div>
<div class="testGroup">
    <div ng-repeat="test in tests">
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
    </div>
</div>
<div class="testGroup">
    <div ng-repeat="test in tests">
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
        <a ng-click="clickMe(test.id)">{{test.name}}</a>
    </div>
</div>

Three divs are identical but I want to select the first testGroup class and click the first a tag. I also want to click the first a tag on the second testGroup class.

In my spec.js

element.all(by.css('.testGroup')).get(0).then(function(elem) {
    element(by.repeater('test in tests').row(0)).click();
});

I am getting undefined is not a function error. I think it's because the get(0) is not a promise. How do I trigger click on the first a tag in the first testGroup div and first a tag in second testGroup div? Thanks for the help.

user2020347 · Accepted Answer · 2015-08-22T05:11:17.527

2

Would something like this work alright?

var testGroupOneTag = $$('.testGroup').get(0).$('[ng-click="clickMe(test.id)"]');
var testGroupTwoTag = $$('.testGroup').get(1).$('[ng-click="clickMe(test.id)"]');
testGroupOneTag.click():
testGroupTwoTag.click():

$$ is short for element.all by css.

edited Aug 22 '15 at 05:11

answered Aug 21 '15 at 21:49

user2020347

883
7
17

It does work. Could you please explain why it works? what does $$ do compare to element.all(by.css('.testGroup')) and what if I want to select second a tag inside the div. + 1 – BonJon Aug 21 '15 at 22:04
`$$` selects multiple elements; the same as `element.all`. `get()` is for indexing, thus the example. – Brine Aug 21 '15 at 23:26
Brine is correct. It is the same as element.all, just the shorthand. A single $ is the same as element(by.css()) and it only grabs the first element that matches. As for multiple tags, I believe you can chain it. For example, if it was
you could select it by doing $('.testGroup.exampleClass.thirdClass');
– user2020347 Aug 22 '15 at 04:51
Thanks, what if I want to select the second tag in first second – BonJon Aug 22 '15 at 05:07
I may be misunderstanding, but is this what you mean? To click the first ng-click, use `$$('[ng-click="clickMe(test.id)"]').get(0).click()`. To click the second ng-click, use `$$('[ng-click="clickMe(test.id)"]').get(1).click()`. To click the third ng-click, use `$$('[ng-click="clickMe(test.id)"]').get(2).click()`. Please edit the main post with a full size example and then comment to me again if this doesnt answer it. – user2020347 Aug 22 '15 at 05:15
Thanks. However, I am getting undefined is not a function error after I put .get(0) after your attribute selector. Also, I have edited the main post. – BonJon Aug 22 '15 at 09:15
Hmm, I'm not sure... I wouldn't use 'then', as it seems to just work this way for me: `$$('.testGroup').get(0).$('[ng-click="clickMe(test.id)"]').click()`. If it is giving you a problem, maybe this discussion could help. http://stackoverflow.com/questions/22757340/protractor-find-element-inside-a-repeater – user2020347 Aug 23 '15 at 02:20

score 1 · Answer 2 · answered Aug 23 '15 at 02:12

There is no then() on an ElementFinder anymore (since 2.0).

Chain element and element.all(), use by.repeater() and column():

var testGroups = element.all('.testGroup');
var testGroupOneTag = testGroups.first().element(by.repeater("test in tests").column("test.name"));
var testGroupTwoTag = testGroups.get(1).element(by.repeater("test in tests").column("test.name"));

testGroupOneTag.click();
testGroupTwoTag.click();

how to select child element in my test case

2 Answers2