🎨 Как нарисовать смайлик и квадрат в онлайн-редакторе графики 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):

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/ и с помощью панели разработчика посмотрим, что же это за элемент используется на сайте, на котором предстоит рисовать.

Оказывается, это 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-изображении:

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

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

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();
    }

    

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

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

Выводы

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

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

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