Как выполнить прокрутку колеса мыши по холсту HTML5 в Selenium? - PullRequest
Новая
       31

Как выполнить прокрутку колеса мыши по холсту HTML5 в Selenium?

0 голосов
/ 21 ноября 2018

Я работаю над приложением GWT (аналогично Paint).В этом у меня есть HTML5 Canvas, в котором есть функция прокрутки колесика мыши вверх и вниз, чтобы увеличивать и уменьшать масштаб холста.

Я много искал, но не нашел обходного пути, чтобы исправитьЭта проблема.Вот что сделал: 

int PosX = 0;
int PosY = 10;
JavascriptExecutor executor = (JavascriptExecutor) getDriver();
String script = "document.getElementById('frontCanvas').scrollBy("
                                + PosX + "," + PosY + ")";
executor.executeScript(script); 

WebDriverWait wait = new WebDriverWait(getDriver(), 20);
wait.until(ExpectedConditions.javaScriptThrowsNoExceptions(script));

Теперь этот код работает для другого приложения Angular, в котором я прокручиваю вверх и вниз элемент div (который имеет полосу прокрутки), но он не работает на моем холсте (который не имеет полосы прокрутки) в приложении GWT.

Я использую Selenium 3.14.0 и запускаю этот код в браузере Chrome.Кто-нибудь может подсказать, что можно сделать, чтобы решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 04 декабря 2018

HTML5 Canvas

Элемент HTML используется для рисования графики на лету с помощью JavaScript.Элемент является только контейнером для графики.Вы должны использовать JavaScript, чтобы на самом деле рисовать графику.В Canvas есть несколько способов рисования контуров, прямоугольников, окружностей, текста и добавления изображений.

В общем случае scroll колесо мыши вверх и вниз мы могли бы выбрать Действия Класс.Но, согласно Автоматическому тестированию приложений HTML5 Canvas с Selenium WebDriver , этот API не настолько надежен.В Firefox каждый mouse down, mouse up или mouse click происходит в центре элемента.Таким образом, приведенный выше код создает событие mouse move для предоставленного ( x , y ), затем событие mouse move в центре холста, затем mouse down,mouse up и click все в центре холста.Это может быть хорошо для кнопки, но не работает для Canvas , где вы хотите иметь возможность hover, click и т. Д. В определенном месте.Ситуация еще хуже в Safari, где он просто создает исключение, указывающее, что события перемещения мыши не поддерживаются.Chrome, тем временем, работает нормально.

Альтернатива

Обходным путем будет использование интерфейса JavascriptExecutor , вручную отправляющего события синтезированной мыши с использованием JavaScript.

Возьмите лист из ответа @ FlorentB. , чтобы прокрутить колесико мыши вверх и вниз ,Вы можете отправить mouseover , mousemove и wheel events в верхний элемент с инъекцией скрипта, и вы можете использовать следующее решение:

  • Кодовый блок: 

    package demo;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebDriverException;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;

public class Canvas {

    static WebDriver driver;
    public static void main(String[] args) {

        System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
        ChromeOptions options = new ChromeOptions();
        options.addArguments("start-maximized");
        options.addArguments("disable-infobars");
        options.addArguments("--disable-extensions");
        driver = new ChromeDriver(options);
        driver.get("https://www.google.co.uk/maps");
        WebElement elm = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("#scene > div.widget-scene > canvas")));
        // Mouse wheel UP or Zoom In 
        wheel_element(elm, -500, 0, 0);
        System.out.println("Mouse wheel UP or Zoom In through Wheel achieved !!!");
        // Mouse wheel DOWN or Zoom Out 
        wheel_element(elm, 120, 0, 0);
        System.out.println("Mouse wheel DOWN or Zoom Out through Wheel achieved !!!");
        System.out.println("Mouse Scroll through Wheel achieved !!!");
    }

    public static void wheel_element(WebElement element, int deltaY, int offsetX, int offsetY)
    {
        try{
              String script = "var element = arguments[0];"
                +"var deltaY = arguments[1];"
                +"var box = element.getBoundingClientRect();"
                +"var clientX = box.left + (arguments[2] || box.width / 2);"
                +"var clientY = box.top + (arguments[3] || box.height / 2);"
                +"var target = element.ownerDocument.elementFromPoint(clientX, clientY);"
                +"for (var e = target; e; e = e.parentElement) {"
                  +"if (e === element) {"
                +"target.dispatchEvent(new MouseEvent('mouseover', {view: window, bubbles: true, cancelable: true, clientX: clientX, clientY: clientY}));"
                +"target.dispatchEvent(new MouseEvent('mousemove', {view: window, bubbles: true, cancelable: true, clientX: clientX, clientY: clientY}));"
                +"target.dispatchEvent(new WheelEvent('wheel',     {view: window, bubbles: true, cancelable: true, clientX: clientX, clientY: clientY, deltaY: deltaY}));"
                +"return;"
                  +"}"
                +"}";  

              WebElement parent = (WebElement) ((JavascriptExecutor) driver).executeScript("return arguments[0].parentNode;", element);
              ((JavascriptExecutor) driver).executeScript(script, parent, deltaY, offsetX, offsetY);
            }catch(WebDriverException e)
            {
            System.out.println("Exception caught in Catch block");
            }
    }

}

  • Выход на консоль: 

    Mouse wheel UP or Zoom In through Wheel achieved !!!
Mouse wheel DOWN or Zoom Out through Wheel achieved !!!
Mouse Scroll through Wheel achieved !!!
0 голосов
/ 29 ноября 2018

Это будет прокручивать определенную на текущей странице, используя JS 

JavascriptExecutor executor = (JavascriptExecutor) getDriver();
executor.executeScript("window.scrollBy(" + start + "," + end + ")");

, иначе вы можете прокрутить, пока WebElement не будет найден, например: 

WebElement x;
JavascriptExecutor executor = (JavascriptExecutor) getDriver();
getJs().executeScript("arguments[0].scrollIntoView();", x);

Спасибо,

...