WebdriverIO拖拽功能异常：拖拽原点位置不符预期求助

我需要为拖拽功能创建自动化测试，为此制作了一个高度简化的示例，但无法理解Webdriver或WebdriverIO模块的异常表现。

HTML代码 #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>foo</title>
  <style>
    #foo {
      height: 100px;
      width: 100px;
      border: 1px solid black;
      background-color: grey;
      margin: 300px auto;
    }
  </style>
</head>
<body>
  <div id="foo" draggable="true">
    AAA
  </div>
</body>
</html>

测试方法 #

用于拖拽div的测试方法如下（我也尝试过使用WebdriverIO的browser.action() … .perform()链式方法，表现一致，因此不认为是.action()方法的Bug）：

async dummyTest() {
  const e = await this.browser.$('#foo');
  const eSize = await e.getSize();
  await this.browser.performActions([
    {
      type: 'pointer',
      id: 'mouse-one',
      actions: [
        {
          type: 'pointerMove',
          origin: e,
          duration: 100,
          x: 0,
          y: 0,
        },
        {
          type: 'pointerDown',
          button: 0,
        },
        {
          type: 'pointerMove',
          origin: e,
          duration: 100,
          x: Math.round(eSize.width / 2),
          y: 0,
          //y: 100,
          //y: -100,
        },
        {
          type: 'pause',
          duration: 8000,
        },
      ],
    },
  ]);
}

现象说明 #

Webdriver截取的截图无法显示元素被拖拽的状态，因此我用手机拍摄了画面：

• 当设置y: -100时：拖拽起始点远高于带AAA文本的目标元素，元素被向上拖拽
• 当设置y: 0时：拖拽起始点仍高于目标元素，元素位置基本不变但触发了拖拽状态
• 当设置y: 100时：拖拽起始点高于目标元素，元素被向下拖拽

明显可以看到，拖拽原点远高于带有AAA文本的被拖拽元素。

疑问 #

能否有人帮忙分析原因？这是Webdriver的Bug还是我对API的理解有误？

注：我使用的是WebdriverIO v8.1.3，该问题在v7版本中也存在。

内容的提问来源于stack exchange，提问作者d.k