Puppeteer：点击Make Admin后如何等待勾选标记出现？

我有如下结构的HTML表格：

<div class="s-table-container">
  <table class="s-table">
    <thead>
      <tr>
        <th>Username</th>
        <th>is admin</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>New User</td>
        <td>✓</td>
        <td>Make Admin</td>
      </tr>
      <tr>
        <td>Old User</td>
        <td></td>
        <td>Make Admin</td>
      </tr>
    </tbody>
  </table>
</div>

点击「Make Admin」按钮后，我想等待对应行的勾选标记（✓）出现。我已通过以下代码实现查找勾选标记：

const checkmarkText = await page.$eval(`text/${new_user}`, e=>{return e.nextSibling.innerHTML;});

但不清楚如何使用.waitForSelector()来等待该勾选标记出现，相关简化HTML结构如下：

<tr><td>New User</td><td>✓</td><td>...</td></tr>

方法一：用XPath定位并等待 #

直接通过XPath精准匹配目标用户所在行的「is admin」列单元格，直到其包含✓：

// new_user为目标用户名，比如"Old User"
await page.waitForXPath(`//td[text()="${new_user}"]/following-sibling::td[1][text()="✓"]`);

逻辑说明：

• //td[text()="${new_user}"]：定位到用户名对应的单元格
• /following-sibling::td[1]：选中该单元格的第一个兄弟单元格（即「is admin」列）
• [text()="✓"]：筛选出文本为✓的单元格，等待它出现

方法二：CSS选择器结合Playwright自定义语法 #

利用Playwright支持的:has()和:has-text()自定义选择器，直接等待目标行的对应单元格：

await page.waitForSelector(`tr:has(td:has-text("${new_user}")) td:nth-child(2):has-text("✓")`);

注：需确保你的Playwright版本支持这些自定义CSS选择器（较新版本均支持）

方法三：自定义等待函数 #

如果需要更灵活的逻辑，用page.waitForFunction()实现：

await page.waitForFunction((username) => {
  const userTd = document.querySelector(`td:contains("${username}")`);
  if (!userTd) return false;
  const adminTd = userTd.nextElementSibling;
  return adminTd?.textContent.trim() === "✓";
}, new_user);

这个函数会持续执行，直到目标行的勾选标记出现后返回true。

内容的提问来源于stack exchange，提问作者lmat - Reinstate Monica