Angular JS, Protractor locator, get direct childre

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

Answer 1

As Cayce said, this should work:

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

Answer 2

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

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