Error - within(tableRows.nth(i)).getAllByRole('cell') - is throwing error - TestingLibraryElementError: Unable to find an accessible element with the role "cell"

[msabya]

I am trying to access rows and columns in a table with use of within.

When i am trying to look for columns in a row with within(row.getAllByRole('cell') i am getting the following error
TestingLibraryElementError: Unable to find an accessible element with the role "cell"

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the hidden option to true. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole

at Object.getElementError (:3392:19) at :15128:27 at Object.getAllByRole (:15180:23) at Object.queryAll (:6463:62) at InjectedScript._queryEngineAll (:4251:49) at InjectedScript.querySelectorAll (:4238:30) at eval (eval at evaluate (:191:30), :5:23) at UtilityScript.evaluate (:193:17) at UtilityScript. (:1:44)

My code snippet here for reference
const tableRows = await actor.attemptsTo(FetchAllRowsByTable.byId('paged-table-IFVacationAuctionSummaries'))
let noOfRows = await tableRows.count();

for (let i = 0; i < noOfRows; i++) {
  let cellValues = await within(tableRows.nth(i)).getAllByRole('cell')
  let noOfCells = await within(tableRows.nth(i)).getAllByRole('cell').count()
  console.log("No of cells " + noOfCells);
}

---

export class FetchAllRowsByTable extends Action {

constructor(tableId) {
super();
this.tableId = tableId;
}

async performAs(actor) {
const rows = await BrowseTheWeb.as(actor).getAllRowsByTableId(this.tableId);
return rows;
}

static byId(tableId) {
return new FetchAllRowsByTable(tableId);
}
}

`export class BrowseTheWeb extends Ability {

constructor(page, screen, within) {
    super();
    this.page = page;
    this.screen = screen;
    this.within = within
}

static using(page, screen, within) {
    return new BrowseTheWeb(page, screen, within);
}

static as(actor) {
    return actor.withAbilityTo(this);
}

async goto(url) {
    return this.page.goto(url);
}

async queryByTextClick(id) {
    return await this.screen.queryByText(id).click();
}

async getAllRowsByTableId(id){
const table = await this.screen.queryByTestId(id)
const rowsByGroup = this.within(table).getAllByRole('rowgroup')
return await this.within(rowsByGroup.nth(1)).getAllByRole('row')
}
}`

[jrolfs]

Did you check out the documentation link provided by the error message?

There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the hidden option to true. Learn more about this here: testing-library.com/docs/dom-testing-library/api-queries#byrole

It has a ton of information about accessible roles, including a link to each element's implicit role(s).

Default roles are taken into consideration e.g. has the button role without explicitly setting the role attribute. Here you can see 👉🏻 a table of HTML elements with their default and desired roles 👈🏻.

Here's a link directly to the td entry from that list. Does the parent <table> element have role="table"?

[msabya]

Thank ..there was another issue .. one of the rows in the above table was created to represent a page load event for pagination and that last row does not have any columns included so it was throwing/complaining an error when it reached the last row.

I am able to resolve it by ignoring the last row or iterating through tablelength-1.
I will close this defect.