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

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

• javascript
• angularjs
• protractor

• have you tried div without > ??? – Cayce K Commented Apr 3, 2015 at 12:17
• Yes, that would select all child divs which is not what I am going for, I just want direct descendants – Sam Commented Apr 3, 2015 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 Commented Apr 3, 2015 at 13:09
• I did try various .children() methods and they didn't seem to be available – Sam Commented Apr 3, 2015 at 14:49

2 Answers 2

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

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

As Cayce said, this should work:

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