Angular JS, Protractor locator, get direct children of element

Question

I have a grid, from which I want to select all the rows and none of the elements inside the rows

The rows are just divs, no classes etc etc, something like this (inner content removed for brevity)

<div class="grid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Normally with a protractor locator you could just go element(by.css(".grid > div"))

The issue I have is that grid is already a protractor element and I don't have control over it but I still want to only select its direct children.

var gridElement = element(by.css(".grid"));

So I'd need something like

var rows = gridElement.all(by.css("> div"));

But this is not a valid CSS selector as it's missing the left hand side. Does anyone know how I can achieve this?

EDIT: Using protractor 1.0, and updating the version is unfortunately a last-resort

Yes, that would select all child divs which is not what I am going for, I just want direct descendants — Sam, Apr 03 '15 at 12:52
I am not well versed in angular so I need to learn some any way, but I'm not 100% sure why you couldn't do something like `$(this).children()` where this is the selector of the element you are targeting. This is assuming you are doing some sort of onClick or onHover or something along those lines. (I would be under the assumption you could then do your angular attached to that element as it would be a valid jQuery element selected) — Cayce K, Apr 03 '15 at 13:09
I did try various .children() methods and they didn't seem to be available — Sam, Apr 03 '15 at 14:49

score 9 · Accepted Answer · answered Apr 03 '15 at 12:57

9

You can also solve it with by.xpath():

var rows = gridElement.all(by.xpath("./div"));

answered Apr 03 '15 at 12:57

alecxe

This seems to work, will do more testing and report back, thank you \*-\* – Sam Apr 03 '15 at 14:00

Brine · Answer 2 · 2015-04-03T13:22:11.440

-1

As Cayce said, this should work:

var rows = gridElement.all(by.css("div:first-child"));

edited Apr 03 '15 at 13:22

answered Apr 03 '15 at 12:44

Brine

My use case is not as simple as the example I gave. Using just 'div' means I will get all child divs, just just direct children. This would work fine if there were no more divs inside the grid rows but there are. It becomes the equivalent of ".grid div" instead of ".grid > div" which is what I need – Sam Apr 03 '15 at 12:52
Ahhh... got ya. I updated my answer to get only the first children. – Brine Apr 03 '15 at 13:23
Also, if you're looking for a way to handle repeated data (eg. tables), this might interest you: http://stackoverflow.com/questions/25878496/how-to-handle-table-data-in-protractor – Brine Apr 03 '15 at 13:30

2 Answers2