WKWebView中使用getElementsByClassName无法触发按钮点击的解决方案问询

背景 #

能找到目标元素并将其从禁用状态改为可用，说明按钮类名正确，但执行点击代码时无任何反应，Xcode控制台也未输出错误。该按钮无input id，也未关联任何表单。

疑问 #

确认getElementsByClassName....click()代码正确，且页面中该类名对应元素唯一，求其他触发按钮点击的方法？

网站HTML代码 #

<div class="mr-0 mr-md-5 pr-md-4 mb-4">
   <p class="mb-1 body-s" role="" aria-live="">Password</p>
   <span class="aria-hidden-logic d-none" aria-hidden="false">
      <label class="body-xs font-weight-bold mt-lg-2 mt-xl-2" for="oldPassword"></label>. 
   </span>
   <div class="input-controller aria-hidden-logic mb-2" aria-hidden="false">
      <input class="form-control is-invalid" type="password" id="oldPassword" placeholder="Old password" maxlength="40" aria-describedby="error-oldPassword" aria-label="oldPassword" value="">
      <button class="body-xs show-hide-btn" aria-label="Show Current Password">Show</button>
   <div aria-live="polite">
      <div class="error-class" id="error-oldPassword">Please enter your password</div>. 
      </div>
   </div>
   <span class="aria-hidden-logic d-none" aria-hidden="false">
      <label class="body-xs font-weight-bold mt-lg-2 mt-xl-2" for="newPassword"></label>. 
   </span>
   <div class="input-controller aria-hidden-logic mb-2" aria-hidden="false">
      <input class="form-control " type="password" id="newPassword" placeholder="New password" maxlength="40" aria-describedby="error-newPassword" aria-label="newPassword" value="">
      <button class="body-xs show-hide-btn" aria-label="Show New Password">Show</button>. 
      <div aria-live="polite"></div>
   <span>
   <ul class="ul-list-helpText">
      <li class="">Password must be 8-40 characters long.</li>
      <li class="">Your new password cannot be the same as your old password.</li>
      </ul>
   </span>
   </div>
   <div class="d-flex justify-content-end">
       <button type="button" class="btn btn-link body-s h-auto my-2 mr-3">Cancel</button>.   
       <button type="button" class="btn btn-secondary core-btn uca-button btn btn-sm btn-primary">Save</button>
   </div>
</div>

无法触发Save按钮点击的Swift代码 #

webView.evaluateJavaScript("document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0].click();"){
                (result, error) -> Void in
       
                print(error)
           
            }

可启用Save按钮的Swift代码（原状态为禁用） #

webView.evaluateJavaScript("document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0].disabled = false;"){
            (result, error) -> Void in
            print(result)
            print(error)
        }

解决方法 #

1. 用dispatchEvent模拟原生点击事件
   直接调用click()有时无法触发按钮绑定的事件，可手动创建并分发标准点击事件：

webView.evaluateJavaScript("""
const btn = document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0];
const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
});
btn.dispatchEvent(clickEvent);
""") { (result, error) in
    print(error ?? "点击事件分发完成")
}

2. 优化元素选择器
   当前类选择器包含重复的btn类，可改用更简洁的querySelector：

webView.evaluateJavaScript("document.querySelector('.core-btn.uca-button').click();") { (result, error) in
    print(error)
}

querySelector返回第一个匹配元素，和原代码取[0]效果一致，但语法更清晰。

3. 先通过表单验证
   页面中密码输入框存在错误提示，按钮点击事件可能依赖前端验证逻辑。即使启用按钮，未通过验证也会无响应，可先填充必填字段并触发验证更新：

webView.evaluateJavaScript("""
// 填充密码字段
document.getElementById('oldPassword').value = '你的旧密码';
document.getElementById('newPassword').value = '你的新密码';
// 触发输入事件更新验证状态
document.getElementById('oldPassword').dispatchEvent(new Event('input'));
document.getElementById('newPassword').dispatchEvent(new Event('input'));
// 启用并点击按钮
const btn = document.querySelector('.core-btn.uca-button');
btn.disabled = false;
btn.click();
""") { (result, error) in
    print(error)
}

4. 检查事件绑定方式
   若页面使用Vue、React等框架，按钮事件可能通过框架机制绑定，直接click()无效。可尝试：

• 若按钮有onclick属性，直接执行对应函数
• 查看页面框架的事件绑定逻辑，调用对应的处理方法（需了解页面具体实现）

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