Написание тестов в современной разработке играет одну из самых важных и неотъемлемых этапов разработки современного программного обеспечения. В рамках разработки одного из последних проектов перед нами возникла подобная задача. Одним из способов тестирования стала разработка полноценных End2End тестов.
В частности, задача состояла в разработке тестов с помощью web-driver, преимущественно под Chrome. Язык и фреймворк можно выбирать на свое усмотрение, однако в компании активно ведется разработка на с# и typescript. В общем виде End2End тест должен был покрывать основной сценарий пользовательского взаимодействия, включая аутентификацию, если она потребуется. В реальности же, это означало, что требовалось проверить доступность и функциональность основных элементов управления и ввода информации, переходы по вкладкам и сценарии прохождения от разных функциональных ролей в системе.
К особенностям тестируемого сервиса можно причислить активное использование перетаскиваний, реализованных через sortablejs, а также манипуляции с shadow dom. Помимо этого фронтовая часть была написана на angular, а взаимодействие с сервером проходило по GRPC.
Рассмотрев несколько популярных существующих решений с открытым исходным кодом, мы решили остановиться на Selenium и Playwright. Selenium привлек наше внимание прежде всего своей известностью и надежностью, к тому же для него уже была создана платформа для запуска, а Playwright современностью и скоростью развития.
Поскольку Selenium достаточно старый, известный, надежный и уже испытанных подход для реализации подобного функционала в первую очередь мы смотрели в его сторону.
Selenium
Playwright
Drag and drop
Shadow Dom
Итоги
Сравнительная статистика нескольких фреймворков, которые мы рассматривали представлена здесь.
Selenium
Selenium достаточно старый и наверное, самый надежный с точки зрения поиска популярных решений в интернете фреймворк. Он поддерживает достаточно много языков, которые подходят нам. К основным достоинствам можно отнести:
Невысокий порог вхождения
Есть возможность написания тестов на с#
Поддержка достаточно широкого стека браузеров (Chrome, Firefox, Edge, IE, Opera, Safari)
Достаточно подробная документация и множество рекомендаций по решению популярных проблем в интернете
Проверенный временем
Достаточно шустрый
Есть возможность параллельного запуска
К недостаткам использования Selenium можно отнести:
Разработчик сам должен следить за обновлением драйвера или использовать облачные сервисы
Есть проблемы с реализацией перетаскивания (об этом пойдет речь ниже)
Поиск элементов в shadow dom отделяется от поиска простых элементов, что впрочем, не является однозначным недостатком
В целом же Selenium отличный выбор, если вам нужно иметь поддержку чистого Safary и IE и хороший путь к саморазвитию, поскольку на рынке труда большое количество компаний, использующих данный метод реализации тестов. Selenium достаточно простой в написании тестов, у вас вряд ли возникнут большие проблемы с пониманием или написанием кода, а если и возникнут, пути решения чаще всего будут находится достаточно быстро, если только они есть. Однако чем более хитрым и сложным будет становиться тестируемый вами интерфейс тем больше нестандартного самописного кода будет появляться в ваших тестах.
Playwright
Если Selenium относится к категории хороших долгосрочных решений, то Playwright к категории современных решений. Playwright начал свой путь в 2020 году, так что документация, как рекомендации по решению некоторых проблем могут оказаться свежими, но не всегда рабочими.
Есть возможность реализации как в c#, так и в ts.
Достоинства:
Тесты выполняются в изолированной среде с чистого листа
Большое количество доработанных действий пользователя
Отлично работает перетаскивание
Поиск элементов в shadow dom ничем не отличается от обычного поиска элементов
Достаточно шустрый
Не нужно следить за драйвером
Параллельный запуск из коробки
Интеграция с докером
Недостатки:
Решение новое и современное и, как следствие, не слишком много сведений в интернете, а также компаний, которые используют такой подход
Нет поддержки Safari и IE
Входной порог несколько выше, чем в Selenium
В целом, по работе с Playwright могу сказать, что библиотека постоянно удивляет, по большей степени в положительную сторону, но не всегда. Некоторые задачи могут вызвать небольшой ступор, но пути решения чаще всего находятся. Playwright - отличное современное решение для написания UI тестов.
Drag and drop
Перетаскивание элементов сейчас используется во многих рабочих проектах. Данную операцию поддерживают как Selenium, так и Playwright. Однако, здесь стоит уточнить, что Selenium собирает Drag and Drop из нескольких действий:
act.ClickAndHold(draggable)
.MoveToElement(droppable)
.Release()
.Build()
.Perform();Данный код, собирает несколько действий с элементами. Сначала мы кликаем и держим перемещаемый элемент, затем перемещаем его в контейнер и отпускаем.
Полный аналогом этого кода:
act.DragAndDrop(draggable, droppable)
.Build()
.Perform();Здесь используется функция DragAndDrop в отличии от прошлого, состоящего из группы событий.
Впрочем, и тот и другой код не будет работать, если атрибут перетаскивания (draggable=’true’) ставится динамически по нажатии на элемент. Так что не удивляйтесь, если перетаскивания в Selenium у вас не получится реализовать.
В отличии от Selenium Playwright реализует Drag and Drop даже с динамическим изменением свойств из коробки.
await Page.DragAndDropAsync(".draggable", ".droppable");Здесь перетаскивание элемента с классом "draggable" к элементу с классом "droppable" работает даже в динамике, то есть когда элемент становится перетаскиваемым после клика по нему.
Таким образом, если в вашем проекте активно используются перетаскивание элементов лучше сделать выбор в пользу Playwright.
Shadow dom
Работа с теневым домом отличается в обоих случаях. Selenium работает с теневым домом отдельно, то есть через свойство shadowroot. В целом поиск в теневом доме в Selenium сводится к поиску внутри содержимого shadowroot. Это можно сделать написав например обычный метод расширения, который будет искать элементы в shadowroot.
public static IEnumerable<IWebElement> FindShadowRootElements(this IWebElement shadowHost, By by)
{
var shadowRoot = shadowHost.GetShadowRoot();
return shadowRoot.FindElements(by);
}Здесь получаем свойство shadowRoot у элемента и ищем по его содержимому. Также можно написать метод расширения, который совмещает поиски.
Таким образом, в Selenium поиск элементов в дом дереве существенно отличается от поиска в теневом доме, что впрочем, нельзя однозначно назвать недостатком, как и достоинством. В некоторых случаях может понадобится разделять поиск в том или другом доме.
В Playwright поиск в теневом доме ничем не отличается от поиска в обычном доме. Так например,
await Page.Locator(“#shadowIdElement”).WaitForAsync();Здесь ждем загрузки элемента с идентификатором shadowIdElement если даже этот элемент находится в shadowDom Playwright его найдет. Поиск элементов через css или text в Playwright производится сначала в обычном доме, а затем в shadowDow. Однако, на случай если нам не требуется поиск внутри shadowDom можно записать выражение так:
await Page.Locator(":light(#elId)").WaitForAsync();Здесь поиск элемента с id = ‘elId’ ограничивается только обычным или светлым домом.
Если вы активно работаете с shadowDom в рамках компонент клиентского фреймворка или в рамках микрофронтенда и вам не нужно разделять элементы в светлом и теневом доме, лучше использовать Playwright, если же разделение необходимо, то можно использовать как Selenium так и Playwright.
Итоги
Несмотря на то, что данные фреймворки реализуют похожий функционал в некоторых случаях их можно комбинировать, в рамках одного проекта или даже теста могут сочетаться подходы Selenium и Playwright. Однако подобное сочетание может привести к беспорядку в коде и усложнению логики, а также разрастанию “зоопарка фреймворков”.
В целом же если вам нужно реализовать UI тесты для вашего сервиса и у вас нет четких требований поддерживать Safari и IE и у в вашей компании нет тонн кода на Selenium, Playwright отличная современная быстро развивающаяся альтернатива, которая дает некоторые современные приятные функциональные “плюшки” прямо из коробки. К тому же Playwright более современный и быстро развивающийся framework, идущий в ровень с развитием современных фронтовых фреймворков.
В рамках написания тестов мы остановились на версии Playwright.net.Данная версия достаточно просто стыкуется с известными фреймворками заточенными под модульное тестирование такие как NUnit или Ms Test. Поскольку уже существовали Ms Test выбор был сделан именно в его пользу.
