Chromedriver+Selenium在WhatsApp网页版输入Emoji文本失效问题求助

问题根源 #

直接通过JS修改输入框的innerText只是改动了DOM表面的文本，但WhatsApp网页版的前端依赖**输入事件（如input、compositionend）**来同步内部状态。如果只改文本不触发这些事件，页面不会认为输入框有有效内容，点击发送或聚焦输入框时就会自动清空内容。

解决方案 #

核心思路是：在修改输入框内容后，触发WhatsApp前端监听的必要事件，或者用更贴近真实用户输入的方式插入内容，确保页面状态同步。

方案1：赋值+触发关键事件

替换原有的JS注入代码，同时触发input和compositionend事件，优化元素定位避免依赖不稳定的长XPath：

try
{
    // 用CSS选择器定位输入框，比长XPath更稳定
    var inputBox = driver.FindElement(By.CssSelector("div._13NKt.copyable-text.selectable-text"));
    
    IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
    js.ExecuteScript(@"
        const elem = arguments[0];
        // 设置输入框内容
        elem.textContent = arguments[1];
        // 触发input事件，通知页面内容变更
        elem.dispatchEvent(new Event('input', { bubbles: true }));
        // 触发compositionend事件，确保Emoji被正确识别
        elem.dispatchEvent(new Event('compositionend', { bubbles: true }));
    ", inputBox, "Hello😁");
    
    // 直接点击发送按钮即可
    driver.FindElement(By.CssSelector("span[data-testid='send']")).Click();
}
catch (Exception ex)
{
    Console.WriteLine(ex.Message);
}

方案2：模拟真实输入（更可靠）

使用document.execCommand模拟用户输入流程，这种方式完全贴近真实操作，触发的事件链最完整，不容易被页面逻辑拦截：

try
{
    var inputBox = driver.FindElement(By.CssSelector("div._13NKt.copyable-text.selectable-text"));
    
    IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
    js.ExecuteScript(@"
        const elem = arguments[0];
        // 聚焦输入框
        elem.focus();
        // 清空原有内容
        document.execCommand('selectAll', false, null);
        document.execCommand('delete', false, null);
        // 插入目标文本（含Emoji）
        document.execCommand('insertText', false, arguments[1]);
    ", inputBox, "Hello😁");
    
    driver.FindElement(By.CssSelector("span[data-testid='send']")).Click();
}
catch (Exception ex)
{
    Console.WriteLine(ex.Message);
}

额外提示 #

• 移除原代码中的SendKeys(" ")和SendKeys(Keys.Backspace)：这类操作会干扰输入框的状态，反而容易触发内容重置。
• 定期检查选择器：WhatsApp网页版会更新页面结构，若选择器失效，可通过浏览器开发者工具重新获取最新的CSS选择器或属性定位。

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