Any good ways to select rows in a dynamic table?

Question

I have a table that's displayed on a webpage which can contain anywhere from 1 - 10 rows, and would like to construct a page object that can select an element from each row and create a selector for each, using webdriverio. Unfortunately, I'm new to building testing tools and the issue has me stumped; I've tried using document.querySelectorAll to count each row but got stuck trying to figure out how to create a unique selector for each and now I'm out of ideas. Has anybody resolved a similar issue before?

Answer 1

You can use nth-child CSS selector to select different elements from a list, eg:

this.Given(/^click "([^"]*)"nth element from "([^"]*)" table$/, (num, table) => {
    browser.click(table + ':nth-child(' + num + ')';
}

not sure about page-objects as I don't use them much but it can probably be adapted to that.