Окт. 11

UI-автоматизация, или Почему стоит посмотреть в сторону JavaScript

Всем привет! Посещая конференции или просто общаясь с коллегами, я часто сталкиваюсь с тем, что для UI-автоматизации по умолчанию выбирают Java, в более редких случаях — Python или C#. При этом часто те, кто делает такой выбор, просто не знают, что можно предпочесть иной вариант. В этой статье я хочу поделиться своими наблюдениями и личным опытом: каково это, построить эффективную автоматизацию на JavaScript, — а также рассмотреть варианты различных фреймворков, которые существуют на рынке.

Аргументы в пользу JavaScript

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

Разница между языками все больше стирается и становится незаметней. Поэтому, просматривая современные тренды в автоматизации, можно заметить, что все больше проектов используют JavaScript для разных уровней и видов тестирования. Как пример можно привести статистику Github за 2018 год по популярности языков программирования.

В нашем проекте мы столкнулись с выбором нового фреймворка и используемых технологий. В итоге мы пришли к решению взять JavaScript и WebdriverIO-фреймворк для UI-автоматизации. Рассмотрим подробнее, почему так решили и что вышло в итоге.

Первое, на что нужно обратить внимание при выборе языка для автоматизации, это стек технологий, которые используются в проекте. В нашем случае в проекте применялись Python, PHP, React (JS), что в свое время обусловило выбор фреймворка для автоматизации на PHP.

Но со временем тесты было все сложнее поддерживать из-за непродуманной архитектуры и и отсутствия обновлений для фреймворка на протяжении долгого времени. Появлялись сложности перехода на Selenium 3 из-за кастомных доработок используемой в проекте библиотеки. Также со временем стало понятно, что порог входа в проект по автоматизации стал очень высоким, обучать Manual QA писать тесты было сложно.

Всей командой мы решили попробовать перейти на новые технологии. Основными факторами перехода именно на JavaScript стали: скорость написания, настраивания; наличие знаний и опыта в команде и более быстрый вход в проект для QA, которые только начинают изучать автоматизацию.

Для того чтобы начать автоматизировать на JS, стоит изучить базовые основы языка, узнать, как работает Selenium, и выбрать один из фреймворков, что иногда бывает сложновато в связи с огромным количеством различных вариантов.

Рассмотрим подробнее фреймворки, библиотеки-обертки над Selenium, популярные сейчас.

Обзор JS-фреймворков для end-to-end-тестирования

Статистика загрузок основных библиотек сегодня выглядит так:

При выборе фреймворка стоит обращать внимание на его популярность на GitHub, поддержку сообщества, количество открытых issues и совместимость с технологиями, которые используются у вас в системе, а также на особенности каждого инструмента, применяемого для автоматизации.

Например, Protractor хорошо подходит для проектов, написанных на Angular, потому что в нем есть встроенные функции для специфических загрузок Angular-элементов.

Ниже статистика количества звезд и открытых issues в библиотеках. Здесь явно можно выделить WebdriverIO, который стабильно имеет хороший показатель закрытых проблем.

Protractor

Плюсы:

Protractor — это единственный фреймворк, который из коробки поддерживает кастомные определения AngularJS-элементов. Если у вас Angular, используйте Protractor.
Удобная поддержка TypeScript и разных фреймворков для unit testing (Jasmine, Mocha, Cucumber и пр.).

Минусы:

Нет поддержки мобильного тестирования.
Написан как обертка над WebDriverJS. Если будут проблемы с WebDriverJS, автоматически они будут и в ProtractorJS.

Базовый пример теста на ProtractorJS:

Nightwatch.js

Плюсы:

Похож на WebdriverIO и тоже является кастомной имплементацией W3C WebDriver API.
Легко добавить новую функцию.
Не нужно выбирать между Jasmine и Mocha.

Минусы:

Нет поддержки Mocha и мобильного тестирования.
Меньше поддержки, чем у WebdriverIO и Protractor.

Cypress

Плюсы:

В отличие от большинства end-to-end-фреймворков, не использует Selenium. Архитектура работы с браузером была написана полностью, и, в отличие от Selenium, Cypress не запускает удаленные команды через сеть, а работает напрямую с программой.
Быстрая и удобная настройка. Необходимо запустить только одну команду для установки всех пакетов, и нет необходимости ставить все отдельно.

Вся документация в одном месте, не нужно отдельно искать, как правильно делать проверки или как использовать Chai.
Необычный интерфейс запуска с описанием, какие команды выполняются, что позволяет быстрее понимать, что происходит на странице в определенный момент.

Минусы:

Плюс, который в то же время является и минусом, — это тот факт, что Cypress не использует Selenium для end-to-end-тестирования. Что порождает много проблем в работе. Работа с браузером не всегда стабильна, и на сегодняшний день на GitHub висят открытыми более чем 900 проблем.
Нет поддержки мобильного тестирования, и, судя по комментариям создателей нативной поддержки, никогда и не будет.
Поддержка ограниченного количества браузеров: Canary, Chrome, Chromium, Electron.
Платная параллелизация тестов. Хотите запускать в несколько потоков — придется платить.

WebdriverIO

Плюсы:

WebdriverIO — это кастомная имплементация W3C WebDriver API. Не нужно привязываться к имплементации WebDriverJS.
Поддержка синхронного кода. Можно забыть об асинхронности JavaScript.
Удобная базовая настройка с помощью встроенного интерфейса для командной строки wdio.
Поддерживает почти все тестовые фреймворки BDD и TDD.
Поддерживает удобную библиотеку ‘webdrivercss’ для сравнения CSS-стилей элементов на странице.

Минусы:

Большое различие между последними версиями (WebdriverIO 4 и 5).
Хуже кастомизирован для автоматизации AngularJS, чем Protractor.

Пример теста Login. Основное, на что можно обратить внимание, это отсутствие await/async или Promises. В этом примере был использован паттерн Page Object, фикстуры и другие подходы, которые применяются при написании автоматизации.

Синхронность WebdriverIO обеспечивает технология Fibers, иногда ее еще называют coroutines. У этой технологии много плюсов и преимуществ, но существуют подводные камни, например запуск в асинхронном коде сделает весь код асинхронным. Как по мне, за этой технологией будущее.

Приступить к написанию первых тестов с помощью этой библиотеки очень просто. Для начала нужно установить npm-пакет @wdio/cli в новосозданном проекте.

npm i --save-dev @wdio/cli

После этого необходимо сгенерировать конфиг для запуска тестов с помощью команды WebdriverIO.

./node_modules/.bin/wdio config

Я предпочитаю Mocha как тестовый фреймворк и sync-режим для запуска тестов. Из репортеров на начальном этапе можно использовать Spec-репортер, который красиво выведет результаты тестов в консоль, при дальнейшем росте проекта несколькими строчками можно будет добавить Allure. В дополнение к этому при изначальной настройке проекта можно добавить wdio-selenium-standalone-service, который будет менеджить запуск Selenium WebDriver, без необходимости отдельно ставить СhromeDriver.

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

describe('dou.ua page', () => {
 it('should have the right title', () => {
 browser.url('https://dou.ua');
 const title = browser.getTitle();
 assert.strictEqual(title, 'Сообщество программистов | DOU');
 });
});

Где командой browser.url('') мы открываем браузер и можем сразу делать все необходимые проверки.

Автоматизация — это несложно. Как говорится, главное начать.

Полезные материалы

Выводы

В заключение перечислим преимущества и недостатки использования JavaScript-фреймворков для автоматизации тестирования, которые мы заметили в нашем проекте.

Преимущества:

Скорость написания тестов значительно выше, чем на Java или C#.
Ниже порог входа для старта проекта.
Больше взаимодействия внутри команды (проявилось в нашей команде, что, может, и не относится к выбору фреймворка автоматизации).
Большое количество готовых решений очень разных проблем, которые возникают.

Недостатки:

Менее стабильные решения. Иногда может выйти так, что убил полдня на баг во фреймворке.
Для написания хороших тестов нужно понимание, как работает JavaScript.

У каждого решения/языка/технологии есть свои достоинства и свои недостатки. С выбором технологического стека определяться вам. Этот выбор зависит от состава вашей команды, от знаний и опыта ее участников, а также от задач, которые вы хотите решить. Если условия позволяют, обязательно пробуйте новое и смотрите в сторону развивающихся технологий. Только в таком случае удастся найти то, что подойдет именно вам.