Как найти координаты кнопок на холсте и нажать на них после использования Java и Selenium? - PullRequest
1 голос
/ 26 января 2020

У меня есть онлайн-калькулятор, для которого я хочу автоматизировать некоторые операции, такие как вычитание, деление и т. Д. c. но дело в том, что нет никаких элементов, так как это калькулятор приложения холста (ссылка ниже). Мне интересно, как я могу нажимать кнопки, чтобы иметь возможность автоматизировать некоторые операции?

Онлайн-калькулятор, который я пытаюсь автоматизировать:

https://www.online-calculator.com/full-screen-calculator/

холст HTML код

<canvas id="canvas" width="335" height="434" style="position: absolute; display: block; background-color: rgb(255, 255, 255); width: 167.939px; height: 217px;"></canvas>

мой селен - Java код

driver.get("https://www.online-calculator.com/full-screen-calculator/");
driver.manage().window().maximize();        
WebElement li = driver.findElements(By.tagName("iframe")).get(0);
driver.switchTo().frame(li);        
WebElement canv = driver.findElements(By.tagName("canvas")).get(0);
System.out.println(canv.getSize());
System.out.println(canv.getLocation());

try {
 Actions builder = new Actions(driver);
 builder.moveToElement(canv, x, y);
 builder.click();
 builder.perform();
    } catch (Exception e) 
    {
      // do nothing
    }

Итак, как вы видите в приведенном выше коде, мне все еще нужно найти x и y операций, которые я хочу выполнить. Например, как я могу найти координаты кнопок 10, 4 и операции вычитания «-», если я хочу вычислить «10 - 4», а затем проверить, что оно равно 6. Любая помощь будет принята с благодарностью. Спасибо:)

Примечание: Ширина, высота и местоположение холста изменятся, если размер окна изменится ((Я подумываю позже о блокировке размера окна, поэтому мои тесты не будут нестабильными на разных экранах) )).

Ответы [ 2 ]

2 голосов
/ 27 января 2020

Элемент <canvas> находится в пределах <iframe>. Таким образом, чтобы вызвать click() для элементов в <canvas>, вам необходимо:

  • Induce WebDriverWait , чтобы требуемый кадр был доступен и переключиться на него .
  • Induce WebDriverWait для желаемого элемента, по которому можно кликать .
  • Можно использовать следующее решение:

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

      driver.get("https://www.online-calculator.com/full-screen-calculator/")
      new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("fullframe")));
      WebElement canvas = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("canvas")));
      

HTML5 Канва

Элемент является только контейнером для графики и представляет собой прямоугольную область angular на странице HTML. По умолчанию холст не имеет границ и содержимого. Тем не менее, атрибут id (для ссылки в сценарии), атрибут width и height задаются для определения размера холста. Чтобы добавить границу, используется атрибут style. Пример:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Холст HTML - это двумерная сетка. Верхний левый угол холста имеет координаты (0,0).

В статье Автоматическое тестирование HTML5 Приложения Canvas с Selenium WebDriver @ Аарон Малдер упоминает, взаимодействуя с элементы в <canvas> возможны с использованием поддержки событий из действий Класс API:

Но не на 100% надежнее, как каждый mouse down , mouse up или mouse click происходит в центре элемента. Таким образом, приведенный выше код создает событие mouse move с указанными координатами (x, y), а затем событие mouse move в центре <canvas> затем mouse down, mouse up и click в центре <canvas>. Это должно было бы подойти для <button>, но не стоит для <canvas>, где вы хотите иметь возможность щелкнуть в указанном c месте.

Обходной путь - отправить синтезированную мышь события, использующие JavaScript следующим образом:

// pageX and pageY are offsets which you need to know through mouse coordinates.
((JavascriptExecutor)driver).executeScript("var evt = $.Event('click', { pageX: " + x +
   ", pageY: " + (y + 55) + " } );" +
   "$('#myCanvas').trigger(evt);");

Однако, чтобы щелкнуть мышью по элементам в <canvas>, вы можете спокойно использовать в качестве события mouse move хорошо работает в Firefox, и вы можете избежать использования координат мыши в качестве обработки события следующим образом:

new Actions(driver).moveToElement(
   canvas, xWithinCanvas, yWithinCanvas).perform();
((JavascriptExecutor)driver).executeScript("$('#canvas').click();");

Этот сценарий использования

Для автоматизации подраздел операция напр. 3 - 1 = с использованием Selenium вы можете использовать следующие решение:

  • Блок кода:

    driver.get("https://www.online-calculator.com/full-screen-calculator/");
    new WebDriverWait(driver, 10).until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.id("fullframe")));
    WebElement canvas = new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("canvas")));
    //clicking on 3
    new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset(0,(255/6)*3).click().build().perform();
    //clicking on the substract sign (-)
    new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset((174/5)*2,(255/6)*3).click().build().perform();
    //clicking on 1
    new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset(-(174/5)*4,(255/6)*3).click().build().perform();
    //clicking on equals to sign (=)
    new Actions(driver).moveToElement(canvas, 0, 0).moveByOffset((174/5)*4,(255/6)*4).click().build().perform();
    
  • Видео выполнения:

AutomatingCanvasSelenium


Ссылка

Вы можете найти несколько подробных обсуждений в:

1 голос
/ 27 января 2020

Я думаю, вы сталкиваетесь с трудностями при поиске координат элемента. Чтобы их было легко найти, понадобится несколько плагинов для каждого браузера. Для chrome вы можете использовать Page Ruler , а для Firefox вы можете использовать MeasureIt . Используя эти инструменты, вы можете получить координаты конкретного элемента. После этого вы можете легко нажать на эти элементы. Посмотрите следующее видео о том, как использовать MeasureIt в firefox (следите за 11:45 минутами).

Нахождение координат конкретного элемента с помощью Firefox Плагин MeasureIt

А другая ваша забота - как найти координаты изменения размера экрана? как правило, будут иметь стандартные размеры экрана для каждого монитора или ноутбука. Итак, сначала получите размер экрана, используя селен, а затем вы можете использовать , если условие для каждого размера экрана. Значит, если размер примерно 800 * 1200, используйте эти координаты, в противном случае используйте некоторые другие координаты для каждого размера экрана.

...