如何将元素从外部移动/拖动到 iframe答案

【问题标题】：How to move / drag element from outside to iframe如何将元素从外部移动/拖动到 iframe
【发布时间】：2020-04-06 05:01:50
【问题描述】：

我需要将元素从 iframe 外部移动到 iframe。我的元素面板不是 iframe 的一部分，但我的画布在 iframe 中并且想要将元素移动到其中。

我试过下面的代码：

 element_source = self._selenium.find_element(By.XPATH,
                                          '//div[@class="gjs-block-label"][contains(.,"Tooltip")]')
    element_target=self._selenium.find_element(By.CLASS_NAME,'gjs-frame')
    actions = ActionChains(self._driver)
    actions.drag_and_drop(element_source, element_target).perform()
    time.sleep(5)

看起来问题是我必须在移动元素之前切换到 iframe，但在这里我看不到这种可能性，因为 drag_and_drop 是我的 element_source 不在的组合方法iframe 和 element_target 是 iframe 本身。

所以如果我在拖放之前切换，它甚至找不到element_source。

这是我正在处理的演示页面：https://grapesjs.com/demo.html

在上面的演示中，左侧是 iframe，右侧面板是元素集合。

【问题讨论】：

你检查过this
@supputuri - 我会确认的。
如果你用一个小sn-p重现你的问题，你会更容易得到答案。
@IslamElshobokshy - 我尝试了我发布的问题代码。我也在 selenium github 上发布了相同的内容，但仍然没有运气：github.com/SeleniumHQ/selenium/issues/8342
stackoverflow.com/questions/33214810/…

标签： javascript jquery python-2.7 selenium-webdriver iframe

【解决方案1】：

按照@supputuri 链接的答案中的建议使用JS 消息传递可能无法完全模拟实际用户执行的典型拖放操作。

一种可能的解决方案是尝试扩展 Selenium ActionChains API 并实现新方法，允许您在一个帧上开始拖动，切换到 iframe 并放在那里。我确信 API 是可以这样扩展的，但无法说明实现此解决方案的可能性或容易程度。

另一种选择是根据有关两个帧上元素的已知信息进行一些计算，以获得要放置元素的位置的偏移量，然后使用 Actions API 中的一些适当方法 - drag_and_drop_by_offset 或某种组合click_and_hold、move_by_offset、move_to_element、move_to_element_with_offset 和 release。

如果我有时间，我会尝试其中的几个，让你知道它是否有效。

编辑：尽管这个答案的第一行说了什么，但当我不得不自己使用葡萄时，最终起作用的是我使用 webdriver execute_script 刚刚访问葡萄 js @987654328 的方法运行的一些自定义 js @ 附加到window 的对象。使用我想要添加的内容调用 editor.addComponents 就可以了。但是，我必须在用户在页面上看到的块标签与该组件的内部块 ID 和 HTML 内容之间创建一个映射，所以我可以只传递用户看到的组件的标签/名称，它会得到添加。也许有一个理想的解决方案可以模拟实际用户通过拖放执行的所有操作，但我还没有做到。

【讨论】：

【解决方案2】：

我调查了该应用程序，在这种情况下，即使使用 XPATH 的 drag_and_drop_by_offset 也无济于事，因为这是已知的 HTML 5 selenium-drag-issue。您需要根据下一个解决方法创建自定义帮助程序： https://github.com/andywer/drag-mock 并在当前浏览器上下文中使用 CSS 选择器（目前除了 XPATH 之外没有其他选择器是稳定的）execute_script，如果您将继续使用 python-selenium 绑定。

【讨论】：