ОБНОВЛЕНИЕ: через несколько дней после публикации этого сообщения появился новый инструмент автоматизации браузера! Playwright обеспечивает встроенную кроссбраузерную поддержку без использования протокола WebDriver. Я добавил это в этот пост. И я должен сказать, что за JavaScript действительно будущее, и будущее наступает сегодня!

Состояние автоматизации тестирования браузеров

Раньше сквозное тестирование использовало очень консервативный подход. Все использовали Java / Python / Ruby с Selenium, и я действительно чувствовал, что нет хорошей альтернативы этой настройке. Селен был повсюду, и в какой-то момент он даже преобразовал свой протокол в стандарт W3C. Хорошо, теперь у нас есть стандарт W3C, зачем нам альтернативы?

Нам всегда нужны альтернативы, и техническое сообщество отлично подходит для их создания! Однако до великолепного развития JavaScript никакие другие платформы не предлагали разумных и популярных решений. В настоящее время в экосистеме JavaScript у нас уже есть 3 альтернативы Selenium, и открыта комната для новых! Так что, на мой взгляд, сейчас переключение всей автоматизации тестирования браузеров на JavaScript - вопрос времени. Это очень амбициозное заявление, но с точки зрения бизнеса, выбор более быстрых и стабильных инструментов вместо старого Selenium в Java должен резко повысить продуктивность и результат для разработчиков программного обеспечения в тесте.

Единственная проблема переключения - это JavaScript. Большинство инженеров по автоматизации тестирования обучены работе с Selenium на классических серверных языках, таких как Java и Python, и переход на новый язык или инструмент может стать для них проблемой. Автоматизация тестирования была сделана на Java, все новые инженеры обучались с нуля для Java и Selenium, и это повторялось год за годом.

Javascript против Java против Python

Хорошо, но что сделало JavaScript таким популярным и почему он побеждает в битве? На данный момент трудно сказать, что он выигрывает в цифрах, но он выигрывает в технологиях. Позвольте мне перечислить несколько моментов, которые привели к эволюции тестирования браузеров на JavaScript:

  • JavaScript уже находится внутри браузера. Очевидный момент. Зачем учить два языка, если можно использовать один?
  • Электрон - фреймворк, который позволил обернуть браузер внутрь движка JavaScript. Это позволило создать набор альтернатив Selenium, таких как Nightmare.js и Cypress.io.
  • Протокол Chrome Dev Tools - пример команды разработчиков Chrome, предлагающей собственный (не являющийся стандартом W3C) протокол для управления браузером.

Я также могу упомянуть простоту языка, его гибкость, npm и рост числа интерфейсных приложений в качестве дополнительных моментов, которые повысили интерес к тестированию браузеров на JS. Однако, в отличие от традиционных настроек (Java, Python), JavaScript никогда не разрабатывался для сквозного тестирования.

Верно.

Проблема здесь в главной особенности JavaScript - асинхронность абсолютно бесполезна и даже опасна, когда дело касается тестирования в браузере.

  • Все команды браузера должны выполняться асинхронно (так как им всегда нужно время для завершения)
  • Каждый тест представляет собой список этих команд
  • Каждый тест должен быть линейным и предсказуемым.

Подводя итог, нам нужно запускать все команды одну за другой. В противном случае мы можем сделать тесты непредсказуемыми. Например, если мы отправим в браузер 2 команды: «проверить элемент» и «щелкнуть», мы не будем знать, какие команды завершаются первыми, и эти тесты будут все время терпеть неудачу по случайным причинам. Чтобы уменьшить эту нестабильность, инженеры по автоматизации тестирования всегда должны помнить, что все их команды для браузера должны быть синхронизированы, чтобы тесты проходили. Этого не существует в Java.

Инструменты для тестирования браузера

А теперь пора сделать обзор всех инструментов тестирования. Также я поделюсь их сильными и слабыми сторонами и опасениями по поводу реализации.

Cypress.io

Самую популярную альтернативу Selenium на сегодняшний день предлагает компания Cypress.io. Cypress.io был построен с идеей, что если в браузере запущен JavaScript, мы также должны выполнить наш тест в нем. Они создали оболочку поверх браузера с помощью Electron и упаковали ее как полноценное автономное решение. Cypress.io стал популярным, поскольку был очень простым в использовании, особенно для фронтенд-инженеров. Работать с Cypress.io так же просто, как в старые добрые времена использовать JQuery. Cypress.io быстрее, чем Selenium, он более стабилен и может извлечь выгоду из работы внутри приложения.

Cypress.io великолепен! Однако, прежде чем выбрать Cypress.io, примите во внимание его ограничения. Поскольку Cypress.io работает внутри контекста браузера, у него нет доступа к таким внешним функциям, как:

  • использование фреймов
  • управление вкладками
  • управление несколькими окнами
  • загрузка файлов
  • загрузка файлов
  • отправка собственных событий клавиатуры и мыши

С Cypress.io также сложно протестировать взаимодействие со сторонними веб-сайтами
, и он не поддерживает кроссбраузерность.

Cypress.io отлично работает, когда дело доходит до тестирования одностраничных приложений или компонентов. Cypress.io любят разработчики! Но опять же, технология, лежащая в основе Cypress.io, не всегда может соответствовать требованиям.

WebDriver

Когда дело доходит до кроссбраузерного тестирования, инженеры-тестировщики по-прежнему предпочитают WebDriver. Да, WebDriver является стандартным, и даже самые сложные браузеры, такие как Safari или IE, следуют этому стандарту.

Говоря о реализациях WebDriver, я должен сказать, что в JavaScript у нас есть две популярные реализации:

  • Protractor - он построен на основе официальной библиотеки Selenium и пытается привнести Java-подобный синтаксис в JS.
  • Webdriverio - альтернативная реализация JavaScript.

По состоянию на начало 2020 года Protractor является самым популярным решением WebDriver, однако на данный момент он не обслуживается. Я глубоко обеспокоен его будущим, поэтому я написал об этом пост.

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

У технологии, лежащей в основе WebDriver, есть свои проблемы:

  • усиленная настройка - необходимы Java, Selenium Server и ChromeDriver (или IEDriver, GeckoDriver). Не так просто начать сравнивать с Cypress.io
  • нет доступа к внутренним компонентам браузера - нет имитации запросов, перехвата сети, доступа к заголовкам или загрузок из коробки.
  • скорость - способ работы WebDriver делает его примерно в 3 раза медленнее по сравнению со всеми альтернативами.
  • строгость - WebDriver является стандартом, поэтому он очень строг в отношении того, что вы можете делать в браузере. Если элемент находится на странице, но центр элемента не виден - вы не можете щелкнуть этот элемент. Если элемент движется - вы не можете его контролировать.

WebDriver - отличное и стабильное решение с самым большим сообществом. Для классической стабильной настройки WebDriver по-прежнему остается лучшим на рынке. Кроме того, у него есть богатая экосистема и такие сервисы, как SauceLabs или BrowserStack, которые помогают масштабировать тесты WebDriver.

Кукольник

Кукловод - это смесь лучшего из двух миров - WebDriver и Cypress.io.

Puppeteer построен на основе протокола Chrome DevTools разработчиками Chromium. Таким образом, он использует все API, доступные в браузере, и поэтому он намного мощнее, чем классический WebDriver. Если WebDriver ограничен своим стандартом (все методы должны вести себя одинаково во всех браузерах), Puppeteer ориентирован только на Chrome и Firefox, поэтому он может намного быстрее внедрять инновации.

В отличие от Cypress.io, Puppeteer дает вам истинный внешний контроль над браузером. Вы можете управлять вкладками, фреймами, сеансами инкогнито, сетью (имитирующие запросы), загрузкой файлов, загрузками. Почти все! Но его скорость сопоставима с Cypress.io, да, Puppeteer действительно быстр.

Единственная проблема Puppeteer - это универсальная библиотека, а не решение для автоматизации тестирования. Поэтому разработчики обычно сочетают его с Jest или CodeceptJS.

Чтобы быть правильным, мне нужно перечислить слабые стороны Кукловода. Но я не вижу никаких технических проблем с этим. Он дает вам все возможное, чтобы вы могли писать самые сложные тесты браузера. Он прост в установке, имеет приятный API и очень гибкий в управлении. Это очень простой инструмент, поэтому, в отличие от Cypress, он не дает вам приятных функций, таких как автоматическое ожидание элементов или ожидание анимации. Если вам нужны эти функции - вам нужно разработать их самостоятельно.

Кукловод - отличная технология, но у него более высокая кривая обучения, чем у Cypress.io, и меньше учебных материалов, чем у WebDriver. Для этого требуются опытные инженеры JavaScript, которые могут настроить его и построить на его основе среду тестирования.

"Драматург"

Некоторое время мы не слышали никакой заметной активности от команды Puppeteer. Puppeteer 2.0 был выпущен без каких-либо серьезных изменений и реальных нарушений совместимости. Казалось, что разработка Puppeteer вступила в скучную стадию, когда были внесены только новые мелкие улучшения и исправления. Мы не знали, что команда, стоящая за Puppeteer, работала над другим проектом, который берет лучшее от Puppeteer, но расширяет его до Firefox и Safari.

Правильно, официально анонсированный в январе 2020 года Драматург уже выглядит как карьера. Он имеет отточенный API от Puppeteer со всеми его функциями. Под капотом Playwright исправляет Firefox и Webkit (движок Safari), чтобы включить свой API автоматизации. Таким образом, это обеспечивает очень низкоуровневый и очень быстрый протокол для управления браузером. Этот подход не будет работать ни с одним браузером с закрытым исходным кодом. Однако, когда Microsoft, наконец, перешла на Chromium, нам больше не понадобится какой-либо другой настольный браузер для поддержки в тестах.

Команда драматургов также внесла несколько улучшений по сравнению с Кукловодом:

  • уменьшить потребность в тайм-аутах
  • лучшее обнаружение видимости элемента перед взаимодействием

У меня не было возможности попробовать (пока), но я с нетерпением жду этого. Я ожидаю, что Playwright будет очень любим разработчиками и инженерами по автоматизации тестирования. Идея и технология выглядят великолепно, как и команда, стоящая за ними.

TestCafe

Еще одна отличная технология со своими плюсами и минусами. TestCafe делает очень хороший трюк - вместо того, чтобы управлять браузером самостоятельно, он запускает прокси-сервер, который перехватывает любые вызовы в браузере и внедряет в них свой сценарий.

Вот как это работает: когда вы обращаетесь к google.com в тесте, браузер фактически открывается:

http://192.168.0.110:38475/xVPmF1Kwb/http://google.com/

Настоящий адрес - это прокси-сервер, который отправляет запрос на google.com, но добавляет свой собственный сценарий в каждый полученный HTML-код. Этот сервер также запускает и закрывает браузер, однако он не управляет браузером при запуске теста. Итак, как и в Cypress.io, ваши тесты фактически работают внутри браузера (внутренне).

Это решение делает TestCafe самым быстрым инструментом с поддержкой кроссбраузерности на рынке. Действительно, если вам не нужно управлять браузером, вы можете использовать любой браузер, какой захотите! Даже Safari, даже IE, даже мобильный Chrome! TestCafe может использовать любой браузер, и это будет намного быстрее, чем WebDriver (поскольку тесты выполняются внутри браузера). Проблемы с этой технологией - в основном крайние случаи, которые трудно перечислить. По сути, TestCafe должен работать для большинства тестов, но если он не работает, вы не сможете понять, почему. И никаких инструментов отладки, которые помогут вам в этом.

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

CodeceptJS

Cypress.io, WebDriver, Puppeteer, TestCafe - все они великолепны. Они решают проблему тестирования по-своему. Однако у всех этих фреймворков есть собственный API и собственный синтаксис. Как только мы начнем писать тесты, мы не сможем перейти на другой движок, если столкнемся с неразрешимой проблемой.

  • Что, если бы мы начали писать тесты в Puppeteer, но потом получили требование поддерживать Safari в тестах?
  • Мы начали с WebDriver, но нам нужно больше контроля над браузером, который может дать нам только Puppeteer?
  • Мы начали в TestCafe, но некоторые тесты работают нестабильно
  • Мы начали с Cypress.io, но наш сайт содержит фреймы или нам нужно запускать тесты в двух окнах.

Итак, вот идея CodeceptJS - метафреймворка для автоматизации тестирования браузеров. CodeceptJS берет все популярные движки, управляющие браузером, обертывает их и предоставляет унифицированный синтаксис. В отличие от других инструментов, перечисленных в этой статье, CodeceptJS не управляет браузером самостоятельно, он делегирует управление WebDriver, Puppeteer или TestCafe. Это позволяет CodeceptJS больше ориентироваться на опыт разработчиков. Например, он извлекает из коробки объекты страницы, повторные шаги и интерактивную паузу. CodeceptJS так же прост в использовании, как Cypress.io, но позволяет использовать различные технологии.

В то время как Cypress.io хорош для фронтенд-инженеров и соответствует их опыту, CodeceptJS больше фокусируется на чистом сквозном тестировании. Таким образом, тест в CodeceptJS больше похож на план тестирования, а не на код JavaScript. Так что даже ручные QA могут начать с ним работать, шаг за шагом изучая JavaScript.

Заключение

Я считаю, что этот год изменит правила игры в автоматизации тестирования. В ближайшие годы рынок автоматизации тестирования вырастет до 30 миллиардов долларов. И JavaScript будет стимулировать этот рост и инновации в автоматизации тестирования. Подумайте о том, чтобы переключить тесты вашего браузера на JavaScript уже сегодня - но выбирайте инструмент с умом, прежде чем выбирать самый популярный Cypress.io или Protractor, оцените альтернативы, такие как CodeceptJS, webdriver.io или TestCafe. Они могут лучше соответствовать вашим требованиям.