Determine the number of rows of a table with Nightwatch / Selenium using xPath

Question

I have a table - a React Table which is a React table component that uses it's own mark up, so not a HTML table

I would like to write a Selenium / Nightwatch test to see how many rows the table has ... if the rows are under 10 the test passes, if it's over 10 it fails

I have an xPath which finds all of the rows

`.//div[contains(@class, 'open-returns')]//div[contains(@class, 'rt-tr-group')]`

You can see in this screenshot that xPath returns 7 rows in Chrome Dev Tools (search bar at the bottom of the screen shot), which is great!

I tried something like this in the xPath to only return if there's less than 10 but returns 0 results in Chrome

`.//div[contains(@class, 'open-returns')]//div[contains(@class, 'rt-tr-group') <10]`

So in the test itself this is what I have which passes as it finds the element ...

const TableRows = `.//div[contains(@class, 'open-returns')]//div[contains(@class, 'rt-tr-group')]`
return client.useXpath()
.waitForElementVisible(TableRows);

Is there a way to check the number of items returns in the test or a solution with xPath? Or if I can be aimed at some documentation that would be very useful! Thank you

Answer 1

Selects the 10th row. If successfull your test should fail:

.//div[contains(@class, 'open-returns')]//div[contains(@class, 'rt-tr-group')][10]

This is short for:

.//div[contains(@class, 'open-returns')]//div[contains(@class, 'rt-tr-group')][position()=10]

if you can be sure that the class is always exactly 'rt-tr-group', better would be to just use @class='rt-tr-group' like this:

.//div[contains(@class, 'open-returns')]//div[@class='rt-tr-group'][10]