Есть отличная удаленная работа для php+codeception+jenkins+allure+docker спецов. 100% remote! Присоединиться к проекту

[Resolved] Drag'n'drop из parent в iframe


(Andrew Legionov) #1

День добрый. Пошла вторая неделя войны с 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

  1. В момент когда мы перетягиваем элемент в ифрейм у строки :

срабатывает 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();

Не работает.

  1. Пробовал несколько способов с помощью Javascript - ни один не
    срабатывает. Какие конкретно уже не вспомню, слишком много их было.
  2. В данный момент пробую с помощью jquery-simulate (https://github.com/j-ulrich/jquery-simulate-ext/blob/master/doc/drag-n-drop.md#iframes) - элемент захватывать получается, контейнеры становятся активными, но навестись на них и отпустить мышь не получается.

Подскажите как победить этот drag’n’drop!


(vmaximv) #2

В других браузерах пробывали?
https://code.google.com/p/chromedriver/issues/detail?id=841

И ОС укажите.

Теоретически, при нативных эвентах, все должно прокатывать через координаты и Actions. Только надо предварительно получить onScreen координаты “внутрифреймового” элемента.


(Andrew Legionov) #3

Windows 7 x64.
Я пробовал ещё в FF, с IE и запуском тестов у меня другая проблема. Насколько я помню в FF тоже не заработало.

Баг по ссылке я нашёл где-то на второй день поисков :frowning:


(Максим Малунов) #4

Я бы попробовал поключить Sikuli библиотеку .


(Andrew Legionov) #5

Слишком там наворочено кода, решил воспользоваться AutoIt


(Sergey Korol) #6

Кода там - просто воротить / не переворотить…

Region desktop = new Region(new Rectangle(Toolkit.getDefaultToolkit().getScreenSize()));
Pattern drag = new Pattern(firstImagePath).similar(defaultSimilarity);
Pattern drop = new Pattern(secondImagePath).similar(defaultSimilarity);

try {
    desktop.dragDrop(drag, drop);
} catch (FindFailed findFailed) {
//...
}

(Andrew Legionov) #7

Спасибо, но это код в java насколько я понимаю, мне бы его в C# перевести как-то. Или хотя бы примером ткнуть


(Sergey Korol) #8

Вот тут постили обертку, но я не уверен, что она up-to-date.


(Andrew Legionov) #9

Я установил в студию SikuliIntegrator, там всё из обёртки.
Не совсем понятно как находить pattern. На указанной вами странице с обёрткой советуют писать путь к папке с картинкой, у меня же картинка на сайте.


(Andrew Legionov) #10

“Чукча не читатель” - вобщем сам понял как это делать.


(Dmitry Bogatko) #11

если не жалко, поделитесь решением. Чем по итогу воспользовались? Sikuli?


(Andrew Legionov) #12

Нет, вернулся всё-таки к AutoIt. Sikuli мне не подходит, хотя вариант хороший.


(Dmitry Bogatko) #13

Автоит используете как запуск выполненного exe? Спрашиваю, т.к. знаю что есть c# обертка позволяющая писать автоитовский скрипт прямо в проекте.


(Dmitry Bogatko) #14

(Andrew Legionov) #15

да, в данный момент запускаю ехе файл. спасибо за ссылку - почитаю.