选择正确的行并单击复选框

Question

我是剧作家的新手，不知道如何处理这个问题。我有一个 table 数据，每行的第一列都有一个复选框。我希望能够 select 正确的行来单击复选框。我不确定的是如何获得该行。

我的table:

|    |  ID   |  Name        | Phone
| [] | 3745  | Frank Smith  | 485-555-9394
| [] | 9394  | Joe Johnson  | 384-555-2332

在HTML中：

<table>
  <thead>
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Phone</th>
  </tr>
  </thead>
  <tbody>
  <tr role="row" class="odd">
    <td><input type="checkbox" name="personid"></td>
    <td>3745</td>
    <td>Frank Smith</td>
    <td>485-555-9394</td>
  </tr>
  <tr role="row" class="even">
    <td><input type="checkbox" name="personid"></td>
    <td>9394</td>
    <td>Joe Johnson</td>
    <td>384-555-2332</td>
  </tr>
  </tbody>
</table>

现在，我想 select 与用户 ID 9394 关联的复选框。

我原来的解决方案是（在nodejs中）：

page.locator('table tbody tr': {hasText: '9394'}.locator('td').nth(0).locator('input').check();

但是，正如您在上面的示例中看到的那样，它将 select 编号为 phone 且以 9394 结尾的行，否则会给我一个错误，因为它返回了多行。

我的另一个想法是做类似的事情：

page.locator('table tbody tr td:nth(1)', {hasText: '9394'}). ???

我只是不确定如何返回到行中的上一个 td input 以单击复选框。

Answer 1

除了使用 hasText，您还可以定义元素必须包含的 sub-locator，并使用 has.

引用它

假设id总是在第二列，可以使用如下代码：

const idLocator = page.locator('td:nth-child(2)', { hasText: '9394' });
const checkbox = page.locator('table tbody tr', { has: idLocator }).locator('input[type=checkbox]');
await checkbox.check();

选择正确的行并单击复选框

selecting correct row and click checkbox

playwright