Как используя WebDriver vs javaScript кликать в конкретные точки canvas элемента

canvas
javascript
webdriver
Теги: #<Tag:0x00007fedbfce9cd0> #<Tag:0x00007fedbfce9ac8> #<Tag:0x00007fedbfce9898>

(Oleh Haistruk) #1

Вот такой код, находит санвас и кликает в его центре. (Как и на любом другом элементе)

var canvas = driver.findElement(By.xpath(".//*[@id=‘mainCanvas’]/div/div[1]/canvas"));
driver.actions().mouseMove({‘x’: 100, ‘y’: 100}).click(canvas).perform();

Игнорируя координаты.

Вопрос! Как кликать в конкретную координату на канвасе?


(Ray Romanov) #2

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

  1. перемещаем мышь в левый верхний угол элемента (вроде по умолчанию мовемаус туда перемещает если передать элемент)
  2. перемещаем мышь на нужное кол-во куда надо, не знаю тут есть ли относительное смещение
  3. кликаем левой кнопкой мыши
  4. освобождаем клик
  5. перформ

(Bolatbek) #3
driver.actions()
    .mouseMove(canvas, {
        x: 100,
        y: 50
    })
    .click()
    .perform()

(Oleh Haistruk) #4

Я написал, что кликает в центре. Логика примерно понятна. Как реализовать это в коде?


(Oleh Haistruk) #5

Работает! :scream:
Обьясните не знающим, в чем разница между моей записью и вашей?? Я имею в виду только размещение canvas играет роль?


(Ray Romanov) #6

Там все просто:

.mouseMove(canvas, {
        x: 100,
        y: 50
    })

перемещаем мышку относительно левого верхнего угла элемента canvas на 100 точек в право и 50 точек в низ…
это п.1 и п.2 в одном лице :slight_smile:


(Bolatbek) #7

Читайте документацию. Вот в чем разница.
mouseMove() принимает два параметра на входе. Сам вебэлемент (или координаты) и координаты смещения (offset). Вы передали какие-то координаты.

this.mouseMove( location, opt_offset )

click() - может принимать webelement, вот вы ему и скормили webelement и кликнули по его центру, а до него сделали смещение mouseMove(), которое уже роли не играет.

this.click( opt_elementOrButton, opt_button )

(Bolatbek) #8

http://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/lib/actions_exports_ActionSequence.html#mouseMove


(Тарас Буряк) #9

Ребята, подскажите, а если canvas длиннющий и прячется под скроллом, что можно придумать.


(Bolatbek) #10

Купить widescreen 4k монитор)))


(Oleh Haistruk) #11

Спасибо! Подскажите ресурсы, где можно поучиться автоматизации с нуля на webdriver + js.


(Bolatbek) #12

А какой фреймворк используется?


(Oleh Haistruk) #13

Цель - автоматизация фронтенда игры на JS. И возможно бекенда.

Фреймворк. Пока никакой. что посоветуете?


(Bolatbek) #14

Ничего не посоветую.
Посоветую бежать от JS ))).
Перейти на Python(pytest)/Java(selenide).


(Oleh Haistruk) #15

почему не JS?


(Bolatbek) #16

Слишком много танцев.