How to drag widgets to Nested Applications via poshi

[Tim-Cao]

The current available functions in dragAndDrop can’t drag a widgets to drop zone in Nested Applications portlet. I tried dragAndDrop, dragAndDropToObject and JavaScriptDragAndDropToObject.

[reizero00]

Can you provide some code examples on what you've tried so far?

[Tim-Cao]

    Portlet.gotoPortletOptions(portletName = "Asset Publisher");
    DragAndDrop(
        locator1 = "//header[@class='portlet-topper']//span[contains(.,'Asset Publisher')]",
        locator2 = "//section[contains(@id,'Nested')]//div[contains(@class,'portlet-body')]//div[contains(@class,'portlet-column-first yui3-dd-drop')]//div[contains(@class,'empty') and contains(@id,'column-1')]",
        value1 = "Asset Publisher");

[Tim-Cao]

    Portlet.gotoPortletOptions(portletName = "Asset Publisher");
    DragAndDrop.dragAndDropToObject(
        locator1 = "//header[@class='portlet-topper']//span[contains(.,'Asset Publisher')]",
        locator2 = "//section[contains(@id,'Nested')]//div[contains(@class,'portlet-body')]//div[contains(@class,'portlet-column-first yui3-dd-drop')]//div[contains(@class,'empty') and contains(@id,'column-1')]",
        value1 = "Asset Publisher");

[Tim-Cao]

DragAndDrop.javaScriptDragAndDropToObject(
        locator1 = "//div[contains(@class,'portlet-content')]//h2[contains(.,'Asset Publisher')]",
        locator2 = "//section[contains(@id,'Nested')]//div[contains(@class,'portlet-body')]//div[contains(@class,'portlet-column-first yui3-dd-drop')]//div[contains(@class,'empty') and contains(@id,'column-1')]",
        value1 = "Asset Publisher");

[kenjiheigel]

@Tim-Cao, I tested this with NestedPortlets#ViewWCDNestedPortlets per LRQA-55861.

For one, I was able to reproduce the exact issue on CI. One thing I noticed from the screen shot is:

The highlights indicate that the drag and drop is working. Additionally, in my local testing, the WCD portlet was getting dragged, but to be beneath the Nested Portlet portlet, not inside it. This led me to believe that the issue is with the drop zone.

In the case of the NestedPortlets test, it uses a special function: DragAndDrop.dragAndDropPortletToObject

I modified the macro to this and it worked (and doesn't require a fix in Poshi backend). You might need to make a new custom function so that it doesn't break other tests. Please read my explanation and context after this though:

    function dragAndDropPortletToObject {
        WaitForSPARefresh();

        selenium.waitForElementPresent("${locator1}");

        selenium.mouseOver("${locator1}");

        selenium.waitForVisible("${locator1}");

        selenium.waitForTextCaseInsensitive("${locator1}", "${value1}");

        selenium.waitForVisible("${locator2}");

        selenium.mouseOver("${locator2}");

        selenium.mouseDown("${locator1}");

        selenium.mouseMoveAt("${locator2}", "0,50");

        selenium.mouseMoveAt("${locator2}", "0,-50");

        selenium.mouseMoveAt("${locator2}", "0,50");

        selenium.mouseMoveAt("${locator2}", "0,-20");

        selenium.mouseRelease("${locator2}");

        selenium.assertJavaScriptErrors();

        selenium.assertLiferayErrors();
    }

Finicky Drop Zones

The key line that was changed is selenium.mouseMoveAt("${locator2}", "0,-20");. Generally, using drag and drops with WebDriver in portal have always been a been finicky... For some reason, moving the mouse to be above the actual drop zone does not drop it in the right spot. The 0,-20 coordinates refer to move the element 20 pixels above the element (I think it's above??), which activates the correct drop zone.

The "Wiggle"

One more thing to note, if you look closely at the function here:

        selenium.mouseMoveAt("${locator2}", "0,50");

        selenium.mouseMoveAt("${locator2}", "0,-50");

        selenium.mouseMoveAt("${locator2}", "0,50");

You'll notice it moves the draggable element up and down before settling on the final destination. I'm not sure who discovered this, but moving it around seems to help with activating the correct drop zone. Someone in QA past named it "the wiggle", accordingly. I actually tried removing this portion of code and the drag and drop didn't work correctly, even with my offset.

Additional Drag and Drops

I also tried using the selenium.dragAndDropToObject, but that didn't work for me either. the selenium.javaScriptDragAndDropToObject, I didn't bother trying because that is for react-dnd, while what we're working with right now is YUI drag and drop.

It may be advantageous for you to experiment with different drag and drop offsets in the functions if using the YUI drag and drop portions in portal.

Key takeaways

1. Observe the test and see if the drop zones are being activated (blue highlight borders, or however the UI changes)
2. Try different combinations of moving the mouse around in Poshi. You'll notice even if you use your mouse manually, to activate the right drop zone, you'll need to move the mouse around a bit, and you might not end up above the drop zone before you actually drop. Within Poshi functions, you have the right combination of things to make a custom drag and drop (mouseDown, mouseMoveAt, mouseMove, mouseRelease, etc.)

Let me know if this still doesn't work, or if you're still getting issues.

[Tim-Cao]

Thanks, @kenjiheigel  I had a try in your way, it's hard to realize on my local machine and it probably be affected by layout. According to your comments that common draganddrop work and the drop zone is finicky, I investigated to this issue again. The hierarchy of tags is 

<div class="col-md-6 portlet-column portlet-column-first yui3-dd-drop" id="_com_liferay_nested_portlets_web_portlet_NestedPortletsPortlet_INSTANCE_sV6Y8JqAQr8B__column-1">
   <div class="empty portlet-dropzone portlet-column-content portlet-column-content-first" id="layout-column__com_liferay_nested_portlets_web_portlet_NestedPortletsPortlet_INSTANCE_QF0xtrgVuubh__column-1">

I replaced the old locator //div[contains(@class,'col-md-6 portlet-column portlet-column-first')] by //div[contains(@class,'portlet-dropzone') and contains(@class,'empty') and contains(@id,'column-1')] That works and is more stable by dragAndDropPortletToObject.

[kenjiheigel]

@Tim-Cao, good find man!!