Эта статья была первоначально опубликована TestProject . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.
Селекторы элементов для Selenium WebDriver являются одним из основных компонентов инфраструктуры автоматизации и ключом к взаимодействию с любым веб-приложением. В этом обзоре селекторов элементов автоматизации мы обсудим различные стратегии, изучим их возможности, взвесим их плюсы и минусы и, в конечном итоге, порекомендуем лучшую стратегию селектора — настраиваемые атрибуты с селектором CSS.
Селектор селена
Выбор наилучшей стратегии выбора элементов имеет решающее значение для успеха и простоты обслуживания ваших усилий по автоматизации. Поэтому при выборе селектора вы должны учитывать такие аспекты, как простота использования, универсальность, онлайн-поддержка, документация и производительность. Тщательное рассмотрение правильной стратегии выбора принесет дивиденды в будущем благодаря простой в обслуживании автоматизации.
Точно так же, как и технологический аспект селекторов элементов, следует учитывать и культуру вашей организации. Зрелая культура сотрудничества между разработчиками и QA откроет высокие уровни успеха при внедрении селекторов элементов в вашей автоматизации. Это приносит пользу организации не только за счет автоматизации, поскольку закладывает фундамент для совместной работы в других областях жизненного цикла разработки программного обеспечения.
Все примеры кода будут в командах Python и Selenium WebDriver, но в целом должны быть применимы к любому языку программирования и фреймворку.
Пример HTML:
Я буду использовать следующий фрагмент 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>Плохо: имя тега, текст ссылки, текст частичной ссылки и имя
Я не буду тратить слишком много времени на них, потому что они все имеют ограниченное использование. Как правило, они не являются хорошим вариантом для широкого применения во всей среде автоматизации. Они решают конкретные задачи, которые могут быть легко покрыты другими стратегиями выбора элементов. Используйте их только в том случае, если у вас есть особая необходимость обрабатывать особый случай. Даже в этом случае большинство особых случаев не достаточно особенные, чтобы их использовать. Вы можете использовать их в сценарии, где нет другой доступной опции селектора (например, пользовательских тегов или идентификатора).
Пример:
С помощью имени тега вы можете выбрать большие группы элементов, которые соответствуют указанному вами имени тега. Это имеет ограниченное использование, потому что это будет работать только как решение в ситуациях, когда вам нужно выбрать большие группы элементов одного типа. В приведенном ниже примере будут возвращены все 4 элемента div в примере HTML.
driver.find_elements(By.TAG_NAME, "div")
Вы можете выбрать ссылки с этими примерами ниже. Как вы можете видеть, они могут нацеливаться только на теги привязки и только на текст этих тегов привязки:
driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")
Наконец, вы можете выбирать элементы по атрибуту name, но, как видно из примера HTML, нет тегов с атрибутом name. Это было бы распространенной проблемой практически в любом приложении, поскольку добавление атрибута имени в каждый атрибут HTML не является обычной практикой. Если элемент главного меню имеет атрибут name, например:
<div id="main-menu" name="menu"></div>
Вы можете выбрать его так:
driver.find_elements(By.NAME, "menu")
Как видите, эти стратегии выбора элементов имеют ограниченное применение. Все последующие подходы являются лучшими, потому что они гораздо более универсальны и способны.
Сводка: имя тега, текст ссылки, текст частичной ссылки и имя
| Pros | Cons |
| Легко использовать | Не универсален |
| Чрезвычайно ограниченное использование | |
| Может даже не применяться в некоторых случаях |
Хорошо: XPath
XPath — это универсальная и способная стратегия выбора элементов. Это тоже мое личное предпочтение и фаворит. XPath может выбрать любой элемент на странице независимо от того, есть ли у вас классы и идентификаторы для использования (хотя без классов или идентификаторов становится трудно поддерживать и иногда ломким). Эта опция особенно универсальна, потому что вы можете выбрать родительские элементы . XPath также имеет много встроенных функций, которые позволяют вам настраивать выбор элементов.
Однако, с универсальностью приходит сложность. Учитывая способность делать так много с XPath, у вас также есть более крутая кривая обучения по сравнению с другими стратегиями выбора элементов. Это компенсируется большой онлайн-документацией, которую легко найти. Одним из замечательных ресурсов является учебник по XPath, который можно найти на W3Schools.com.
Следует также отметить, что при использовании XPath существует компромисс. Хотя вы можете выбирать родительские элементы и использовать очень универсальные встроенные функции, XPath плохо работает в Internet Explorer. Вы должны учитывать этот компромисс при выборе стратегии выбора элемента. Если вам нужно иметь возможность выбирать родительские элементы, вам необходимо учитывать влияние, которое это окажет на кросс-браузерное тестирование в Internet Explorer. По сути, это займет больше времени для запуска ваших автоматических тестов в Internet Explorer. Если пользовательская база вашего приложения не имеет большого использования Internet Explorer, это будет хорошим вариантом для вас, поскольку вы можете рассмотреть возможность запуска тестов в Internet Explorer реже, чем в других браузерах. Если ваша пользовательская база широко используется Internet Explorer, вы должны рассматривать XPath только как запасной вариант, если другие более эффективные подходы не работают для вашей организации.
Пример:
Если у вас есть требование выбрать родительские элементы, вы должны выбрать XPath. Вот как вы это делаете: в нашем примере предположим, что вы хотите настроить таргетинг на родительский элемент главного меню на основе одного из якорных элементов:
driver.find_elements(By.XPATH, "//a[id=menu]/../")
Этот селектор элементов будет нацелен на первый экземпляр тега привязки с идентификатором, равным «menu», затем с «/../» нацелен на родительский элемент. В результате вы нацелились на элемент главного меню.
Резюме: XPath
| Pros | Cons |
| Можно выбрать родительский элемент | Низкая производительность в IE |
| Очень универсальный | Небольшая кривая обучения |
| Много поддержки онлайн |
Отлично: ID и класс
Селекторы ID и Class — это две разные опции в автоматизации, которые выполняют разные функции в приложении. Однако, учитывая, какую стратегию выбора элементов использовать в вашей автоматизации, они настолько мало отличаются, что нам не нужно рассматривать их отдельно. В приложении атрибуты «id» и «class» элементов, если они определены, позволяют разработчику пользовательского интерфейса манипулировать и стилизовать приложение. Для автоматизации мы используем его для определения конкретного элемента для взаимодействия в автоматизации.
Большим преимуществом использования идентификаторов и селекторов элементов класса является то, что на них меньше всего влияют структурные изменения в приложении. Гипотетически говоря, если вы создадите селектор XPath или CSS, который опирается на цепочку из нескольких элементов и некоторых дочерних элементов , что произойдет, когда запрос функции прерывает эту цепочку, добавляя новые элементы? При использовании селекторов элементов ID и Class вы можете ориентироваться на определенные элементы, а не полагаться на структуру страницы. Вы сохраняете надежность своей автоматики, не проявляя слишком снисходительности к изменениям. Изменения должны быть обнаружены с помощью автоматизации путем создания контрольных примеров, ориентированных на расположение определенных элементов. Изменения не должны нарушать весь ваш пакет автоматизации. Однако, если разработчик вносит изменения непосредственно в идентификатор или класс, используемый в автоматизации, это повлияет на ваши тесты.
Эту стратегию выбора элементов нельзя будет использовать, если тестируемое приложение не реализует идентификаторы и классы как часть передового опыта разработки. Если у тегов HTML нет идентификаторов и классов, которые вы можете использовать в своей автоматизации, такой подход становится сложным для использования.
Пример:
В нашем примере, если бы мы выбрали элемент меню верхнего уровня, это выглядело бы так:
driver.find_elements(By.ID, "main-menu")
Если бы мы выбрали первый пункт меню, это выглядело бы так:
driver.find_elements(By.CLASS_NAME, "menu")
Резюме: ID и класс
| Pros | Cons |
| Простота в обслуживании | Разработчик может изменить их, нарушив автоматизацию |
| Легко учить | |
| Наименее затронуты изменения структуры страницы |
Лучшее: пользовательские атрибуты с помощью селектора CSS
Если ваша организация QA имеет хорошие отношения сотрудничества с разработчиками, скорее всего, вы сможете использовать этот наилучший практический подход для вашей автоматизации. Использование пользовательских атрибутов и селекторов CSS для целевых элементов имеет множество преимуществ как для команды QA, так и для организации. Для команды QA это позволяет инженерам по автоматизации выбирать нужные им элементы без создания сложных селекторов элементов. Однако для этого требуется возможность добавления пользовательских атрибутов, которые группа автоматизации может использовать в приложении. Чтобы воспользоваться преимуществами этого передового опыта, ваша команда разработчиков и QA должна работать совместно для реализации этой стратегии.
Я хотел бы уделить минуту, чтобы отметить, что подход селектора CSS не зависит от пользовательских атрибутов. Селекторы CSS могут предназначаться для любого тега и атрибута в документе HTML точно так же, как XPath.
Теперь давайте посмотрим, что влечет за собой этот подход. Чтобы наилучшим образом выполнить это, ваша команда автоматизации должна понимать, на что они хотят ориентироваться в своей автоматизации. Работая с разработчиками, скорее всего, с внешними инженерами, они затем разработали бы шаблон для настраиваемого атрибута, который нужно поместить в каждую цель, к которой должна подключиться группа автоматизации. Для этого примера мы прикрепляем атрибут «tid» к целевым элементам.
Одна техническая заметка, на которую стоит обратить внимание, — это ограничение в селекторах CSS. Им преднамеренно не разрешается выбирать родительские элементы, как может XPath. Это сделано, чтобы избежать бесконечных циклов в стилях CSS на веб-страницах. Хотя это хорошо для веб-дизайна, оно является ограничением для его использования в качестве стратегии выбора элементов автоматизации. К счастью, этого ограничения можно избежать с помощью пользовательских атрибутов, реализованных при разработке. QA должен запрашивать соответствующие пользовательские атрибуты, чтобы не было необходимости выбирать родительский элемент.
Если сотрудничество между вашей командой разработчиков и QA еще не существует в вашей организации, не беспокойтесь! Вы должны реализовать эту стратегию, потому что она может быть механизмом, который управляет этим сотрудничеством. Независимо от того, существует эта культура или нет, вы должны принять этот подход и посмотреть, что из этого выйдет. Вы не только будете иметь простую в обслуживании стратегию выбора элементов, но и увидите преимущества распространения совместной работы на другие области вашей организации. Отношения сотрудничества, которые будут построены, принесут вам пользу по многим аспектам обеспечения качества, таким как уменьшение количества дефектов, сокращение времени выхода на рынок и повышение производительности.
Чтобы наилучшим образом реализовать эту стратегию выбора элементов и создать такое сотрудничество, ваша команда QA должна быть вовлечена в процесс проектирования с самого начала. Работая с разработкой, они должны пересмотреть требования. По мере разработки этой функции, QA должен предлагать, где можно реализовать пользовательские атрибуты для лучшей поддержки усилий по автоматизации. Поощряя это сотрудничество в начале этапа проектирования, вы будете сближать группы обеспечения качества и группы разработчиков в плане сотрудничества и повышать эффективность процесса разработки. Это, вероятно, окажет положительное влияние на другие области жизненного цикла разработки программного обеспечения. Поощрение сотрудничества здесь позволит познакомить разработчиков и QA друг с другом, так что сотрудничество в других областях, вероятно, также будет происходить.
Пример:
Реализация пользовательских атрибутов для тегов привязки в нашем примере 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 любого элемента. Поместив это за спецификатором идентификатора # main-menu, он фокусирует поиск элементов внутри главного меню.
Если вы хотите выбрать эту стратегию без использования пользовательских атрибутов, вы все еще на правильном пути. Например, вы можете настроить таргетинг на ссылки в подменю «Магазин», используя следующий подход:
driver.find_element(By. CSS_SELECTOR, "#main-menu .submenu a")
Эта стратегия позволит инженерам по автоматизации создавать надежные средства автоматизации, которые просты в обслуживании и не нарушаются несущественными изменениями в пользовательском интерфейсе. Выбор этой стратегии — наилучший из возможных подходов. Это будет не только легко обслуживаемое решение для автоматизации, но и будет стимулировать сотрудничество между вашей командой QA и вашими разработчиками.
Сводка: пользовательские атрибуты с помощью селекторов CSS
| Pros | Cons |
| Легко учить | Первоначальные усилия, связанные с установлением отношений сотрудничества с командой разработчиков |
| Много поддержки онлайн | |
| разносторонний | |
| Отличная производительность во всех браузерах |
Вывод
Есть несколько отличных вариантов реализации стратегии селектора стандартных элементов в вашей среде автоматизации. Следует избегать таких опций, как имя тега или текст ссылки, если только это не единственный вариант. Селекторы XPath, ID и Class являются хорошим маршрутом. Безусловно, лучшим подходом является реализация пользовательских атрибутов и назначение их с помощью CSS-селекторов. Это также способствует сотрудничеству между командой разработчиков и QA.
Вот ваши варианты по сравнению бок о бок:
|
✓ — Да
/ — Частичное
No — нет
|
Имя тега, текст ссылки (и т. Д.)
|
XPath
|
ID и класс
|
Пользовательские атрибуты с помощью селекторов CSS
|
| Легко использовать | ✓ | ✓ | ✓ | ✓ |
| Онлайн поддержка | ✓ | ✓ | ✓ | ✓ |
| разносторонний | ✗ | ✓ | ✗ | / |
| Производительность | ✓ | ✗ | ✓ | ✓ |
| Легко поддерживать | ✗ | ✓ | ✓ | ✓ |
| Поощряет сотрудничество | ✗ | ✗ | ✓ | ✓ |