有什么办法可以通过 webdriver 在浏览器屏幕中选择一行文本来模拟键盘或鼠标？

Question

我想使用 WebDriver 在浏览器屏幕（实际上是在 CKEditor 编辑区域）中选择一行文本，然后从 CKEditor 工具栏更改其文本样式。有什么方法可以做到这一点吗？

例如，一行 html 代码如下：

this is a sample line.

我尝试使用 Actions 构建鼠标动作链，但由于不熟悉而没有成功。感谢您的任何提示或答案。

Answer 1

我不确定这对于 WebDriver 是否真的可行。您想要做的是clickAndHold(...).moveByOffset(...).release(...)。不幸的是，WebDriver 只允许将 WebElement 作为 clickAndHold() 的参数。

我给你的最好建议是为此模拟 JavaScript 事件。然后，您可以在测试中执行类似的操作：

((JavascriptExecutor) driver).executeScript(...);

我编写了用于模拟鼠标事件的代码，我将其与我的一些 Selenium 测试一起使用。虽然它不能完全满足您的要求，但希望它会很有用（希望您可以设置 x/y 坐标，也许这会使其正常工作）：

var f = function() {
  var id  = "ext-gen1116";
  var top = document.querySelector( '#ext-gen1116:nthchild(0)' );
  var bot = document.getElementById( id ).childNodes[3];

  var getX = function( obj ) {
    if( obj == null ) {
      return 0;
    } else {
      return obj.offsetLeft + getX( obj.offsetParent );
    }
  }

  var getY = function( obj ) {
    if( obj == null ) {
      return 0;
    } else {
      return obj.offsetTop + getY( obj.offsetParent );
    }
  }

  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("mousedown", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  bot.dispatchEvent(evt);

  evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("mousemove", true, true, window,
    0, 0, 0, getX( top ) - getX( bot ), getY( top ) - getY( bot ),
    false, false, false, false, 0, null);
  bot.dispatchEvent(evt);

  var mouseup = function( elem ) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("mouseup", true, true, window,
      0, 0, 0, 0, 0, false, false, false, false, 0, null);
    elem.dispatchEvent(evt);
  }

  setTimeout( mouseup, 500, bot );
};
f();

如果您可以用键盘做您想做的事情，这是迄今为止更好的解决方案。您只需执行driver.sendKeys(...)即可。在这种情况下，Keys 枚举对您来说将是无价的:-)

Answer 2

您还可以尝试使用 JavaScript 来完成此操作：

let el = document.querySelectorAll("p")[0];
let range = document.createRange();
range.selectNodeContents(el);
window.getSelection().addRange(range);