CODEWITHSUNDEEP
automated-testsselectore2e-testingweb-testingtestcafe
Brine
Brine

Reputation: 3731

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?

Upvotes: 2

Views: 285

Answers (2)

aleks-pro
aleks-pro

Reputation: 1669

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);

Upvotes: 6

Brine
Brine

Reputation: 3731

Okay, I found a way. This is a bit more brittle than I'd like but it works. Please do add an answer if there's a better solution!

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

await t.click(checkboxToClick);

Upvotes: 4

Related Questions