Апгрейд проекта с помощью CSS селекторов и кастомных атрибутов

Апгрейд проекта с помощью CSS селекторов и кастомных атрибутов

От автора: селекторы элементов для Selenium WebDriver – один из компонентов ядра фреймворка автоматизации. Они ключ к взаимодействию с любым веб-приложением. В этом обзоре элементных селекторов автоматизации мы обсудим различные стратегии, узнаем их возможности, взвесим плюсы и минусы, а также посоветуем лучшие стратегии по селекторам – кастомные атрибуты и CSS селекторы.

Селекторы элементов Selenium

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

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

Все примеры кода будут на Python и Selenium WebDriver, но они будут применимы к любому языку программирования и фреймворку.

HTML пример:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Я буду использовать следующий HTML меню для примеров в этом разделе:

<div id="main-menu">
  <div class="menu"><a href="/home">Home</a></div>
  <div class="menu"><a href="/shop">Shop</a>
 <div class="submenu">
 <a href="/shop/gizmo">Gizmo</a>
 <a href="/shop/widget">Widget</a>
 <a href="/shop/sprocket">Sprocket</a>
 </div>
  </div>
</div>

Плохо: названия тегов, текст ссылок, частичный текст ссылок и названия

Я не буду долго останавливаться на них, так как все они используются ограничено. Это плохой выбор для широкого применения во всем фреймворке автоматизации. Они решают определенные потребности, которые легко можно покрыть другими стратегиями элементных селекторов. Используйте их только, если вам необходимо обработать определенный кейс. Даже тогда почти все специальные кейсы не настолько специальны, чтобы использовать их. Эти инструменты можно использовать в сценарии, когда другие селекторы вам недоступны (кастомные теги или id).

Пример:

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

driver.find_elements(By.TAG_NAME, "div")

С помощью примеров ниже можно выбрать ссылки. Как видите, методы выбирают ссылки только по тегу a и только по тексту тега:

driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")

Вы можете выбрать элементы по атрибуту name, но в нашем примере с HTML у тегов нет атрибута name. Эта проблема будет почти в любом приложении, так как обычно этот атрибут не добавляется во все теги. Если бы в главном меню был атрибут name

<div id="main-menu" name="menu"></div>

Элемент можно было бы выбрать через:

driver.find_elements(By.NAME, "menu")

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

Обобщение: названия тегов, текст ссылок, частичный текст ссылок и названия

Апгрейд проекта с помощью CSS селекторов и кастомных атрибутов

Хорошо: XPath

XPath – универсальная и способная стратегия элементных селекторов. Она также моя любимая. XPath умеет выбирать любые элементы на странице, вне зависимости от того, есть у них классы и ID (хотя без классов и ID становится сложно поддерживать код, он становится хрупким). Этот вариант универсален, так как вы можете выбирать родительские элементы. XPath также обладает множеством встроенных функций, с помощью которых можно настраивать выборку элементов.

С универсальностью приходит сложность. С помощью XPath можно делать почти что угодно, поэтому изучать его сложнее, чем другие стратегии элементных селекторов. Сложность компенсируется отличной онлайн документацией, которую легко найти. Один из замечательных ресурсов – уроки по XPath на W3Schools.com.

У XPath есть свои компромиссы. Вы можете выбирать родительские элементы, у вас под рукой множество встроенных функций, однако XPath плохо работает в IE. Это стоит учитывать при выборе стратегии элементных селекторов. Если вам нужна возможность выбора родительских элементов, вам необходимо задуматься о том, как выбор повлияет на кроссбраузерное тестиование в IE. Для запуска автоматических тестов в IE потребуется больше времени. Если пользовательская база вашего приложения не сидит на IE, этот выбор вам подойдет, так как вы сможете реже запускать тесты в IE. Если наоборот, то XPath должен стать фолбеком, если другие лучшие подходы не работают для вашей организации.

Пример:

Если у вас в требованиях прописана возможность выбора родительских элементов, вам нужен XPath. Как это сделать: на нашем примере предположим, что вам необходимо выбрать родительский блок главного меню, зная одну из ссылок внутри этого элемента:

driver.find_elements(By.XPATH, "//a[id=menu]/../")

Этот селектор найдет первый экземпляр ссылки с id = menu, далее с помощью «/../» селектор поднимется на родительский элемент. В результате вы получите родительский блок главного меню.

Обобщение XPath

Апгрейд проекта с помощью CSS селекторов и кастомных атрибутов

Отлично: id и class

ID и class – 2 разных способа в автоматизации, выполняющие разные функции в приложении. Однако при выборе стратегии для автоматизации они слегка отличаются, и их нельзя рассматривать отдельно. В приложении атрибуты id и class позволяют UI разработчикам манипулировать и стилизовать приложение. В автоматизации мы с их помощью ищем элементы для взаимодействия.

Большой плюс в использовании ID и class в том, что они мало подвержены структурным изменениям в приложении. Если бы вы создали XPath или CSS селектор, в основе которого лежит цепочка из нескольких элементов и дочерних элементов, что будет, когда функциональный запрос прервет эту цепь, добавив в нее новые элементы? С ID и class вы можете искать элементы, не полагаясь на структуру страницы. Вы сохраняете надежность автоматизации и не слишком снисходительны к изменениям. Изменения должны замечаться в автоматизации, после создания тест кейсов по поиску определенных элементов. Изменения не должны ломать весь сьют автоматизации. Однако если разработчик вносит изменения напрямую в ID или class, используемые в автоматизации, это повлияет на тесты.

Эта стратегия будет неприменима, если приложение под тестом не будет реализовывать ID и class как часть лучших практик разработки. Если в HTML нет id и class для автоматизации, подход будет сложно использовать.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Пример:

Если необходимо выбрать элемент меню верхнего уровня, это можно сделать так:

driver.find_elements(By.ID, "main-menu")

Выбрать первый пункт меню можно так:

driver.find_elements(By.CLASS_NAME, "menu")

Обобщение: id и class

Апгрейд проекта с помощью CSS селекторов и кастомных атрибутов

Лучше всего: кастомные атрибуты и CSS селекторы

Если ваши тестировщики хорошо общаются с разработчиками, есть шанс, что вы сможете использовать эту лучшую практику в автоматизации. У кастомных атрибутов и CSS селекторов множество преимуществ как для команды тестировщиков, так и организации. У тестировщиков это позволяет автоматизаторам искать определенные элементы без создания сложных селекторов. Однако необходимо уметь добавлять кастомные атрибуты, чтобы автоматизаторы могли использовать их в приложении. Для использования этот подхода разработчики и тестировщики должны работать вместе.

Необходимо отметить, что CSS селекторы не зависят от кастомных атрибутов. CSS селекторы могут находить любые теги и атрибуты в HTML документе, как и XPath.

Разберем сущность подхода. Для лучшей реализации команда автоматизации должна понимать, что им необходимо искать в автоматизации. Работая с разработчиками, скорее всего, front end, тестировщикам необходимо разработать шаблон кастомного атрибута, который будет использоваться во всех необходимых элементах для автоматизации. Например, мы добавим атрибут tid к целевым элементам.

Важно также отметить техническую ограниченность CSS селекторов. Они изначально не рассчитывались на выбор родительских элементов, как в XPath. Это было сделано, чтобы избежать бесконечного зацикливания в стилях CSS на страницах. Для веб-дизайна это хорошо, но для автоматизации это ограничение. К счастью, это ограничение можно преодолеть с помощью кастомных атрибутов. Тестировщики будут вызывать подходящий кастомный атрибут, не нужно искать родительский элемент.

Если в вашей организации еще не налажена работа между тестировщиками и разработчиками, не беспокойтесь! Вам все равно нужно использовать эту стратегию, так как она может стать тем механизмом, который запустит общение. Независимо от существования культуры общения в коллективе, вам стоит попробовать этот подход и посмотреть, что получится. Вы получите не только простую в обслуживании стратегию, но и получите плюсы от общения разных областей в компании. Совместные развивающиеся отношения принесут вам пользу во многих аспектах обеспечения качества, таких как снижение дефектов, сокращение времени выхода на рынок и повышение производительности.

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

Пример:

Реализация кастомных атрибутов в тегах ссылок в нашем HTML примере выглядела бы так:

<div id="main-menu">
  <div class="menu"><a tid="home-link" href="/home">Home</a></div>
  <div class="menu"><a tid="shop-link" href="/shop">Shop</a>
 <div class="submenu">
 <a tid="gizmo-link" href="/shop/gizmo">Gizmo</a>
 <a tid="widget-link" href="/shop/widget">Widget</a>
 <a tid="sprocket-link" href="/shop/sprocket">Sprocket</a>
 </div>
  </div>
</div>

Заметили новый атрибут в некоторых элементах? Мы создали новый атрибут, который не конфликтует с другими атрибутами HTML, и назвали его tid. С помощью этого кастомного атрибута мы можем использовать CSS селектор для поиска элемента:

driver.find_element(By. CSS_SELECTOR, "[tid=home-link]")

Например, вы хотели выбрать все ссылки в меню, неважно верхний это уровень или подменю. С помощью CSS селекторов можно создать крайне универсальный селектор:

driver.find_element(By.CSS_SELECTOR, "#main-menu [tid*='-link']")

Запись *= осуществляет поиск по шаблону значения «-link» внутри поля tid во всех элементах. Если разместить его за ID #main-menu, поиск будет произведен по элементам внутри главного меню.

Вы также можете принять эту стратегию без кастомных атрибутов. Например, вы можете искать ссылки в подменю Shop следующим образом:

driver.find_element(By. CSS_SELECTOR, "#main-menu .submenu a")

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

Обобщение: кастомные атрибуты и CSS селекторы

Апгрейд проекта с помощью CSS селекторов и кастомных атрибутов

Заключение

Есть несколько отличных вариантов реализации стратегии элементных селекторов корпоративного стандарта в вашей системе автоматизации. Варианты типа названий тегов или текста ссылок лучше избегать, если они не единственные среди доступных. XPath, ID и class – хороший подход. На данный момент лучший подход – кастомные атрибуты и поиск элементов по CSS селекторам. Он также приведет к общению между разработчиками и тестировщиками.

Сравнение вариантов:

Апгрейд проекта с помощью CSS селекторов и кастомных атрибутов

Автор: Tim Harrison

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree