如何通过浏览器控制台填充网页文本框？（Angular元素场景）

问题背景 #

仅熟悉Python和VBA，对HTML一无所知，需将Excel数据自动填充到Angular开发的网页表单。计划通过VBA生成脚本在浏览器控制台执行实现半自动填充，但目标文本框包含#shadow-root，已定位到带NAME标签的输入元素但脚本无效；曾用Chrome录制功能实现，不想依赖该特性，求通用浏览器控制台解决方案。

附相关HTML结构：

<app-store-input _ngcontent-ngi-c61="" _nghost-ngi-c56="" class="ng-star-inserted">
  <app-input _ngcontent-ngi-c56="" _nghost-ngi-c55="">
   <div _ngcontent-ngi-c55="" class="labels">
    <label _ngcontent-ngi-c55="" class="label"> NAME </label>
    <label _ngcontent-ngi-c55="" class="error-label" style="position: absolute; right: 0; bottom: 23px; margin-left: auto; margin-right: 15px;" hidden="">
    </label>
   </div>
    <input _ngcontent-ngi-c55="" type="text" maxlength="150" placeholder="" title="" class="ng-dirty ng-valid ng-touched" required="">
      #shadow-root (user-agent)
        <div pseudo="-webkit-input-placeholder" id="placeholder" style="display: none !important;"></div>
        <div>MyName</div>
  </app-input>
</app-store-input>

解决方案 #

Angular自定义组件结合Shadow DOM会隔离常规DOM操作，需通过定位组件容器→获取内部输入框→模拟真实输入事件的流程实现填充，具体步骤如下：

1. 定位目标输入框的组件容器 #

通过遍历app-input组件，匹配内部的NAME标签来定位目标容器：

const nameInputContainer = Array.from(document.querySelectorAll('app-input')).find(el => {
  const label = el.querySelector('.label');
  return label && label.textContent.trim() === 'NAME';
});

2. 获取内部的input元素 #

从容器中直接提取input标签：

const nameInput = nameInputContainer.querySelector('input');

3. 模拟真实输入（关键） #

Angular表单依赖input、change事件更新状态，仅修改value不会触发表单校验和数据绑定，需手动触发事件：

nameInput.value = '待填充的Excel数据';
// 触发事件通知Angular更新
nameInput.dispatchEvent(new Event('input', { bubbles: true }));
nameInput.dispatchEvent(new Event('change', { bubbles: true }));

完整可执行脚本 #

将上述步骤封装成函数，直接在控制台调用即可：

function fillName(inputValue) {
  // 定位组件容器
  const nameInputContainer = Array.from(document.querySelectorAll('app-input')).find(el => {
    const label = el.querySelector('.label');
    return label && label.textContent.trim() === 'NAME';
  });
  
  if (!nameInputContainer) {
    console.log('未找到NAME输入框容器');
    return;
  }
  
  // 获取输入框元素
  const nameInput = nameInputContainer.querySelector('input');
  if (!nameInput) {
    console.log('未找到输入框元素');
    return;
  }
  
  // 填充值并触发事件
  nameInput.value = inputValue;
  nameInput.dispatchEvent(new Event('input', { bubbles: true }));
  nameInput.dispatchEvent(new Event('change', { bubbles: true }));
  console.log('NAME输入框填充完成');
}

// 调用示例：替换为你的Excel数据
fillName('你的数据内容');

VBA生成脚本实现半自动填充 #

用VBA读取Excel单元格数据，生成带参数的脚本并复制到剪贴板，直接粘贴到浏览器控制台执行：

Sub GenerateFillScript()
    ' 读取Excel数据（示例为Sheet1的A1单元格）
    Dim excelValue As String
    excelValue = ThisWorkbook.Sheets("Sheet1").Range("A1").Value
    
    ' 生成填充脚本
    Dim script As String
    script = "function fillName(inputValue) {const nameInputContainer = Array.from(document.querySelectorAll('app-input')).find(el => {const label = el.querySelector('.label');return label && label.textContent.trim() === 'NAME';});if (!nameInputContainer) {console.log('未找到NAME输入框容器');return;}const nameInput = nameInputContainer.querySelector('input');if (!nameInput) {console.log('未找到输入框元素');return;}nameInput.value = inputValue;nameInput.dispatchEvent(new Event('input', { bubbles: true }));nameInput.dispatchEvent(new Event('change', { bubbles: true }));console.log('NAME输入框填充完成');}fillName(""" & excelValue & """);"
    
    ' 将脚本复制到剪贴板
    Dim objData As Object
    Set objData = CreateObject("new:{1C3B4210-F441-11CE-B9EA-00AA006B1A69}")
    objData.SetText script
    objData.PutInClipboard
    
    MsgBox "填充脚本已复制到剪贴板，可粘贴至浏览器控制台执行"
End Sub

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