Selenium C#结合JS如何模拟鼠标选中HTML元素内指定文本

方案说明 #

该方案直接操作DOM文本节点，选中范围精确到文本层级，不会选中整个元素容器，模拟的选中效果和手动鼠标拖拽选中文本完全一致，传入目标字符串即可自动匹配选中对应内容。
本次测试的目标元素结构如下：

<div data-fid="0" id="tbobjectContent-div1">
Sheet1 SCS OPTION DATA.
This is a dummy test data. Please select this sentence.
Selection has to be mouse select.
Please do it selenium C# combination        
</div>

实现逻辑 #

• 先定位到包裹目标文本的容器元素
• 递归遍历容器下所有文本节点，拼接全量文本同时记录每个文本节点的位置偏移
• 匹配目标字符串在全量文本中的起止位置，反向映射到对应文本节点的内部偏移
• 调用浏览器原生Range、Selection接口生成选中范围
• 触发标准鼠标事件，保证页面上依赖选中行为的业务逻辑可以正常响应，和手动操作表现一致

完整实现代码 #

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

class TextSelectionHelper
{
    /// <summary>
    /// 选中指定容器内的目标文本
    /// </summary>
    /// <param name="driver">Selenium驱动实例</param>
    /// <param name="container">目标文本所在的容器元素</param>
    /// <param name="targetText">需要选中的精确文本</param>
    public static void SelectTargetText(IWebDriver driver, IWebElement container, string targetText)
    {
        string jsScript = @"
            function runSelect(container, targetStr) {
                // 清空页面现有选中
                window.getSelection().removeAllRanges();
                let textNodes = [];
                
                // 递归获取容器下所有文本节点
                function traversalTextNodes(node) {
                    if (node.nodeType === Node.TEXT_NODE) {
                        textNodes.push(node);
                        return;
                    }
                    for (let child of node.childNodes) {
                        traversalTextNodes(child);
                    }
                }
                traversalTextNodes(container);

                let fullText = '';
                let nodePositionMap = [];
                // 拼接全量文本，记录每个文本节点的起始位置
                for (let node of textNodes) {
                    nodePositionMap.push({node: node, startIndex: fullText.length});
                    fullText += node.nodeValue;
                }

                // 查找目标文本位置
                let matchStart = fullText.indexOf(targetStr);
                if (matchStart === -1) throw new Error('容器内未找到匹配的目标文本');
                let matchEnd = matchStart + targetStr.length;

                // 定位起止点对应的文本节点和节点内偏移
                let rangeStart = null, startOffset = 0;
                let rangeEnd = null, endOffset = 0;
                for (let item of nodePositionMap) {
                    let nodeEndIndex = item.startIndex + item.node.nodeValue.length;
                    if (!rangeStart && matchStart >= item.startIndex && matchStart <= nodeEndIndex) {
                        rangeStart = item.node;
                        startOffset = matchStart - item.startIndex;
                    }
                    if (!rangeEnd && matchEnd >= item.startIndex && matchEnd <= nodeEndIndex) {
                        rangeEnd = item.node;
                        endOffset = matchEnd - item.startIndex;
                        break;
                    }
                }

                // 构造选中范围
                let selectRange = document.createRange();
                selectRange.setStart(rangeStart, startOffset);
                selectRange.setEnd(rangeEnd, endOffset);
                window.getSelection().addRange(selectRange);

                // 触发鼠标选中相关事件，对齐手动操作行为
                container.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
                container.dispatchEvent(new MouseEvent('mousemove', {bubbles: true}));
                container.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
            }
            runSelect(arguments[0], arguments[1]);
        ";
        ((IJavaScriptExecutor)driver).ExecuteScript(jsScript, container, targetText);
    }

    // 调用示例
    static void Main(string[] args)
    {
        IWebDriver driver = new ChromeDriver();
        driver.Navigate().GoToUrl("你的测试页面地址");
        IWebElement contentContainer = driver.FindElement(By.Id("tbobjectContent-div1"));
        // 传入需要选中的文本即可完成选择
        SelectTargetText(driver, contentContainer, "dummy test data");
    }
}

使用说明 #

• 如果目标文本在容器内出现多次，默认选中第一次匹配的内容，需要选中其他匹配项可以修改JS中indexOf的匹配逻辑
• 选中范围完全落在文本节点上，不会出现选中整个元素块的问题
• 触发的鼠标事件支持冒泡，页面上绑定的选中监听事件可以正常触发，不会被识别为异常脚本操作

内容的提问来源于stack exchange，提问作者martin p david