Share This
Связаться со мной
Крути в низ
Categories
//🎨 Как нарисовать смайлик и квадрат в онлайн-редакторе графики Paint с помощью Selenium

🎨 Как нарисовать смайлик и квадрат в онлайн-редакторе графики Paint с помощью Selenium

В этой статье напишем два скрипта, рисующих смайлик и квадрат в онлайн-версии Paint с помощью инструмента для автоматизации действий браузера Selenium.

kak narisovat smajlik i kvadrat v onlajn redaktore grafiki paint s pomoshhju selenium 3612071 - 🎨 Как нарисовать смайлик и квадрат в онлайн-редакторе графики Paint с помощью Selenium

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

В практике попадаются интересные и необычные задачи. Одной из таких задач является взаимодействие в UI c нестандартными элементами. Поэтому, придумаем задачу, которая на первый взгляд кажется сложной, но на деле оказывается достаточно простой. Пусть она будет звучать так: нарисовать в онлайн-версии программы Paint простой рисунок.

Составим план выполнения задачи:

  1. Открыть Online Paint.
  2. Нарисовать рисунок.
  3. Сохранить его на компьютер.

Перед тем как писать сам тест, нужно подготовить окружение. Это достаточно рутинная задача при создании новых тестов или тестовых проектов, поэтому не буду расписывать долго подготовку окружения к написанию UI теста на Selenium, а составлю чек-лист, чтобы можно было проверить, что мы ничего не забыли (добавлю только, что в этот раз мы напишем скрипт на языке программирования Java и, соответственно, окружение создадим для него):

  1. Добавить Selenium и Junit в pom file:
             <dependencies>         <dependency>             <groupId>org.seleniumhq.selenium</groupId>             <artifactId>selenium-java</artifactId>             <version>3.141.59</version>         </dependency>         <dependency>             <groupId>junit</groupId>             <artifactId>junit</artifactId>             <version>4.12</version>             <scope>test</scope>         </dependency>     </dependencies>      

2. Скачать дистрибутив Selenium в main/resources (в этом тесте у меня chromdriver):

kak narisovat smajlik i kvadrat v onlajn redaktore grafiki paint s pomoshhju selenium e101542 - 🎨 Как нарисовать смайлик и квадрат в онлайн-редакторе графики Paint с помощью Selenium

3. Написать метод для подключения дистрибутива (для удобства вынесу в @Before):

             @Before     public void start(){         DesiredCapabilities capabilities = new DesiredCapabilities();         capabilities.setCapability(CapabilityType.PAGE_LOAD_STRATEGY, "eager");         ChromeOptions options = new ChromeOptions();         options.addArguments("--disable-extensions");         System.setProperty("webdriver.chrome.driver", "src/main/resources/chromedriver");         options.addArguments("--start-maximized");         options.addArguments("--remote-debugging-port=9222");         driver = new ChromeDriver(options);     }     

4. Написать метод закрытия WebDriver:

             @After     public void stop(){         driver.quit();         driver = null;     }      

Окружение готово, можно приступим к выполнению. Откроем сайт https://jspaint.app/ и с помощью панели разработчика посмотрим, что же это за элемент используется на сайте, на котором предстоит рисовать.

kak narisovat smajlik i kvadrat v onlajn redaktore grafiki paint s pomoshhju selenium 46ab05d - 🎨 Как нарисовать смайлик и квадрат в онлайн-редакторе графики Paint с помощью Selenium

Оказывается, это canvas. Canvas – элемент HTML5, предназначенный для создания растрового двухмерного изображения с помощью скриптов, обычно на языке JavaScript.

Для пробы пера напишем сначала простой тест для проверки способов взаимодействия с элементом:

             @Test     public void simplePaint(){         driver.get("https://jspaint.app/");          WebElement canvas = driver.findElement(By.xpath("//canvas[@class='main-canvas']"));           driver.findElement(By.xpath("//div[@title='Кисть']/span")).click();          Actions builder = new Actions(driver);         builder.clickAndHold(canvas).moveByOffset(0, -100).                 moveByOffset(-100,0).                 moveByOffset(0,100).                 moveByOffset(100,0).release().perform();     }     

Пробный тест прошел легко. Его результат можно увидеть на gif-изображении:

kak narisovat smajlik i kvadrat v onlajn redaktore grafiki paint s pomoshhju selenium 5cc8bca - 🎨 Как нарисовать смайлик и квадрат в онлайн-редакторе графики Paint с помощью Selenium

Больше полезной информации вы найдете на нашем телеграм-канале «Библиотека тестировщика». Интересно, перейти к каналу

Теперь усложним задачу – нарисуем смайлик.

Шаги, которые будут выполняться в тесте:

  1. Открыть Online Paint.
  2. Нарисовать смайлик.
  3. Сохранить полученную картинку.

В первом тесте мы получали картинку, двигая пером по заданным координатам. Нарисовать сложную картинку таким способом не так просто. Поэтому можно поменять способ взаимодействия с этим элементом и отправить итоговое изображение с помощью JavascriptExecutor. JavascriptExecutor – это интерфейс Selenium, который позволяет взаимодействовать напрямую с HTML DOM веб-страницы и делает это, выполняя код на JavaScript. Такой способ значительно ускоряет выполнения теста, но теряется полная идентичность действиям пользователя. Является ли это плюсом или минусом – решать вам. В любом случае использование JavascriptExecutor может пригодиться в других тестах, поэтому полезно уметь пользоваться им на практике.

По намеченному плану получается такой код:

          @Test     public void paintSmile(){ // открываем сайт онлайн пейнта         driver.get("https://jspaint.app/"); // рисуем смайлик         if (driver instanceof JavascriptExecutor) {             ((JavascriptExecutor)driver).executeScript("var canvas = document.getElementsByClassName("main-canvas");n" +                     "console.log(canvas);" +                     "ctx.beginPath();"+                     "ctx.arc(75,75,50,0,Math.PI*2,true);"+                     "ctx.moveTo(110,75);"+                     "ctx.arc(75,75,35,0,Math.PI,false);"+                     "ctx.moveTo(65,65);"+                     "ctx.arc(60,65,5,0,Math.PI*2,true);"+                     "ctx.moveTo(95,65);"+                     "ctx.arc(90,65,5,0,Math.PI*2,true);"+                     "ctx.stroke();");         } else {             throw new IllegalStateException("This driver does not support JavaScript!");         } // сохраняем картинку         driver.findElement(By.xpath("//div[@class='menu-button файл-(f)-menu-button']")).click();         driver.findElement(By.xpath("//tr[3]")).click();         driver.findElement(By.xpath("//button[.='Сохранить']")).click();     }      

После выполнения теста можно увидеть такую картинку:

kak narisovat smajlik i kvadrat v onlajn redaktore grafiki paint s pomoshhju selenium f1e27c4 - 🎨 Как нарисовать смайлик и квадрат в онлайн-редакторе графики Paint с помощью Selenium

Оказалось, нарисовать картинку в онлайн-Пейнте несложно. Нужно всего-то понять, с каким элементом взаимодействовать и выбрать правильный метод этого взаимодействия.

Выводы

Самые необычные задачи – самые интересные. Но и они всегда выполняются по шагам. Если декомпозировать задачу, то ее выполнение значительно облегчается. Да, во время работы сталкиваешься с определенными трудностями, но это того стоит. Трудности закаляют. Удачи!

Материалы по теме

  • Переносим треки из Яндекс.Музыки в Spotify с помощью Python
  • Создайте автотест Web UI на Python и Selenium за 7 шагов: инструкция для новичков
  • Обучение на тестировщика: как освоить востребованную профессию в 4 этапа?

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Связаться со мной
Close