Get JQuery value without needing then or each

[WernerRaath]

I've asked this on Stack Overflow as well.

I need to get the Cypress.Chainable<JQuery<HTMLElement>> of the cell of a table using the column header and another cell's value in the same row.

Here's a working example JQuery TS Fiddle: https://jsfiddle.net/6w1r7ha9/

My current implementation looks as follows:

static findCellByRowTextColumnHeaderText(
    rowText: string,
    columnName: string,
) {
  const row = cy.get(`tr:contains(${rowText})`);
  const column = cy.get(`th:contains(${columnName})`)
  const columnIndex = ???
  return row.find(`td:eq(${columnIndex})`)
}

The only example I've seen is this https://stackoverflow.com/a/70686525/1321908, but the following doesn't work:

const columns = cy.get('th')
let columnIndex = -1
columns.each((el, index) => {
  if (el.text().includes(columnName) {
    columnIndex = index
  }
  cy.log('columnIndex', columnIndex) // Outputs 2 as expected
})
cy.log('finalColumnIndex', columnIndex) // Outputs -1

Using should etc wouldn't work for my use case, but its could be a good place to look. How to unpack it without should, I have no idea. I'm using this answer to guide my thinking in this regard.

[jjhelguero]

Based on your working example, you will need to get the headers first, map out the text, then find the index of the column (I've chosen 'Col B'). Afterwards you will find the row containing the other cell value, then get all the cells in row and use .eq() with the column index found earlier.

// get headers, map text, filter to Col B index
cy.get("th")
  .then(($headers) => Cypress._.map($headers, "innerText"))
  .then(cy.log)
  .invoke("indexOf", "Col B")
  .then((headerIndex) => {
    // find row containing Val A
    cy.contains("tbody tr", "Val A")
      .find("td")
      // get cell containing Val B
      .eq(headerIndex)
      .should("have.text", "Val B");
  });

Here is the example.