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

shukhov

Регистрация: 14 фев 2017
Offline Активность: 21 июн 2019 06:52
*----

Мои темы

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

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();
}
}