如何使用Puppeteer遍历表格定位Username为test的行悬停触发删除图标？

核心实现逻辑 #

整个流程完全匹配真实用户的浏览器交互路径，不需要冗余的自定义事件模拟：

• 遍历表格所有数据行，匹配Username列文本为test的目标行
• 通过真实鼠标悬停触发行级CSS状态，让默认隐藏的删除图标正常显示
• 定位目标行内的删除按钮，完成点击操作

关键实现代码 #

const puppeteer = require('puppeteer');

async function triggerDeleteAction(targetUsername = 'test') {
  // 启动浏览器，调试阶段可将headless设为false直观查看交互过程
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();

  // 替换为实际业务中表格所在页面的地址
  await page.goto('业务表格页面地址');

  // 1. 获取表格body区域下的所有数据行
  const tableRows = await page.$$('table tbody tr');
  let matchedRow = null;

  // 2. 逐行匹配Username列值
  for (const row of tableRows) {
    // 按列顺序取第二列（Username列）的单元格文本
    const usernameCol = await row.$('td:nth-child(2)');
    const colText = await page.evaluate(
      (el) => el.textContent.trim(),
      usernameCol
    );
    if (colText === targetUsername) {
      matchedRow = row;
      break;
    }
  }

  if (!matchedRow) {
    console.log(`未定位到Username为${targetUsername}的目标行`);
    await browser.close();
    return;
  }

  // 3. 对目标行执行真实悬停，触发CSS中绑定的行hover显示逻辑
  await matchedRow.hover();

  // 4. 等待Option列下的删除图标完全可见（替换为项目实际的删除图标选择器）
  const deleteIconSelector = 'td:nth-child(3) .btn-delete';
  const deleteBtn = await matchedRow.waitForSelector(deleteIconSelector, {
    visible: true, // 自动过滤掉隐藏状态的元素
    timeout: 3000
  });

  // 5. 执行删除按钮点击
  await deleteBtn.click();

  await browser.close();
}

// 执行针对test用户的删除操作
triggerDeleteAction('test');

常见踩坑点说明 #

• 不要手动模拟mouseover、mouseenter这类JS事件来触发按钮显示：这类事件不会触发CSS原生的:hover伪类状态，会导致隐藏的删除图标始终无法显示。必须使用Puppeteer原生的hover()方法，模拟真实鼠标移动到元素中心的交互，才能正确触发CSS的显示逻辑。
• 列定位不要硬编码列顺序：如果业务侧表格支持调整列的展示顺序，需要先读取表头的列文本，匹配到“Username”“Option”对应的列索引，再按索引定位单元格，避免列顺序变更导致定位失效。
• 必须加可见性等待：部分场景下删除图标是通过opacity: 0、pointer-events: none做的隐藏，不等待按钮状态直接点击会导致操作失效，通过waitForSelector的visible: true参数可以确保只操作可交互的可见元素。

内容的提问来源于stack exchange，提问作者Rupesh