День добрый. Пошла вторая неделя войны с drag'n'drop. Решил спросить у сообщества.
Итак:
Используемые средства:
Selenium.WebDriver 2.44.0
WebDriver.ChromeDriver.win32 2.13.0.0
Браузер Chrome последняя версия.
Код на C#, используется Page object pattern, предыдущим тестировщиком написан фреймворк, обёртка над Селениумом.
Есть .net cms. В ней есть редактор страниц. Редактор открывается в одной странице, в iframe подгружается редактируемая страница. Iframe подгружается через div с того же домена.
Нужно с помощью drag'n'drop перетягивать элементы(картинки, видео, и пр.) в определённые контейнеры в iframe. Насколько я понял из кода страницы используется Jquery(один из js подгруженых в страницу - /* This file contains following files: jQuery 1.11.1 + jQuery UI 1.10.4 + jQuery Migrate 1.2.1 */).
Доступ к редактору предоставить я не могу, доступ только из внутренней сети.
Часть кода: http://screencast.com/t/ArEk54ue
Опишу сценарий происходящий в момент перетаскивания элемента.
1. В parent контенте выбираем нужный элемент id=someelement. (В коде строчка <div class="dragin-controls dragin-control-helper Active"> неактивна).
</div></div>)
2. Зажимаем его мышкой и тянем в ифрейм.
3. В коде parent страницы появляется такая строчка:
<div class="ui-draggable-iframeFix" style="width: 1920px; height: 355px; position: absolute; opacity: 0.001; z-index: 1000; top: 319px; left: 0px; background: rgb(255, 255, 255);"></div>
4. У строки из первого шага появляется дочерний элемент, он же наша картинка которую мы держим мышкой. Position меняется если двигать элемент. Выглядит код вот так:
<div class="dragin-controls dragin-control-helper Active">
<div id="ControlContainer_ctl01_SimpleImage237" class="control-item dragin Image inline-child ui-draggable dragin-helper ui-draggable-dragging" data-tooltip-text="Træk og slip for at indsætte" style="position: absolute; left: 124px; top: 589px;">
<img src="/CustomerData/Files/Images/Archive/97-wq/testimagefile_942.jpg" style="width:50px;height:50px;">
</div></div>
Или наглядней в коде: http://screencast.com/t/Cio4knwp
5. В момент когда мы перетягиваем элемент в ифрейм у строки :
<div id="DropInner" style="position: absolute; left: 0px; top: 0px; z-index: 996; width: 100%; height: 1px;"></div> срабатывает onmouseover и появляются дочерние элементы. См. скрин:
http://screencast.com/t/cpj3ihlE959
В момент наведения мышки с элементом контейнер меняет цвет на зелёный.
Код контейнера в ифрейм имеет такой вид:
http://screencast.com/t/Z6QBD6IYuB
Что я пробовал делать:
1. Простой drag'n'drop не срабатывает т.к. target элемент находится во фрейме.
2. Drag'n'drop по координатам, не работает вообще.
3. Drag'n'drop с помощью Actions:
MoveToElement выглядит так:
public Actions MoveToElement(IWebElement element)
{
var builder = new Actions(Webdriver);
return builder.MoveToElement(element);
}
Выжимка из теста:
source - картинка которую мы хватаем мышкой изначально.
target - контейнер куда мы перетаскиваем элемент.
WrapperSelenium.MoveToElement(source)
.ClickAndHold(source)
.Build()
.Perform();
WrapperSelenium.SwitchToFrame("WebsiteFrame");
WrapperSelenium.MoveToElement(target)
.Release(target)
.Build()
.Perform();
Не работает.
4. Пробовал несколько способов с помощью Javascript - ни один не срабатывает. Какие конкретно уже не вспомню, слишком много их было.
5. В данный момент пробую с помощью jquery-simulate (https://github.com/j...drop.md#iframes) - элемент захватывать получается, контейнеры становятся активными, но навестись на них и отпустить мышь не получается.
Подскажите как победить этот drag'n'drop!