Действия Selenium dragAndDrop неожиданно переходит на страницу поиска Google

Question

Я пытался потренироваться с тестами перетаскивания на следующей странице https://www.seleniumeasy.com/test/drag-and-drop-demo.html

Вот код класса PageObject только с одним методом, который перетаскивает элемент из списка в зону сброса:

public class DragAndDropDemoPage extends Page {

    public DragAndDropDemoPage(WebDriver driver) {
        super(driver);
        navigateTo();
    }

    @Override
    public void navigateTo() {
        driver.get(Urls.DRAG_AND_DROP_PAGE_URL);
    }

    public void dragAndDropElementWithIndex(int index) {
        List<WebElement> elements = findElementsByCss("span[draggable=true]");
        new Actions(driver).dragAndDrop(elements.get(index), findElementByCss("div#mydropzone")).build().perform();
    }
}

после выполнения такого действия WebDriver в итоге переходит на страницу поиска Google. И поисковый запрос содержит имя элемента, который я перетащил.

Что не так с этим делом? Как WebDriver удалось перейти на другую страницу?

PS: Суперкласс Страница:

public abstract class Page {
    WebDriver driver;

    public Page(WebDriver driver) {
        this.driver = driver;
    }

    public abstract void navigateTo();

    protected WebElement findElementByCss(String cssSelector) {
        return driver.findElement(By.cssSelector(cssSelector));
    }

    protected List<WebElement> findElementsByCss(String cssSelector) {
        return driver.findElements(By.cssSelector(cssSelector));
    }

    protected WebElement findByXpath(String xpath) {
        return driver.findElement(By.xpath(xpath));
    }
}

Answer 1

Проблема : исходный элемент перемещается в положение мыши, а не в целевой элемент. Перетаскивание работает на другом веб-сайте, вы можете проверить здесь .
Когда вы запускаете скрипт, вероятно, ваша позиция мыши находится где-то рядом с панелью вкладок браузера, поэтому Google открывает (так же, как вы перетащили любой текст на панель браузера).

Вы можете попробовать решение @DebanjanB или использовать Робот .

Answer 2

Согласно HTML вы поделились WebElement , который вы хотите DragAndDrop() содержит атрибут draggable=true

---

перетаскиваемый

перетаскиваемый - это атрибут, который указывает, можно ли перетаскивать элемент, с собственным поведением браузера или с помощью HTML Drag and Drop API , draggable может иметь следующие значения:

• true: элемент можно перетаскивать.
• false: элемент нельзя перетаскивать.

Примечание : Этот атрибут перечислен и не является логическим. Значение true или false является обязательным, а сокращение как <img draggable> запрещено. Правильное использование: <img draggable="false">.

Если этот атрибут не задан, его значение по умолчанию равно auto, что означает, что поведение перетаскивания является поведением браузера по умолчанию: только выбор текста, изображения и ссылки могут быть втянутым Для других элементов событие ondragstart должно быть установлено для работы с перетаскиванием.

---

Native HTML5 Drag and Drop

Eri c Bidelman в статье Native HTML5 Drag and Drop , упомянутое, сделать объект перетаскиваемым просто, вам нужно только установить атрибут draggable=true для элемента Вы хотите сделать подвижным. Например:

<div id="cols">
  <div class="col" draggable="true"><header>X</header></div>
  <div class="col" draggable="true"><header>Y</header></div>
  <div class="col" draggable="true"><header>Z</header></div>
</div>

Чтобы разрешить перетаскивание других типов контента, вы можете использовать API HTML5 DnD. Тем не менее, с помощью CSS3 вы можете улучшить разметку, чтобы она выглядела как столбцы, а добавление курсора дает пользователям визуальный индикатор того, что что-то можно перемещать, но большинство браузеров создают призрачное изображение перетаскиваемого содержимого, а перетаскивание ничего не делает . Некоторые браузеры, в частности FF, требуют, чтобы в операции перетаскивания были отправлены данные .

Далее Реми Шарп в статье Перетаскивание Все, что упомянуто:

HTML 5 spe c говорит, что это должно быть так же просто, как добавить следующие атрибуты к разметке рассматриваемых элементов:

draggable="true"

Однако, это не работает полностью для Safari или Firefox. Для Safari вам нужно добавить следующий элемент к элементу:

[draggable=true] {
  -khtml-user-drag: element;
}

Это начнет работать в Safari, и при его перетаскивании будет установлено пустое значение по умолчанию с объектом dataTransfer. Однако Firefox не позволит вам перетащить элемент, если вы вручную не установите для него некоторые данные на go.

---

Решение

Чтобы решить эту проблему, нам понадобится Обработчик событий dragstart, и мы дадим ему некоторые данные, которые нужно перетаскивать с помощью:

var dragItems = document.querySelectorAll('[draggable=true]');

for (var i = 0; i < dragItems.length; i++) {
  addEvent(dragItems[i], 'dragstart', function (event) {
    // store the ID of the element, and collect it on the drop later on
    event.dataTransfer.setData('Text', this.id);
  });
}

---

Ссылки

Пара ссылок:

• Рабочая демонстрация перетаскивание чего-либо ( исходный код )
• Рабочий пример Drag and Drop