硒拖放JQuery元素 [英] Selenium drag and dropping a JQuery element

问题描述

我正在尝试使用Selenium的Action类将JQuery嵌套可排序列表中的源元素拖放到另一个元素.我使用了标准的dragAndDrop方法，并将其分解为clickAndHold，moveToElement和release，但这些方法均无效.我什至尝试使用内部子元素的source元素进行拖动，但结果是相同的.

I am trying to use Selenium's Action class to drag and drop a source element that is inside a JQuery nested sortable list to another element. I have used the standard dragAndDrop method as well as broken it down to clickAndHold, moveToElement, and release but neither of those work. I even tried using the source elements inner child to drag but the result is the same.

当我运行脚本时，测试将通过并返回，因此我知道已找到元素并且选择器有效.Selenium认为拖放操作有效，但是当我观察测试时，却看不到任何动作.我已经与一些开发人员确认，我确实针对的是将正确的源元素拖到与DOM相关的程度.

When I run the script the test comes back as passed so I know the elements are being found and the selectors are valid. Selenium thinks the drag and drop operation worked but when I observe the test, I see no action what so ever. I have confirmed with a few developers that I am indeed targeting the right source element to drag as far as the DOM is concerned.

我在执行操作之前尝试使用build()方法，甚至通过休眠线程来减慢测试速度，但结果是相同的.

I have tried using the build() method before performing the action and even slowed down the test by sleeping the thread but the result is the same.

我还添加了需要将源放入其中的目标位置.我还应该提到源元素(在拖动事件中)创建了一个sorting-ghost对象，并且该THAT对象在用户手动将其拖动到目标元素时复制到目标元素容器中.

EDIT 2: I have also added the destination where the source is needed to be dropped into. I should also mention the source element (on drag event) has a sortable-ghost object created and THAT object what is copied into the destination element container when a user manually drags it into the destination element.

这是我要拖到的目标容器.

This is the destination container I am trying to drag to.

<div class="schedDayItem anytimeSection" data-bind="nestedSortable: { 
    foreach: AutoEvents, options: { animation: 600, group: 
   'autoevents', scroll: true, onStart: EnableDragging, onEnd: 
    DisableDragging } }" style="min-height: 60px; position: relative;
    cursor: pointer;"></div>

这是我要拖动的元素的父级.这是JQuery嵌套的可排序列表:

Here is the parent of the element I want to drag. It is the JQuery nested sortable list:

<div class="listDayItem anytimeSection" style="font-size: 14px;" 
    data-bind="nestedSortable: { foreach: EventList, options: { animation:
    600, group: { name: 'draggbleevents', pull: 'clone', put: false }, 
    onEnd: $root.GetBaseEvents, sort: false } }">

这是我要移动的源元素，嵌套的sortables直接子元素:

And here is the source element I am trying to move, the nested sortables direct child:

<div class="draggableEventItem pointer" style="margin: 3px 0; border-
    radius: 3px;">

为了完整起见，我要移动的源元素的内部子元素:

And just for completeness, the inner child of the source element I want to move:

<div id="container" data-bind="class: EventType, style: { backgroundColor: 
    EventBackground }" style="background-color: white; border: 1px solid 
    #AAA; padding: 4px 0; border-radius: 3px;" class="border-left-red">

这是我要在代码中尝试做的事情:

Here is what I am trying to do in code:

    Actions action = new Actions(driver);
    //eventAlert is the element I am trying to move.
    //eventName is a string I am using to find the right element in the JQuery List.  One of the source elements inner children provide this string.

    List<WebElement>list = driver.findElements(eventAlert);
    for(WebElement we : list){
        if(we.getText().contains(eventName)){
            action.dragAndDrop(we, driver.findElement(eventElementTarget)).perform();
            break;
        }
    }

推荐答案

虽然我不知道如何使dragAndDrop方法在此特定问题中起作用，但我确实通过使用Javascript中的push操作找到了解决方法.我将继续进行实验，以查看嵌套的可排序jQuery列表是否与硒无关，但就目前而言，这种解决方法是可靠的.

While I couldn't figure out how to get dragAndDrop method working in this particular problem, I did find a way around it by using the push action in Javascript. I'll continue experimenting to see if maybe a nested sortable jQuery list is buggy with selenium but for now, this workaround is solid.

下面，我像以前一样创建一个列表，但是这次使用计数器作为迭代设备.我正在搜索AutoSequenceItems并将其推到事件"列表中，该列表是我的目标容器.这种方法需要知道站点的实际Javascript，但是如果与开发人员一起工作，则在大多数情况下应该不是问题.这只是可能的解决方法的一个示例，其他人的站点中将没有AutoSequenceItems等.

Below I create a list as I did before but this time use a counter as an iteration device. I am searching AutoSequenceItems and pushing them to the Event list which is my destination container. This method requires knowing the actual Javascript of the site but if working along side developers, it shouldn't be a problem in most cases. This is just an example of a possible workaround, others will not have AutoSequenceItems and such in their site.

    List<WebElement>list = driver.findElements(eventListItem);
    int counter = 0;
    for(WebElement we : list){
        if(we.getText().contains(eventName)){
            js.executeScript("return AutonEdit.Main.AutoSequenceItems()[0]"
                    + ".AutoEvents.push(AutoEdit.Main.EventList()[" + counter +"]);");
            break;
        }
        counter++;
    }

这篇关于硒拖放JQuery元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！