如何在Cypress中实现文本高亮选中操作？

要模拟右键拖动选中指定文本，不能仅用mouseover，需要完整模拟右键按下→拖动→松开的鼠标事件链，结合DOM Range定位文本位置，具体实现如下：

核心代码示例 #

// 替换为页面中实际的文本容器选择器
cy.get('.text-document').then($container => {
  const targetText = 'automatically translates those';
  const container = $container[0];
  const textNode = container.firstChild; // 假设文本在第一个子节点，若有多个需调整
  const textContent = textNode.textContent;
  
  // 计算目标文本的起始/结束索引
  const startIdx = textContent.indexOf(targetText);
  const endIdx = startIdx + targetText.length;

  // 创建Range对象定位文本范围
  const range = document.createRange();
  range.setStart(textNode, startIdx);
  range.setEnd(textNode, endIdx);

  // 获取文本范围的坐标（偏移量避免边缘问题）
  const rect = range.getBoundingClientRect();
  const startPos = { x: rect.left + 5, y: rect.top + rect.height / 2 };
  const endPos = { x: rect.right - 5, y: rect.top + rect.height / 2 };

  // 模拟右键拖动流程
  cy.get('.text-document')
    .trigger('mousedown', { button: 2, clientX: startPos.x, clientY: startPos.y }) // 按下右键
    .trigger('mousemove', { clientX: endPos.x, clientY: endPos.y }) // 拖动到文本结尾
    .trigger('mouseup', { button: 2 }); // 松开右键
});

关键注意事项 #

• 选择器适配：将.text-document替换为页面中实际承载文本的元素选择器
• 文本节点处理：如果文本分散在多个子节点中，需要遍历容器内的文本节点，找到包含目标文本的节点再设置Range范围
• 事件参数：button:2代表右键，必须指定；clientX/Y需基于文本区域的实际坐标，避免触发页面其他元素的事件
• 兼容性：部分富文本编辑器可能有自定义事件监听，可尝试添加force: true参数强制触发事件（如.trigger('mousedown', { button:2, ..., force: true })）

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