Chrome控制台JS自动化批量添加设备如何等待单条完成后再迭代

问题原因 #

你遇到的问题本质是forEach为同步遍历逻辑，不会等待异步的setTimeout执行完成就会触发下一次循环，所有设备的搜索、点击操作会在极短时间内集中触发，输入框值会被后续遍历的设备名覆盖，异步操作互相冲突，最终只有最后一条设备的操作能完整执行。

修复思路 #

将单条设备的添加逻辑封装为返回Promise的异步函数，通过async/await控制执行顺序，确保前一条设备完全添加完成后再执行下一条的操作。同时需要注意：不要提前缓存搜索结果列表、添加按钮这类会随页面内容变化的DOM元素，每次操作前重新获取最新的DOM节点，避免操作过时元素。

可直接运行的完整代码 #

// 请在此处填入你需要添加的所有设备名
const deviceList = ["XXX-MXXXX1", "XXX-MXXXX2", "XXX-MXXXX3"];

// 延迟工具函数
const sleep = (time) => new Promise(resolve => setTimeout(resolve, time));

// 单条设备添加逻辑，返回Promise
async function addSingleDevice(deviceName) {
  // 每次操作前重新获取最新DOM元素，避免缓存失效
  const search = document.getElementById(
    "CustomControl_ml_ms_m_si_m_tic_pc_xAssignedResources_m_computerSelector_WrappedSelector_ml_ms_m_si_m_tic_pc_xAssignedResources_m_computerSelector_WrappedSelector_mainGrid_ctl00_SearchBox"
  );
  const addToList = document.querySelector(".scbMiddleCell input:nth-child(2)");

  // 填入设备名触发搜索
  search.value = deviceName;
  const ev = document.createEvent("Event");
  ev.initEvent("keyup");
  ev.which = ev.keyCode = 13;
  search.dispatchEvent(ev);

  // 等待搜索结果加载完成
  await sleep(1000);

  // 搜索完成后再获取最新的第一条结果
  const primeraCelda = document.querySelector(".scgc");
  if (!primeraCelda) {
    console.log(`设备${deviceName}未搜索到，跳过`);
    return;
  }
  primeraCelda.click();

  // 等待选中状态生效
  await sleep(500);

  // 点击添加到列表
  addToList.click();
  
  // 等待添加完成，避免下一次操作冲突
  await sleep(500);
  console.log(`设备${deviceName}添加完成`);
}

// 批量执行入口
async function batchAddDevices() {
  for (let i = 0; i < deviceList.length; i++) {
    await addSingleDevice(deviceList[i]);
  }
  console.log('所有设备添加完成');
}

// 启动批量添加
batchAddDevices();

可调整项 #

• 如果站点响应速度慢，可以适当调大sleep的参数，单位为毫秒
• 运行时打开控制台可以看到每一条设备的添加进度，未搜索到的设备会自动跳过

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