如何使用量角器打字稿在地图元素上单击选择拖动答案

【问题标题】：How to click select drag on a map element using Protractor typescript如何使用量角器打字稿在地图元素上单击选择拖动
【发布时间】：2019-08-11 04:29:12
【问题描述】：

我需要帮助，我想单击特定区域，然后选择拖动该区域，然后释放单击。类似于下图：

我试过这段代码，但什么也没发生：

browser.actions().
  mouseDown(element(by.id('waze_map1')), '{x: 191, y: 56}').
  mouseMove(element(by.id('waze_map1')), {x: 540, y: 504}).
  mouseUp().
  perform();

任何建议和想法将不胜感激。谢谢

【问题讨论】：

当你说什么都没有发生时，你的意思是在屏幕上看不到任何事情发生，或者你正在以另一种方式衡量这个动作？
我的意思是什么都没有发生，好像它没有在屏幕上执行操作
之前我确实需要使用鼠标移动，虽然屏幕上似乎没有发生任何事情，但我们有一些事件侦听器检测到一个元素已成功拖入另一个框。查看鼠标移动对您的测试目的是否重要？
它不重要，但我知道它可以工作，因为地图上的项目应该改变其选中状态，但在我的情况下，当我运行上面的代码时没有任何反应
另一位用户最近发布了一个微similar question（但不一样）。有一些方法可以帮助你。

标签： angular typescript jasmine protractor webautomation

【解决方案1】：

我在链接 browser.actions() 时遇到问题，这可能是您遇到的问题。 Chrome 驱动程序之前就遇到过这个问题，尽管我相信它目前可以按当前版本的预期工作。我的测试代码中有一个类似的功能，它做同样的事情，主要区别在于我使用的是 async/await。使用你的选择器看起来像：

await browser.actions().mouseMove(element(by.id('waze_map1')), '{x: 191, y: 56}').perform(); //moved cursor to starting point
await browser.actions().mouseDown().perform(); //clicks down
await browser.actions().mouseMove(element(by.id('waze_map1')), {x: 540, y: 504}).perform(); //drags the cursor
await browser.actions().mouseUp().perform();   //releases cursor

【讨论】：

await browser.actions().mouseMove(element(by.id('waze_map1')), {x: 191, y: 56}).perform(); //moved cursor to starting point await browser.actions().mouseDown().perform(); //clicks down await browser.actions().mouseMove().perform(element(by.id('waze_map1')), {x: 540, y: 504}); //drags the cursor await browser.actions().mouseUp().perform(); //releases cursor 在第 3 行出现错误提示错误：(method) ActionSequence.mouseMove(location: WebElement | ILocation, opt_offset?: ILocation): ActionSequence跨度>
@SeanRay 我不小心将 elementFinder 放入 perform() 而不是 mouseMove()。我更新了代码

【解决方案2】：

查看了 Protractor 的文档here。

这似乎只是继承自 selenium 定义的Actions。我很困惑，因为他们给出了使用mouseDown()、mouseMove() 和mouseUp() 的示例，但是查看selenium 中的source code for Actions，它似乎没有任何方法mouseDown() 或mouseUp() 也没有继承它们，除非我遗漏了什么（mouseMove() 可以在那里找到）。

但是，有一个 dragAndDropBy() 方法声称是“一种在源元素位置执行单击并按住，移动给定偏移量，然后释放鼠标的便捷方法。”如果你尝试怎么办：

browser.actions().dragAndDropBy(yourElement, "540", "504).perform()

或

browser.actions().dragAndDropBy(yourElement, "540", "504).build().perform()

【讨论】：

在有build()的代码行发生错误，错误提示说Property 'build' does not exist on type 'ActionSequence'。虽然没有 build() 相同行为的代码在我运行该代码时没有任何反应