Getting to a nested element via protractor

Question

The web app (Ember) renders the page as a bunch of div's. The contents of the table are dynamic. Is there a way to programatically walk through the table, reading the details of the element and clicking on the hyperlink? Firebug reports my rendered page as

<div id="ember7384" class="ember-view ember-table-table-container ember-table-fixed-table-container ember-table-header-container" style="height:30px;width:1860px;">
    <script id="metamorph-357-end" type="text/x-placeholder">
    <div id="ember7428" class="ember-view ember-table-table-container ember-table-body-container antiscroll-wrap" style="height:300px;width:1860px;">
    <div class="antiscroll-box">
    <div class="antiscroll-inner" style="width: 1860px; height: 300px;">
    <div class="ember-table-table-scrollable-wrapper">
    <script id="metamorph-376-start" type="text/x-placeholder">
   <script id="metamorph-376-end" type="text/x-placeholder">
    <div id="ember7430" class="ember-view lazy-list-container ember-table-table-block ember-table-right-table-block" style="height:300px;width:1860px;">
    <div id="ember7435" class="ember-view ember-table-table-row" style="width:1860px;top:0px;height:30px;">
    <div id="ember7447" class="ember-view" style="width:1860px;">
    <div id="ember7448" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    <a id="ember7457" class="ember-view ember-table-content" href="#/dag/dag_1420819850710_0049_1/vertices">
    <script id="metamorph-378-start" type="text/x-placeholder">
    </script>
    MRRSleepJob
    <script id="metamorph-378-end" type="text/x-placeholder">
    </script>
    </a>
    </div>
    <div id="ember7449" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    <span class="ember-table-content">
    <script id="metamorph-379-start" type="text/x-placeholder">
    </script>
dag_1420819850710_0049_1
    <script id="metamorph-379-end" type="text/x-placeholder">
    </script>
    </span>
    </div>
    <div id="ember7450" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    <div id="ember7451" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    <div id="ember7452" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    <div id="ember7453" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    <div id="ember7454" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    <div id="ember7455" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    <div id="ember7456" class="ember-view ember-table-cell text-align-left" style="width:206px;">
    </div>
    </div>
<div id="ember7436" class="ember-view ember-table
</snip>

How do I get my protractor script to get to click on the MRRSleepJob link (for example)?The ids are not static and can change. Even the name MRRSleepJob can change? Is there a way to use regex here? Something that lets me parse through a maze of div's here and reading details of the elements as we encounter them.... and then possibly acting on them, like clicking it if it is a hyerplink or just reading the name etc?

score 1 · Answer 1 · edited Aug 19 '15 at 14:26

1

You can find the element by id:

element(by.id('ember7457')).click();

Or, by link text:

element(by.linkText('MRRSleepJob')).click();

Or, by css relying on class names:

element(by.css('div.ember-view a.ember-table-content')).click();

Or. by 'findElements' which will return an array of matched elements:

browser.findElements(protractor.By.tagName('a')).then(function(elems) {

    // Access elements like this
    elems[1];
});

edited Aug 19 '15 at 14:26

magicode118

1,444
2
17
26

answered Jan 14 '15 at 16:02

alecxe

462,703
120
1,088
1,195

The ids keep changing. Is there a way to use a regex? – user3062327 Jan 14 '15 at 16:04
Alec, thanks. but what if the linkText names and the id's are dynamic? Is there a way to programatically loop through the table, looking up details of the elements and then clicking on it if it is a hyperlink? – user3062327 Jan 14 '15 at 16:13
@user3062327 ok, but what is not changing? :) – alecxe Jan 14 '15 at 16:24
Alec, is there a way to get a collection of elements by searching on the class names. Then "exploring" the element to find out if it contains a hypertext or just some data etc. The class names are repetitive and don't change. – user3062327 Jan 14 '15 at 16:39
@user3062327 okay, third option provided. – alecxe Jan 14 '15 at 16:42
@user3062327 you can use Protractor's .findElements(element-identification) method, it will return an array of matching elements – magicode118 Aug 19 '15 at 13:17

Getting to a nested element via protractor

1 Answers1