Protractor - Cannot get nested element by css

Question

I've been on this matter for several hours since now and I'm still stuck on it.

In this piece of html code:

<div class="container ng-scope">
  <div class="fc-toolbar"></div>
  <div class="fc-view-container" style="">
     <div class="fc-view fc-agendaWeek-view fc-agenda-view">
        <table>
           <thead class="fc-head"></thead>
           <tbody class="fc-body">
              <tr>
                 <td class="fc-widget-content">
                    <div class="fc-day-grid"></div>
                    <hr class="fc-divider fc-widget-header">
                    <div class="fc-time-grid-container fc-scroller" style="height: 329px;">
                       <div class="fc-time-grid">
                          <div class="fc-bg"></div>
                          <div class="fc-slats">
                             <table>
                                <tbody>
                                   <tr>
                                      <td class="fc-axis fc-time fc-widget-content" style="width: 44px;"><span>00</span></td>
                                      <td class="fc-widget-content"></td>
                                   </tr>
                                   <tr class="fc-minor">
                                      <td class="fc-axis fc-time fc-widget-content" style="width: 44px;"></td>
                                      <td class="fc-widget-content"></td>
                                   </tr>
                                   <tr>
                                      <td class="fc-axis fc-time fc-widget-content" style="width: 44px;"><span>01</span></td>
                                      <td class="fc-widget-content"></td>
                                   </tr>
                                   <tr class="fc-minor">
                                      <td class="fc-axis fc-time fc-widget-content" style="width: 44px;"></td>
                                      <td class="fc-widget-content"></td>
                                   </tr>
                                   <tr>
                                      <td class="fc-axis fc-time fc-widget-content" style="width: 44px;"><span>02</span></td>
                                      <td class="fc-widget-content"></td>
                                   </tr>
                                   <tr class="fc-minor">
                                      <td class="fc-axis fc-time fc-widget-content" style="width: 44px;"></td>
                                      <td class="fc-widget-content"></td>
                                   </tr>
                                </tbody>
                             </table>
                          </div>
                       </div>
                    </div>
                 </td>
              </tr>
           </tbody>
        </table>
     </div>
  </div>

For a protractor e2e test, I have to catch the second tr within the table and get its coordinates using getLocation().

This is how I supposed to catch the tr:

var secondRow = element(by.css('.fc-body tr .fc-time-grid-container.fc-scroller .fc-slats table tbody tr:nth-child(2)'));

And how may I get its coordinates:

secondRow.getLocation()

Every time I try to run the above code I got:

NoSuchElementError: No element found using locator: By.cssSelector(".fc-body tr .fc-time-grid-container.fc-scroller .fc-slats table tbody")

If I copy&paste .fc-body tr .fc-time-grid-container.fc-scroller .fc-slats table tbody in the browser console using JQuery, it returns the second tr correctly.

I can't figure why is not working with protractor.

Is the table in an iframe? Do you try adding some sleep yet? — Buaban
– Buaban, Commented May 20, 2016 at 8:38
The table is not an iframe. The code above has been taken from fullcalendar. Adding sleeps the problem still be. — Andrea Grimandi
– Andrea Grimandi, Commented May 20, 2016 at 8:54

Andrea Grimandi · Accepted Answer · 2016-05-20 12:41:29Z

1

It was too much easy to be catched... I found a beforeEach that every time reloads the main page so many elements (just like that one) were not present.

I had to pay attention...

beforeEach(function() {
   browser.get('http://localhost:9000/#/');//<--- ...to this line!
});

Now I can get that element.

answered May 20, 2016 at 12:41

Andrea Grimandi

6512 gold badges9 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

Protractor - Cannot get nested element by css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related