FindAll, getAll, queryAll do not return arrays when used on table elements #381
Description
Describe the bug
I have a similar HTML:
<html>
<head>
<body>
<div>
<div>
<div>
<div>
<table data-test-id="table-global-top">
<tbody>
<tr>
<tr>
<tr>
<tr>
<td data-test-id="row-points">
</tr>
...
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</head>
</html>
Essentially, I have a number of "row-points" elements and when I am trying to get, find or query all of them, the length of my array is always 0 (it is not returned at all). If I try to use a normal query, like findByTestId or getByText, the library says that more than 1 element is found.
To Reproduce
Steps to reproduce the behavior:
- Use the html above.
- Use the next piece of code to get the rows elements:
findRowByTablePosition = rowPosition => screen.findAllByTestId('row-points')[rowPosition];
console.log(await this.findRowByTablePosition(1).textContent);
Expected behavior
The text of the 2nd element in the array is logged in the console.
Actual behavior
1) TypeError: Cannot read property 'textContent' of undefined
Desktop (please complete the following information):
- OS: macOS
- Browser: Chrome
- Version 109.0.5414.87
EDIT:
Apparently, the problem is evident also within a helper method in a Page class, like this one:
async waitForTableCalculation(counter = 0) {
if (counter >= 100 || (await this.someElement.visible)) {
console.log(await findRowByTablePosition(1).textContent);
if ((await this.someOtherElement.textContent) === '18') {
return;
}
}
The console.log line here returns 1) TypeError: Cannot read property 'textContent' of undefined. However, it returns the same error with a Selector that is proved working when defined in the constructor of this Page (BoardPage in this case) and used in the test code, as normal. Like this:
this.boardRows = screen.findAllByTestId('row-position');
...
await t
.typeText(BoardPage.searchField, 'random String')
.pressKey('enter')
.expect(BoardPage.boardRows.count)
.eql(1)