How can I find the content of a cell using Cypress?

Question

I have a column in a table that has testid = data-testid="data-table-cell-code.id. In this column I would like to find "0EF", then click on the row containing "0EF".

Here is what I tried:

cy.get('[data-testid="data-table-cell-code.id"]').should("have.value","0EF").click(); 

cy.get('[data-testid="data-table-cell-code.id"]').contains('0EF').click(); 

HTML sample

<tr
  data-testid="data-table-row"
  role="row"
  class="css-1ra2sqo"
  style="display: flex; flex: 1 0 auto; min-width: 0px"
>
  <td
    role="cell"
    class="css-1t906vg flex-grow-0 text-left"
    data-testid="data-table-cell-expander"
    style="box-sizing: border-box; flex: 30 0 auto; min-width: 0px; width: 30px"
  ></td>
  <td
    role="cell"
    class="css-1t906vg flex-grow-0 text-left"
    data-testid="data-table-cell-checkbox"
    style="box-sizing: border-box; flex: 30 0 auto; min-width: 0px; width: 30px"
  >
    <div class="flex h-full items-center justify-center">
      <input type="checkbox" readonly="" data-testid="row-checkbox" />
    </div>
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-code"
    style="
      box-sizing: border-box;
      flex: 126 0 auto;
      min-width: 0px;
      width: 126px;
    "
  >
    CBL-262
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-code.id"
    style="
      box-sizing: border-box;
      flex: 134 0 auto;
      min-width: 0px;
      width: 134px;
    "
  >
    0EF
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-name"
    style="
      box-sizing: border-box;
      flex: 150 0 auto;
      min-width: 0px;
      width: 150px;
    "
  >
    rev
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-priceType"
    style="box-sizing: border-box; flex: 80 0 auto; min-width: 0px; width: 80px"
  >
    Static
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-price"
    style="
      box-sizing: border-box;
      flex: 120 0 auto;
      min-width: 0px;
      width: 120px;
    "
  ></td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-price"
    style="
      box-sizing: border-box;
      flex: 125 0 auto;
      min-width: 0px;
      width: 125px;
    "
  ></td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-price"
    style="
      box-sizing: border-box;
      flex: 112 0 auto;
      min-width: 0px;
      width: 112px;
    "
  >
    <div class="flex flex-grow justify-between" data-type="currency">
      <span>$</span><span>22</span>
    </div>
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-at"
    style="
      box-sizing: border-box;
      flex: 150 0 auto;
      min-width: 0px;
      width: 150px;
    "
  >
    14/10/2022 1:48:01 PM
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-subGroupCount"
    style="
      box-sizing: border-box;
      flex: 140 0 auto;
      min-width: 0px;
      width: 140px;
    "
  >
    0
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-value"
    style="
      box-sizing: border-box;
      flex: 128 0 auto;
      min-width: 0px;
      width: 128px;
    "
  >
    <div class="css-1mwn02k"><span class="css-0"></span></div>
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-marketCount"
    style="
      box-sizing: border-box;
      flex: 100 0 auto;
      min-width: 0px;
      width: 100px;
    "
  >
    0
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-description"
    style="box-sizing: border-box; flex: 25 0 auto; min-width: 0px; width: 25px"
  >
    <span
      aria-haspopup="true"
      class="bp4-popover2-target grid place-content-center"
      ><svg
        fill="none"
        height="16"
        width="17"
        xmlns="http://www.w3.org/2000/svg"
        class=""
        tabindex="0"
      >
        <path
          d="M2.08 8.25a.57.57 0 0 1-.58-.58.57.57 0 0 1 .58-.59h12.84a.57.57 0 0 1 .58.59.57.57 0 0 1-.58.58H2.08Zm0 4.08a.57.57 0 0 1-.58-.58.57.57 0 0 1 .58-.58h8.17a.57.57 0 0 1 .58.58.57.57 0 0 1-.58.58H2.08Zm0-8.16a.57.57 0 0 1-.58-.59.57.57 0 0 1 .58-.58h12.84a.57.57 0 0 1 .58.58.57.57 0 0 1-.58.59H2.08Z"
          fill="#5c7080"
        ></path></svg
    ></span>
  </td>
</tr>
 
<td role="cell" class="text-left css-1t906vg" data-testid="data-table-cell-code.id" style="box-sizing: border-box; flex: 134 0 auto; min-width: 0px; width: 134px;">0EF</td>

Answer 1

Issue was resolved by doing

cy.contains('0EF').click();