День добрый. Пошла вторая неделя войны с 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
Опишу сценарий происходящий в момент перетаскивания элемента.
- В 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
-
В момент когда мы перетягиваем элемент в ифрейм у строки :
срабатывает 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();
Не работает.
- Пробовал несколько способов с помощью Javascript - ни один не
срабатывает. Какие конкретно уже не вспомню, слишком много их было. - В данный момент пробую с помощью jquery-simulate (jquery-simulate-ext/drag-n-drop.md at master · j-ulrich/jquery-simulate-ext · GitHub) - элемент захватывать получается, контейнеры становятся активными, но навестись на них и отпустить мышь не получается.
Подскажите как победить этот drag’n’drop!