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

Комментарии (9)


  1. Rabestro
    30.09.2022 20:04

    Интересно, на сколько подходит для ваших целей Spock Framework + Geb?


  1. AlexeyALV
    30.09.2022 20:24
    +3

    А почему рассматривали Selenium, а не Selenide?
    Кроме того, надо обращать внимание на способы запуска и получения отчетов. Есть ли необходимость делать автоматизированный регресс, например, если у вас регулярные релизы. Нужно ли распараллеливание запусков. Надо ли увязывать последовательность запусков разных тестов во времени.


    1. alex_smite Автор
      30.09.2022 21:10

      Selenium IDE, если правильно понял, обладает теми же недостатками в плане shadowdom и dragAndDrop. К тому же работать из кода значительно быстрее и привычнее. И да, у нас была необходимость делать автоматизированный регресс


      1. aslk
        01.10.2022 19:15
        +4

        Selenide != Selenium IDE

        ссылка на фреймворк https://ru.selenide.org/


    1. EreminD
      02.10.2022 20:35

      Selenide - библиотека на java. В статье говорится, что стек проекта - C# и TS.
      В общем selenide здесь неуместен

      Хотя, даже если есть какой-то порт селенида на .net, тут все равно нет претензий к селениуму, которые закрываются именно селенидом


  1. ValeriaFatekhova
    01.10.2022 19:15
    +2

    По поводу перетаскивания: у себениума имеется с ним баг. Недавно смотрела презентацию библиотеки для питона Selenium tools вроде, в ней есть решение данной проблемы. У библиотеки открытый код, можно посмотреть и сделать подобный фикс для С# (из статьи я поняла, что тесты будут на нем)


  1. in5anity
    01.10.2022 19:15

    Cypress


  1. dabrahabra
    02.10.2022 15:50

    Написание тестов в современной разработке играет одну из самых важных и неотъемлемых этапов разработки современного программного обеспечения.

    Кмк это попахивает «ошибкой выжившего» 


  1. i360u
    02.10.2022 18:25
    +1

    Странные альтернативы рассматриваются. А почему не Cypress и Puppeteer?