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

Фотография

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

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

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