Написание тестов в современной разработке играет одну из самых важных и неотъемлемых этапов разработки современного программного обеспечения. В рамках разработки одного из последних проектов перед нами возникла подобная задача. Одним из способов тестирования стала разработка полноценных 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 выбор был сделан именно в его пользу.