如何在Swift的WKWebView中自动触发网站登录按钮点击？

核心思路 #

目标按钮大概率是页面通过JavaScript动态渲染生成的，因此不能在webView(_:didFinish:)回调触发时直接查找元素，需要通过注入JS脚本监听元素加载状态，或等待页面完全渲染后执行点击逻辑。

具体实现步骤 #

1. 注入监听元素的JS脚本（推荐方案） #

创建WKWebView时，注入一段持续监听目标按钮的JS脚本，元素一旦出现就自动触发点击：

import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        
        // 编写自动点击的JS逻辑
        let autoClickScript = """
        function checkAndClickButton() {
            // 查找目标按钮
            const signInBtn = document.querySelector('button.navButtonLink');
            if (signInBtn) {
                signInBtn.click();
                console.log('登录按钮已触发');
            } else {
                // 未找到则100ms后重试
                setTimeout(checkAndClickButton, 100);
            }
        }
        // 页面加载完成后启动监听
        window.addEventListener('load', checkAndClickButton);
        """
        
        let userScript = WKUserScript(source: autoClickScript, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
        config.userContentController.addUserScript(userScript)
        
        // 初始化并加载网页
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        if let url = URL(string: "https://resorts.international") {
            webView.load(URLRequest(url: url))
        }
    }
}

2. 备选：页面加载完成后延迟执行点击 #

如果上述脚本未生效，可在页面导航完成后延迟执行点击逻辑，给动态元素足够的渲染时间：

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 根据页面实际加载速度调整延迟时间
    DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
        let clickJS = """
        // 兼容文本匹配的查找逻辑，避免class重复
        const buttons = Array.from(document.querySelectorAll('button.navButtonLink'));
        const signInBtn = buttons.find(btn => btn.textContent.trim() === 'Sign In');
        signInBtn?.click();
        """
        webView.evaluateJavaScript(clickJS) { _, error in
            if let error = error {
                print("触发失败：\(error.localizedDescription)")
            }
        }
    }
}

3. 排查选择器准确性 #

若仍找不到元素，需确认选择器是否正确：

• 打开网站开发者工具，检查按钮的真实DOM结构，比如是否是<a>标签而非<button>，或class存在拼写差异
• 可使用更精确的选择器，比如结合父元素：document.querySelector('.navContainer button.navButtonLink')

注意事项 #

• 若网站启用了Content Security Policy (CSP)，需确保后台配置允许注入的JS脚本执行
• 延迟时间需根据页面实际加载速度调整，避免过早执行导致元素未渲染完成
• 可通过evaluateJavaScript的回调捕获错误，快速定位问题

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