如何根据另一个元素的文本单击一个元素答案

【问题标题】：How to click an element based on another element's text如何根据另一个元素的文本单击一个元素
【发布时间】：2019-06-12 20:52:05
【问题描述】：

给定一个多行用户表...

<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>
...

我想选择具有给定用户名的行并单击该行上的复选框。我已经尝试了多种方法来做到这一点，包括withText 和/或parent() 和/或find() 等......但没有任何效果。

通常，我会抓取所有li.names，检查正确的名称并使用索引来检查正确的复选框，但我也想不出办法来实现这一点。

卡住了……想法？

【问题讨论】：

标签： automated-tests selector e2e-testing web-testing testcafe

【解决方案1】：

有一种更简单的方法可以实现所需的行为。您可以使用withText 方法来识别表格行：

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

await t.click(checkboxToClick);

【讨论】：

【解决方案2】：

好的，我找到了方法。这比我想要的更脆弱，但它有效。如果有更好的解决方案，请做添加答案！

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

await t.click(checkboxToClick);

【讨论】：