Get table row and check if it contains some specific values

[Tockra]

Hello,

I have a TR which following content in my application:

<tr class="MuiTableRow-root css-1j0wbsx-MuiTableRow-root">
   <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-15n5wvk-MuiTableCell-root" width="25%">
      <a class="MuiBox-root css-xpe1lw" href="/app/1">
         <div class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-1hft8mp-MuiAvatar-root">AK</div>
         <div class="MuiBox-root css-d0uhtl">
            <h6 class="MuiTypography-root MuiTypography-subtitle2 css-1h3ffzu-MuiTypography-root">INVOICE_2</h6>
            <p class="MuiTypography-root MuiTypography-body2 css-1xsg5cg-MuiTypography-root">Anderer Kunde</p>
         </div>
      </a>
   </td>
   <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-15n5wvk-MuiTableCell-root">
      <p class="MuiTypography-root MuiTypography-body2 css-1utcdgt-MuiTypography-root">1 Pos.</p>
   </td>
   <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-15n5wvk-MuiTableCell-root">
      <p class="MuiTypography-root MuiTypography-body2 css-1utcdgt-MuiTypography-root">26.78 $</p>
   </td>
   <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-15n5wvk-MuiTableCell-root">
      <div class="MuiBox-root css-j7qwjs">
         <h6 class="MuiTypography-root MuiTypography-subtitle2 css-1ngu4zh-MuiTypography-root">Erstellt am:</h6>
         <p class="MuiTypography-root MuiTypography-body2 css-1xsg5cg-MuiTypography-root">13.04.2023</p>
      </div>
   </td>
   <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-15n5wvk-MuiTableCell-root">
      <div class="MuiBox-root css-j7qwjs">
         <h6 class="MuiTypography-root MuiTypography-subtitle2 css-1ngu4zh-MuiTypography-root">Fällig zum:</h6>
         <p class="MuiTypography-root MuiTypography-body2 css-1xsg5cg-MuiTypography-root">30.04.2023</p>
      </div>
   </td>
   <td class="MuiTableCell-root MuiTableCell-body MuiTableCell-alignRight MuiTableCell-sizeMedium css-3v7b63-MuiTableCell-root">
      <a class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-gpz118-MuiButtonBase-root-MuiIconButton-root" tabindex="0" href="/app/INVOICE_2">
         <svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall css-ptiqhd-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowRightIcon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
               <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
            </svg>
         </svg>
      </a>
   </td>
</tr>

This row contains the information "Cooler Kunde", "1 Pos." and "26.78 $".
But the following test works get does not fail:

cy.get('tr')
            .should('contain', 'Cooler Kunde')
            .and('contain', '2 Pos.')
            .and('contain', '26.78 $');

I would expect that it failes because there is no single line with all 3 information.
But it works. I think it is because there is a different 'tr' containing '2 Pos.'.

How do I need to change my test?

T

[Tockra]

Okay I found following solution. But I don't know if it is the best one:

cy.get('tr').contains("26.78 $").parent().parent().contains("2 Pos.").parent().parent().contains("Cooler Kunde");

This only works if "26.78 $" is unique and there is no with the same price but different Pos count and not containing "Cooler Kunde".