Перейти к содержимому

Тестирование REST API
онлайн, начало 26 августа
Автоматизация функционального тестирования
онлайн, начало 30 августа
Азбука IT
онлайн, начало 28 августа
Python для начинающих
онлайн, начало 29 августа
Фотография

Drag and drop внутри canvas элемента в хроме

selenium

  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 shukhov

shukhov

    Новый участник

  • Members
  • Pip
  • 2 сообщений
  • ФИО:Шухов Владимир Григорьевич


Отправлено 03 Май 2019 - 21:08

Всем привет.
Может быть кто-нибудь сталкивался с такой проблемой:
Есть форма редактирования изображения - можно двигать картинку внутри прямоугольника, таким образом выбирая какая область изображения будет использована для аватарки. Небольшое видео того, что нужно сделать: https://www.dropbox.....31 PM.mov?dl=0 а вот ссылка на демо элемента: https://react-avatar...or.netlify.com/
 
Проблема в том, что не получается повторить такое поведение в хроме при помощи Actions. То есть код отрабатывает без ошибок, но картинка не перемещается внутри канваса.
При этом я точно проверил что действие происходит в нужной области (внутри элемена canvas).
 
ВАЖНО: такой же код отрабатывает в firefox.
 
Вот пример кода, который воспроизводит проблему в хроме:
package com.oxagile.project.web.tests.userprofile;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

import java.util.concurrent.TimeUnit;

public class TestTest {

public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "libs/chromedriver");
WebDriver wd = new ChromeDriver();
wd.manage().window().maximize();
wd.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
wd.get("https://react-avatar-editor.netlify.com/");
WebElement canvas = wd.findElement(By.cssSelector("canvas.editor-canvas"));
Actions builder = new Actions(wd);
Action dragAndDrop = builder
.moveToElement(canvas, 10, 10)
.pause(2000)
.clickAndHold()
.pause(2000)
.moveToElement(canvas, 100, 100)
.pause(2000)
.release()
.build();
dragAndDrop.perform();
wd.quit();
}
}

  • 0

#2 shukhov

shukhov

    Новый участник

  • Members
  • Pip
  • 2 сообщений
  • ФИО:Шухов Владимир Григорьевич


Отправлено 04 Май 2019 - 06:44

Добавление элемента в сигнатуру методов clickAndHold() и release() решило проблему в хроме. В таком случае метод moveToElement(canvas, 0, 0) становится лишним, так как clickAndHold(canvas) все равно кликает в центр элементаВот работающая цепочка:

builder
.clickAndHold(canvas)
.moveByOffset(100, 100)
.release(canvas)
.build()
.perform(); 

Но тогда появляется проблема в Firefox:

clickAndHold(canvas).moveByOffset(100, 100) - перетаскивает элемент как мне нужно, но затем release(canvas) метод возвращает картинку практически в начальное положение.

 

То есть в теории я бы все таки ожидал, что начальная цепочка должна отрабатывать в хроме:

builder
.moveToElement(canvas, 0, 0)
.clickAndHold()
.moveToElement(canvas, 100, 100) //или .moveByOffset(100, 100)
.release()
.build()
.perform();

Может быть кто-то сможет посоветовать вариант, который отработает в обоих браузерах?


  • 1


Selenium 2.0: стартовый уровень
онлайн
Программирование на Java для тестировщиков
онлайн
Автоматизация функционального тестирования
онлайн
Selenium WebDriver: полное руководство
онлайн




Темы с аналогичным тегами selenium

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

Яндекс.Метрика
Реклама на портале