javascript - How to movedrag element from outside to iframe - Stack Overflow

admin管理员组

文章数量:1406951

I need to move element from outside an iframe into an iframe. My element panel is not part of iframe but my canvas is in the iframe and want to move element into it.

I tried below code :

 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)

It looks like the issue is that I have to switch to the iframe before I move element, but here I don't see that possibility because drag_and_drop is bined method where my element_source is out of the iframe and element_target is the iframe itself.

So if I switch before drag and drop, it can't find even element_source.

Here is demo page where I am working on : .html

In above demo left side is iframe and right panel is collection of elements.

I need to move element from outside an iframe into an iframe. My element panel is not part of iframe but my canvas is in the iframe and want to move element into it.

I tried below code :

 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)

It looks like the issue is that I have to switch to the iframe before I move element, but here I don't see that possibility because drag_and_drop is bined method where my element_source is out of the iframe and element_target is the iframe itself.

So if I switch before drag and drop, it can't find even element_source.

Here is demo page where I am working on : https://grapesjs./demo.html

In above demo left side is iframe and right panel is collection of elements.

• javascript
• jquery
• python-2.7
• selenium-webdriver
• iframe

Share Improve this question Follow edited Apr 11, 2020 at 13:37 Fraser 17.1k88 gold badges5757 silver badges110110 bronze badges asked Apr 6, 2020 at 5:01 Helping HandsHelping Hands 5,3961010 gold badges6767 silver badges132132 bronze badges 6

• 2 Have you checked this – supputuri Commented Apr 14, 2020 at 4:03
• @supputuri - I will check for sure. – Helping Hands Commented Apr 14, 2020 at 8:38
• 4 It'd be easier for you to get answers if you made a small snippet reproducing your problem. – Alexandre Elshobokshy Commented Jun 4, 2020 at 12:30
• @IslamElshobokshy - I tried code which I posted with question. I have also posted same on selenium github but still no luck : github./SeleniumHQ/selenium/issues/8342 – Helping Hands Commented Jun 4, 2020 at 12:50
• stackoverflow./questions/33214810/… – Bromox Commented Jun 8, 2020 at 12:20

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

Using JS message passing as suggested in the answer linked by @supputuri might not exactly simulate a typical drag and drop as performed by an actual user.

One possible solution would be to try extending the Selenium ActionChains API and implement new method(s) that would allow you to start the drag on one frame, switch to the iframe and drop there. I know for sure that the API is extensible like that, but cannot speak for how possible or easy to implement this solution would be.

Another option is to do some calculations based on known info about elements on both frames to get the offset for where you want to drop the element, then use some appropriate method from the Actions API - either drag_and_drop_by_offset, or some bination of click_and_hold, move_by_offset, move_to_element, move_to_element_with_offset and release.

If I have the time, I'll try a couple of these and let you know if it works.

---

Edit: Despite what the first line of this answer says, what ended up working when I had to work with grapes myself, was some custom js that I ran using the webdriver execute_script method that just accessed the grapes js editor object which is attached to the window. Calling editor.addComponents with the content that I wanted to add did the trick. But, I had to create a mapping between the block labels that users see on the page to the internal block IDs and HTML content for that ponent, so I could just pass the label/name that a user sees for the ponent and it would get added. Maybe there is an ideal solution that mimics all the actions that an actual user does with the drag and drop, but I haven't got there yet.

I investigate the app, in this case even drag_and_drop_by_offset with XPATH doesn't help me because this known HTML 5 selenium-drag-issue. You need to create the custom helper based on the next workaround: https://github./andywer/drag-mock and use CSS selectors (no one selectors are stable except XPATH for now) inside the current browser context with execute_script if you will continue to use python-selenium bindings.

本文标签： javascriptHow to movedrag element from outside to iframeStack Overflow