I am unable to figure out how to capture this grid and then go through the rows in it to click on the row that has the data I need. Any help is much appreciated. Attaching a screen shot of the HTML.
I already tried to use the div with table, div with grid but I am getting error, that is also attached.
//To locate table body
WebElement TableStudentSearchResultsPostCertify = driver.findElement(By.className(‘flex-fill’))
WebElement TableStudentSearchResultsPostCertifyGrid = TableStudentSearchResultsPostCertify.findElement(By.className(‘ReactVirtualized__Table table’))
1 Like
That’s hard to follow when you use a dark theme. However…
I think your CSS selector might be broken. I see a backslash character in there - try removing it:
Russ, thanks for the response.
I am confused about that too… here is the code that I was using to get the element
WebElement TableStudentSearchResultsPostCertify = driver.findElement(By.className(‘flex-fill’))
WebElement TableStudentSearchResultsPostCertifyGrid = TableStudentSearchResultsPostCertify.findElement(By.className(‘ReactVirtualized__Table table’))
As you can see I am using className to find that element, but in the error it is showing that it is looking using css selector. So not sure how the “/” got in.
I may have screwed up - you’re using By.className - perhaps it’s escaping the space?
I never use that stuff - all my selectors are CSS/JavaScript (you know, that stuff the web is built with 
)
@Russ_Thomas 
I know I know… className is right there and only one… so used that.
The css selector worked. Thanks.
I also created an object in object repository using the grid properties, aria-label, class. And used the Click method and that worked by clicking the grid, which means it was able to identify it. So that’s good.
But now trying to figure out how to go through the rows in the grid
There are plenty of examples in the forum - it all depends on how you intend to write the code. Most of them use WebUI and/or Selenium WebElements (like I said, I’d use JavaScript).
http://forum.katalon.com/search?expanded=true&q=loop%20table%20
Thanks Russ. I have dealt with tables before so have the logic for that. But with this particular element which is a grid, there is no tbody, tr etc for me to get a rows in the table. I see that the react virtualized grid has a property rowCount but that is returned as null, even though there are rows in the grid. So trying to figure out how else to get the number of rows and then have to figure out how to click the row I need.
Okay, let’s go the Web API route using JavaScript.
From your screenshot of the HTML in your first post, it looks as though the <div> element with class="ReactVirtualized__Grid__innerScrollContainer" is the effective, notional “table” or “tbody” element.
Working with that, this code will return the number of row elements (divs with class=“ReactVirtualized__Table__row”). Check this in your browser console:
document.querySelectorAll(".ReactVirtualized__Grid__innerScrollContainer .ReactVirtualized__Table__row").length
You should get a number returned - based on your screenshot, 3.
Note: If there is more than one grid on this page, we will need to improve that selector.
I have not seen the logic you use to iterate over <tr> elements - I expect it is WebElement based. You can use the count above (3) to limit the same FOR loop but substituting a div element for each row (tr).
Or…
You can iterate them using JavaScript and web APIs as I mentioned.
1 Like
I got 3 back. Thanks Russ! Will see how I can use this to go through the rows and post again.
1 Like
Just to complete this thread…
If you want to do this in JavaScript, the following code is a demonstration using the Katalon Documentation website - specifically, this page: https://docs.katalon.com/katalon-studio/docs/webui-click.htmlhttps://docs.katalon.com/katalon-studio/docs/webui-click.html
When you go to that page in your browser, you will see the table of contents (TOC) displayed down the left of the page:
The docs server code uses <ul> and <li> elements to create the TOC:
For the purposes outlined above, <ul> can be seen as a notional table element and the <li> elements as notional rows or <tr> elements.
The following JavaScript code can be pasted into the browser console to dump the contents of each <li> element using a forEach() method:
rows = document.querySelectorAll("ul.nav li")
rows.forEach(function(elem) {
console.log(elem.nodeName + " " + elem.innerText);
})
Finally, we can turn that JavaScript into Groovy/JavaScript and do the same thing in a Test Case (assuming you have opened a browser to the correct URL):
String js = '''
rows = document.querySelectorAll("ul.nav li")
rows.forEach(function(elem) {
console.log(elem.nodeName + " " + elem.innerText);
})
'''
WebUI.executeJavaScript(js, null)
Got it 
Here is what I used to get the number of rows and iterate thru them… I tried it before posting the first time, but must have made some mistake and it did not work. So started using the grid and table. But this time around, it did. I have more code to add in the For Loop, but for just testing if objects are identified this is the code I am using. Just needed your guidance, I think, Russ! Thanks again.
WebDriver driver = DriverFactory.getWebDriver()
WebElement TableStudentSearchResultsPostCertifyGrid = driver.findElement(By.className(“ReactVirtualized__Grid__innerScrollContainer”))
List TableStudentSearchResultsPostCertifyGridRows = TableStudentSearchResultsPostCertifyGrid.findElements(By.className(“ReactVirtualized__Table__row”))
int rows_count = TableStudentSearchResultsPostCertifyGridRows.size()
println (rows_count)
‘Loop will execute till the last row of the grid’
for (int row = 0; row < rows_count; row++) {
String celltextValue = TableStudentSearchResultsPostCertifyGridRows.get(row).getText()
println(celltextValue)
TableStudentSearchResultsPostCertifyGridRows.get(row).click()
}
