Delphi 11中使用TEdgeBrowser操作网页元素的实现问题

现有页面包含以下HTML元素：

<input type="input" id='input_value' ...>
<button id='btn_find' ... >
<input type="checkbox" name="chbox1" ...">

需要遍历Memo1中的每个字符串，依次完成以下操作：

• 将字符串填入id为input_value的输入框；
• 点击id为btn_find的按钮；
• 等待页面加载完成或最多3秒；
• 若字符串存在，点击显示的name为chbox1的复选框；
• 若字符串不存在，将该字符串添加至Memo2。

已使用TEdgeBrowser编写部分代码，但需补充判断chbox1是否可见的逻辑：

for i := 0 to memo1.lines.Count - 1 do    
begin
  js:='document.getElementById("input_value").value="'+memo1.lines[i]+'"';
  EdgeBrowser1.ExecuteScript(js);
  EdgeBrowser1.ExecuteScript('document.getElementById("btn_find").click()');
  Delay(3000);
  // here I must check if the chbox1 visible 
  if {chbox1 visible} then
    EdgeBrowser1.ExecuteScript('document.getElementsByName("chbox1")[0].click()')
  else 
    memo2.lines.add(memo1.lines[i]);
end;

请求补充判断chbox1可见性的实现方法。

要判断chbox1是否可见，需通过JavaScript获取元素的可见状态，再将结果返回给Delphi代码做判断，具体修改如下：

完整代码 #

var
  IsVisible: Boolean;
  JSCode: string;
begin
  for i := 0 to memo1.lines.Count - 1 do    
  begin
    // 填入目标字符串到输入框
    JSCode := 'document.getElementById("input_value").value="' + memo1.lines[i] + '"';
    EdgeBrowser1.ExecuteScript(JSCode);
    
    // 触发查询按钮
    EdgeBrowser1.ExecuteScript('document.getElementById("btn_find").click()');
    
    // 等待页面加载（最多3秒）
    Delay(3000);
    
    // 执行JS判断复选框是否可见，并返回结果
    JSCode := 'var elem = document.getElementsByName("chbox1")[0];' +
              'elem && elem.offsetParent !== null;';
    EdgeBrowser1.ExecuteScript(JSCode, @IsVisible);
    
    // 根据结果执行对应操作
    if IsVisible then
      EdgeBrowser1.ExecuteScript('document.getElementsByName("chbox1")[0].click()')
    else
      memo2.Lines.Add(memo1.Lines[i]);
  end;
end;

逻辑说明 #

• document.getElementsByName("chbox1")[0]：先获取目标复选框元素，判断元素是否存在；
• elem.offsetParent !== null：当元素的offsetParent不为空时，说明元素处于可见状态（可覆盖display:none、visibility:hidden或被父元素隐藏等多数场景）；
• ExecuteScript(JSCode, @IsVisible)：通过TEdgeBrowser的重载方法，将JS返回的布尔值直接赋值给Delphi变量IsVisible，以此作为判断依据。

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