Search code examples
automated-testsselectore2e-testingweb-testingtestcafe

How to click an element based on another element's text


Given a multiple row user table...

<tr>
  <td class="cell--select">
    <input class="choice__input" type="checkbox">
  </td>
  <td>
    <div class="user">
      <ul class="user-info">
        <li class="name">Jane Doe</li>
      </ul>
    </div>
  </td>
</tr><tr>
...

I want to select the row with a given username and click the checkbox on that row. I've tried a number of ways to do this including withText and/or parent() and/or find() etc... but nothing works.

Typically, I would grab all the li.names, check for the correct name and use the index to check the correct checkbox but I also can't figure out a way to accomplish that.

Stuck... ideas?


Solution

  • There is a bit simpler way to achieve the desired behavior. You can use the withText method to identify a table row:

    const checkboxToClick = await Selector('tr')
      .withText('Jane Doe')
      .find(".choice__input");
    
    await t.click(checkboxToClick);