Finding direct children in a geb module

levsa Published at Dev

levsa

I'm trying to write geb modules to handle rows and columns of div tags as follows:

 <div class="container">
   <div class="row">
     <div class="col-xs-12">...</div>
     <div class="col-xs-12">...</div>
   </div>
   <div class="row">
     ...
       <div class="row">...</div>
     ...
   </div>
</div>

And have the geb modules:

class GridRowModule extends Module {
    static content = {
        columns { $("div", 'class': startsWith('col-')) }
    }
}

class GridLayoutModule extends Module {
    static content = {
        rows { index -> moduleList GridRowModule, $(".row"), index }
    }
}

class ContainerModule extends Module {
    static content = {
        container { module GridLayoutModule, $(".container") }
    }

}

But the nagivator for rows $(".row") finds all rows recursively. How can I limit the search to one level only?

Using the css selector, I'd like to write $(".container > .row") but then I break the general module approach. Can I do this from within the module somehow? A way to access the parent css selector?

Or is there any other way in geb to do this easily?

levsa

children(".row") instead of $(".row") solved my problem! So the solution would be:

class GridRowModule extends Module {
    static content = {
        columns { children("div", 'class': startsWith('col-')) }
    }
}

class GridLayoutModule extends Module {
    static content = {
        rows { index -> moduleList GridRowModule, children(".row"), index }
    }
}

class ContainerModule extends Module {
    static content = {
        container { module GridLayoutModule, $(".container") }
    }

}

Collected from the Internet

Please contact [email protected] to delete if infringement.