How to find specific html elements, AngularJS, protractor

Question

I'm new to AngularJS/protractor so any guidance on this is much appreciated. Since Angular JS instantiates html elements via ng- directives there are no 'id's etc that allow me to locate specific elements. (Obviously I want to do this to validate content, click them etc.) My angular js snippet looks like:

<div ng-repeat="item in myList">
    <span ng-if="item.category == 'lights'">
        <img src="../../../{{item.icon}}"/>
        &nbsp<span id="foo">{{item.name}}</span>&nbsp
    </span>
</div>

I'm trying to locate the elements {{item.name}} as I iterate over the list with this:

element.all(by.repeater('item in myList')).then(function(rows) {
    noOfItems = rows.length;
    for (i = 0; i < noOfItems; i++) {
        row = element.all(by.repeater('item in myList')).get(i);
        row.isElementPresent(By.id('foo')).then(function (isP) {
            if (isP) {
                console.log("foo exists?" + isP);
                row.findElement(By.id('foo')).then(function (el) {
                    el.getText(txt).then(function (txt) {
                        console.log("Item name  " + txt);
                    });
                });
            }
        });
    }
});

From inspection the 'row' element seems to be selenium object so I invoke 'isElementPresent(...) and this works great. It detects the correct number of 'foo' elements. However when row.findElement(...) runs, the test spec terminates prematurely. (No errors, it just ends)

I know that there will be multiple 'foo' elements in the document however I was hoping that since they are being queried within a sub html element, (row) this might work.

Any suggestions/workarounds?

strange, row.findElement(...) should throw an error, because it is an array and should not have the function findElement. row[0].findElement should work. "foo exists?" appears in console log? — nilsK
– nilsK, Commented Apr 28, 2014 at 7:56

Kenneth Baltrinic · Accepted Answer · 2014-05-03 03:30:00Z

1

Before addressing your specific question, a couple of things seem to be amiss here.

1) I don't think line 4 in the above is what you want to do. It is going to go back to the browser for every row, re-running the by.repeater query each time. All you really need to do is row = rows[i].

2) Better yet you could simply replace the first four lines with element.all(by.repeater('item in myList')).each(function(row){

As for the question of finding the foo span in context, you might try finding by.css(':scope #foo'). That should give you a search for id='foo' in the scope of the current element.

answered May 3, 2014 at 3:30

Kenneth Baltrinic

2,9812 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kenneth Baltrinic · Accepted Answer · 2014-05-03 03:43:07Z

By the way another approach to finding the right Angular generated elements is to use the by.js locator. This is not a Protractor specific locator but one provided by the underlying WebDriverJS so you have to look there for the docs.

Essentially by.js lets you provide a javascript function that will be run on the browser to find the element you are looking for. The javascript in turn can interrogate DOM elements to find and inspect the Angular $scopes that have been attached to them and thereby find elements that have specific scope values. For example, you can thereby find an element associated with an actual recordId which is present in the scope but was never rendered into HTML. This is very useful because, given how angular works, you rarely need to render these sorts of ids into HTML, but tests still need to be able to find the elements that represent them!

TimoStaudinger · Accepted Answer · 2016-07-19 18:27:48Z

0

var eleB = element(by.css('.ui-grid-render-container.ng-isolate-scope.ui-grid-render-container-body'));

eleB.element(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index').row(10)).$('.ui-grid-cell.ng-scope.ui-grid-coluiGrid-000B').getText().then(function(arr){
            console.log("-------------------\n" + arr);
});

edited Jul 19, 2016 at 18:27

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

answered Jul 19, 2016 at 16:04

user6609530

1

1 Comment

Jaap Over a year ago

Please learn how to format your answer text

Collectives™ on Stack Overflow

How to find specific html elements, AngularJS, protractor

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related