testing-library / testcafe-testing-library

:ox: Simple and complete custom Selectors for Testcafe that encourage good testing practices.
http://npm.im/@testing-library/testcafe
MIT License
71 stars 15 forks source link

FindAll, getAll, queryAll do not return arrays when used on table elements #381

Open PhilipManolovTestimony opened 1 year ago

PhilipManolovTestimony commented 1 year ago

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:

  1. Use the html above.
  2. 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):

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)