RobotFramework drag and drop to canvas not working for grapesjs

Question

I am stuck with automation. I am using SeleniumLibrary for robot framework. We need this on Chrome browser.

I am unable to drag and drop an element from parent to iframe/canvas using robot framework. The backend in on grapesjs. I guess this is not trivial.

Demo site

This is the demo page

I would like to drag and drop blocks from the right into the canvas. For eg., I would like to drag and drop "Slider" into the canvas. Anywhere on this section

I searched for SO for most of the answers, but could not find any suitable solutions.

Here is what I have tried:

First approach

Robot framework's drap and drop by offset.

      Open Browser  https://grapesjs.com/demo.html     Chrome
      Maximize Browser Window
      ${src}=                       Set Variable    xpath=//div[contains(text(),'Slider')]
      Drag And Drop By Offset    ${src}    -300   -100
      Close Browser

I am trying to drag and drop the slider into the canvas. Here are the co-ordinates.

The Slider's coordinates: 1360, 125
The canvas' coordinates: 568, 153

As I am trying to drag the element from right to left, the x offset is negative.

Observation

I see that the element is dragged on the canvas but not dropped. However, if I do a click whilst the framework is trying to drop, I see the block inserted on the canvas. I am unable to take screen shots, as I need to click.

The most important observation is that the cursor needs to be on the canvas for the drop to happen. I am unable to move the cursor on the canvas with robotframework.

Second approach

Robot framework's drap and drop by offset with a mouse down.

      Open Browser  https://grapesjs.com/demo.html     Chrome
      Maximize Browser Window
      ${src}=                       Set Variable    xpath=//div[contains(text(),'Slider')]
      Drag And Drop By Offset    ${src}    -300   -100
      Mouse Down    xpath://iframe
      Close Browser

This did not work either and has the same observations as the first approach.

Then I decided to switch to the iframe and try to click on the canvas.

Third approach

Robot framework's drap and drop by offset with a mouse down and switch to iframe.

    Open Browser  https://grapesjs.com/demo.html     CHrome
    Maximize Browser Window
    ${src}=                       Set Variable    xpath=//div[contains(text(),'Slider')]
    # Click on the canvas
    Click Element    xpath=//iframe[contains(@class,"gjs-frame")]
    Log To Console    Clicked on canvas...

    # Ensure that the blocks are displayed on the right side, as the click on canvas opens "Style Manager"
    ${present}=  Run Keyword And Return Status    Element Should Be Visible    xpath=//span[@class='gjs-pn-btn fa fa-th-large gjs-pn-active gjs-four-color']
    Log To Console    Preset:${present}
    IF   "${present}"=="False"
       Click Element      xpath=//span[@title='Open Blocks']
       Log To Console     Click on Open Blocks...
    END

    Drag And Drop By Offset    ${src}    -300   -100
    Sleep 5
    Select Frame    xpath=//iframe[contains(@class,"gjs-frame")]
    Sleep   1s
    ${tgt}=                       Set Variable    xpath=/html/body/div[1]
    Wait Until Element Is Visible    ${tgt}
    Mouse Down    ${tgt}
    Click Element    ${tgt}
    Unselect Frame

That did not work either. Same observations as first approach

Fourth approach

Robot framework's mouse panning

    Open Browser  https://grapesjs.com/demo.html       Chrome
    Maximize Browser Window

    ${ATTEMPTS}=                  Set Variable    5
    ${LARGER_TIMEOUT}=            Set Variable    10

    ${src}=                       Set Variable    xpath=//div[contains(text(),'Slider')]
    ${tgt}=                       Set Variable    xpath=/html/body/div[1]

    # Hover the mouse on the Slider
    Wait Until Keyword Succeeds      ${ATTEMPTS}     ${LARGER_TIMEOUT}      Mouse Over   ${src}
    Sleep       1s
    # Click and Hold the Slider 
    Wait Until Keyword Succeeds      ${ATTEMPTS}     ${LARGER_TIMEOUT}      Mouse Down   ${src}
    Sleep       1s
    
    # Move the mouse away from the Slider
    Wait Until Keyword Succeeds      ${ATTEMPTS}     ${LARGER_TIMEOUT}      Mouse Out    ${src}
    Sleep       1s
    Capture Page Screenshot
    
    # Switch to iframe
    Select Frame    xpath=//iframe[contains(@class,"gjs-frame")]
    Sleep       1s
    Wait Until Element Is Visible   ${tgt}

    # Hover over the canvas/iframe 
    Wait Until Keyword Succeeds      ${ATTEMPTS}     ${LARGER_TIMEOUT}      Mouse Over   ${tgt}
    Sleep       1s

    # Drop the element on the iframe
    Wait Until Keyword Succeeds      ${ATTEMPTS}     ${LARGER_TIMEOUT}      Mouse Up     ${tgt}
    Sleep       1s

In this approach, all the steps work but the last step. The element is not getting dropped on the iframe/canvas.

Fifth approach

I followed this SO post RobotFramework: Drag And Drop Selenium2 Keyword seems not to work to try the javascript version. This does not work due to the canvas/iframe. It works on pages where there is NO iframe.

The entire automation is dependent on this step.

Here are a few links that I want to reference:

If there is a way to intercept drag and drop and do a mouse click, I am guessing it might work. However, I am not sure if the parent to iframe drop is that trivial, as suggested in this link https://github.com/James-E-Adams/iframe-drag-n-drop

RobotFramework drag and drop to canvas not working for grapesjs

0 Answers0