如何在WKWebView中获取登录页邮箱输入框的值？

问题根源 #

你当前的JavaScript代码使用document.getElementById('email')定位元素，但目标邮箱输入框的HTML中没有id="email"属性，只有name="email"、data-automation-id="email"等属性，因此无法找到对应元素，导致获取值失败。

正确实现方式 #

根据输入框的现有属性，以下几种JavaScript选择器可以可靠获取输入框值，同时修正Swift代码中的错误（比如print(js)应为print(jsonString)）：

方式1：通过name属性获取

webView.evaluateJavaScript("document.getElementsByName('email')[0].value", completionHandler: { (jsonRaw: Any?, error: Error?) in
    if let error = error {
        print("获取失败：\(error.localizedDescription)")
        return
    }
    guard let emailValue = jsonRaw as? String else {
        print("未获取到有效值")
        return
    }
    print("邮箱值：\(emailValue)")
})

注意：getElementsByName返回元素集合，需通过[0]取第一个匹配元素（确保页面中该name唯一）。

方式2：通过data-automation-id属性获取（推荐）

这个属性通常为自动化测试设置，唯一性更高，稳定性更强：

webView.evaluateJavaScript("document.querySelector('[data-automation-id=\"email\"]').value", completionHandler: { (jsonRaw: Any?, error: Error?) in
    if let error = error {
        print("获取失败：\(error.localizedDescription)")
        return
    }
    guard let emailValue = jsonRaw as? String else {
        print("未获取到有效值")
        return
    }
    print("邮箱值：\(emailValue)")
})

方式3：通过class+type组合获取

如果页面中同class的input唯一，也可使用该方式：

webView.evaluateJavaScript("document.querySelector('input.input[type=\"email\"]').value", completionHandler: { (jsonRaw: Any?, error: Error?) in
    if let error = error {
        print("获取失败：\(error.localizedDescription)")
        return
    }
    guard let emailValue = jsonRaw as? String else {
        print("未获取到有效值")
        return
    }
    print("邮箱值：\(emailValue)")
})

额外注意事项 #

• 确保执行evaluateJavaScript时，WKWebView已完成页面加载（比如在webView(_:didFinish:)代理方法中调用），否则可能找不到元素。
• 若页面存在动态渲染逻辑（如JS加载后生成输入框），需等待动态内容加载完成后再执行获取操作。

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