Table element assertion

Question

I am trying to assert whether 11223 is displayed on the table or not.

The elements are as below:

<div class="page-wrapper table-responsive" id="shipping-option" xpath="1">
<table class="table table-bordered">
   <tbody>
      <tr>
         <th></th>
         <th class="checkUncheck">
            <span title="" data-toggle="tooltip" data-placement="top" data-original-title="Check / Uncheck All">
            <input type="checkbox" id="checkAll" class="icheckbox_square-green form-control">
            </span>
         </th>
         <th>
            Date/ID
         </th>
         <th>
            Name(pet name)
         </th>
         <th>
            Country/State
         </th>
         <th>
            Designation
         </th>
      </tr>
      <tr class="rowclick" style="cursor:pointer">
         <td>
            1
         </td>
         <td class="shipmentCheckbox">
            <input class="GroupChb" id="61577" name="item.isSelected" type="checkbox" value="true"><input name="item.isSelected" type="hidden" value="false">
         </td>
         <td>
            06-01-2021
            <br>
            <a href="http://www.google.dk" target="popup" onclick="window.open('http://www.google.dk'),'popup','width=600,height =600'); return false;">
            11223
            </a>
         </td>
         <td>
            Jonny
            <br>
            <span class="sub">
            Joe
            </span>
         </td>
         <td>
            US <br>
            <span class="sub">California</span>
         </td>
         <td>
            Software Quality Analyst
            <br>
            <span class="sub">
            QA
            </span>
         </td>
      </tr>
      <tr>
         <td colspan="10"></td>
      </tr>
   </tbody>
</table>
<div>

This is not working. I am getting the following error:

-contains tr.rowclick, 11223

Timed out retrying: Expected to find content: '11223' within the element: <table.table.table-bordered> and with the selector: 'tr.rowclick' but never did. cypress/integration/History.js:55:65 53 |

    cy.get('#SearchString').type('11223')
  54 |                 cy.get('#filter').click()
> 55 |                 cy.get('.page-wrapper').find('.table-bordered').contains('tr.rowclick','11223')
     |                                                                 ^
  56 |                
  57 |             })
  58 |         })

Answer 1

The <td> doesn't have rowclick class, <tr> has it.

This is my preferred command to check if '11223' is in a cell:

cy.contains('tr.rowclick td', '11223')

Note that all the <td> child elements (like <a>) are searched.

This is kind of a minimalist approach I like because changes to the page structure can break test (personal preference).