- Что такое локатор
- Что такое XPath
- Основные выражения XPath и их значение
- Плюсы и минусы XPath
- Пошаговое руководство по созданию XPath
- Что такое CSS-селекторы
- Типы CSS-селекторов
- Плюсы и минусы CSS-селекторов
- Пошаговое руководство по созданию CSS-селекторов
- Какой селектор удобнее
- Часто задаваемые вопросы
Новые инструменты автоматизации предоставляют набор функций для сквозного тестирования, тестирования API и тестирования компонентов. В некоторых инструментах даже применяется искусственный интеллект и автоматизация без кода. Большинство средств автоматизации веба объединяет одна важная особенность — локатор.
Тестировщики могут запутаться, когда им придется выбирать между двумя наиболее популярными локаторами — XPath и CSS. В этом руководстве мы проведем подробное сравнение XPath и CSS-селекторов, чтобы помочь принять правильное решение.
Что такое локатор?
Локаторы используются для выбора элемента в дереве DOM. Инструменты автоматизации применяют локаторы для поиска элемента на веб-странице. Инструменты требуют уникального идентификатора элемента для выполнения действий с ним, а локатор используется для поиска элемента, на основе выражения в локаторе.
Итак, локаторы можно разделить на два типа:
- XPath-локаторы
- CSS-локаторы
XPath и CSS-локаторы существуют уже много лет, и все основные браузеры, фреймворки и языки программирования поддерживают их. Можно задаться вопросом, какой локатор лучше, CSS-селектор или XPath-селектор. Вместо того чтобы делать быстрые выводы, лучше попытаться сразу понять их особенности в деталях. Изучив плюсы и минусы каждого локатора, мы сможем определить, какой из них лучше всего подходит для конкретной ситуации.
Что такое XPath
XPath расшифровывается как XML Path Language. Это основанный на запросах синтаксис для XML-схем и HTML-документов, который тестировщики используют для перемещения по элементам документа.
Выражения XPath относятся к значениям, используемым в XPath, выражение обычно содержит цепочку из нескольких элементов с определенным синтаксисом или структурой.
Разберемся в типах XPath.
Абсолютный XPath
Абсолютный XPath начинается с корня HTML или XML-документа и начинается с одинарной косой черты /.
Относительный или динамический XPath
Относительный XPath может начинаться в любом месте дерева DOM, он начинается с двойной косой черты //
Оси XPath
В XPath предусмотрены оси, это специальные ключевые слова, которые можно использовать в выражении XPath. Они предназначены для определения положения узла, относительно текущего узла.
Например, если вам нужно выбрать родителя текущего узла в контексте, вы можете выстроить XPath следующим образом:
//div[@id=»abc»]/parent::*
Основные выражения XPath и их значение
- / Выбрать корень узла
- * Выбрать любой элемент узла
- . Выбрать текущий узел в заданном контексте
- // Выбрать узел из текущего узла, который соответствует указанному выражению
- .. Родитель выбранного узла
- @ Выбрать нужный атрибут
- @* Выбрать любой атрибут
- Node(): Выбрать любой узел
Преимущества XPath
- XPath поддерживает все основные библиотеки автоматизации и языки программирования
- Он обеспечивает двунаправленный поток, имеется в виду — обход может быть в обе стороны
- Поддерживает как XML, так и HTML документы
- Выражение XPath работает на любом уровне документа, без ограничений на начало обхода на определенном уровне
- Это декларативное выражение, а не процедурное, что помогает эффективно использовать любые индексы и различные типы осей для выбора нужного узла
- Селектор XPath совместим как со старыми, так и с современными браузерами
- Локатор XPath предоставляет оси и методы. Вы можете использовать их в выражениях XPath для решения сложных задач с локаторами.
Недостатки XPath
- Производительность XPath варьируется от приложения к приложению. Эксперты утверждают, что локаторы XPath работают несколько медленно, что может влиять на общую скорость теста.
- XPath не может решить проблемы современного теневого DOM.
- XPath связан с более чем одним элементом в дереве DOM, и он может ломаться, когда вносятся новые изменения на уровне элементов.
- Использование индексов (определенных узлов с номерами) в XPath вызывает высокую сложность поддержки в будущем (например, //div[1]).
- Если XPath усложняется, он становится грязным, и его читабельность снижается.
Как создать XPath
Вы можете легко создать XPath с помощью инструментов разработчика в любом браузере; сейчас каждый браузер поставляется с инструментами разработчика, а также поддерживает выражения XPath.
Примечание: Как упоминалось ранее, есть два типа XPath: абсолютный и относительный; использование абсолютного XPath не рекомендуется и не используется многими тестировщиками. Одной из причин является то, что абсолютный селектор начинается с корня HTML-элемента, любые новые изменения в DOM-элементе могут легко нарушить XPath, а поскольку он начинается с корня, это приводит к торможению. Относительный XPath используется более широко. Далее разберемся в построении выражений XPath с помощью популярного браузера Chrome.
Пошаговое руководство по созданию XPath
Рассмотрим сценарий, в котором вам нужно перейти на сайт Testsigma и получить XPath для логотипа Testsigma.
1: Перейдите на сайт Testsigma в браузере Chrome.
2: Щелкните правой кнопкой мыши на логотипе Testsigma и нажмите на кнопку inspect, чтобы открыть инструменты разработчика.
3: Убедитесь, что инструменты разработчика Chrome открыты с активной вкладкой Elements.
4: Нажмите CTRL + F в инструментах разработчика, чтобы вызвать ввод фразы для поиска.
5: Начните создавать выражение XPath. Вы должны создать XPath на основе правил (или синтаксиса выражений) XPath. Однако инструменты разработчика просты и могут мгновенно проверить корректность ввода, выделив нужный узел в интерфейсе. В данном сценарии вам нужно найти XPath для логотипа Testsigma, поэтому мы ищем элемент HTML, содержащий логотип Testsigma.
На изображении выше показан HTML-код логотипа Testsigma, как видите, это <img>, содержащий такие атрибуты, как alt, class и id.
Теперь построим XPath на основе выражения id. XPath выглядит следующим образом:
//img[@id=’second_logo’]
Как видим на изображении, после ввода XPath-выражения для логотипа в поле поиска, логотип Testsigma подсвечивается в интерфейсе, что означает, что введенный XPath правильный.
Как проверить правильность выражения XPath в браузере
Для проверки правильности XPath в браузере — два важных момента:
- Выражение XPath в окне поиска инструментов разработчика должно соответствовать хотя бы одному элементу (убедитесь, что это обязательный элемент).
- После ввода правильного выражения XPath конкретный элемент пользовательского интерфейса должен быть подсвечен.
Если ни один из вышеперечисленных критериев не соответствует, лучше переписать выражение XPath.
Что такое селекторы CSS
CSS-селекторы — тип локаторов, которые следуют строковым представлениям элементов HTML, таких как теги, атрибуты и классы. Подобно XPath, CSS также использует определенный синтаксис выражений селектора. Он также помогает однозначно идентифицировать элементы на странице.
Типы селекторов CSS
- Селекторы элементов
- Селекторы идентификаторов
- Селекторы классов
- Селекторы атрибутов
- Универсальные селекторы
Прежде чем перейти к объяснению типов селекторов CSS, рассмотрим некоторые выражения.
Таблица: Выражения CSS-селекторов и их использование
| Селектор | Пример | Описание |
| # | #id1 | Используется для выбора элемента с id |
| . | .class1 | Для выбора элемента с классом |
| [ ] | img[alt=’abc’] | Для записи CSS-селекторов на основе атрибутов |
| > | div>button | Для записи CSS-селекторов на основе атрибутов |
| + | div + button | Для выбора элемента, расположенного сразу после первого (div) |
| ~ | div~nav | Для выбора элемента, которому предшествует второй элемент (div) |
| [attribute*=value] | a[href*=»testsigma»] | Выбирает элементы, которые содержат значение атрибута |
| [attribute$=value] | [href$=’.docx] | Выбирает элемент, значение элемента которого заканчивается значением атрибута |
| [attribute=value] | [alt=’abc’] | Выбирает элемент с точным совпадением значения атрибута |
| :nth-child(n) | div:nth-child(2) | Выбирает n-го ребенка, так же, как индекс в XPath |
Рассмотрим селекторы подробнее.
Селектор элементов
Селектор CSS-элементов выбирает HTML-элемент по имени тега, такого как p, div, img и т. д.
Пример: div
Селектор идентификаторов CSS
Выбрать HTML-элемент на основе атрибута id нужного тега. В качестве префикса для селектора id используется символ # (хэш).
Пример #myid
Селектор классов CSS
Селектор классов выбирает элемент HTML на основе атрибута class. В качестве префикса для селектора класса используется «.» (точка)
Пример: .myclass
Универсальный селектор
* используется для выбора всех элементов в HTML-документе.
Селектор атрибутов
Селектор атрибутов используется для выбора HTML-элемента на основе типа и значения атрибута.
Пример: img[alt=’abc’]
Преимущества CSS-селекторов перед XPath
- Селекторы CSS работают быстрее по сравнению с XPath.
- Эти селекторы более читабельны и просты в освоении.
- Селекторы CSS совместимы со всеми современными браузерами.
- Они работают на всех устройствах и отзывчивых экранах.
- Селекторы CSS более надежны, поскольку в основном привязаны к одному элементу HTML.
Недостатки селекторов CSS по сравнению с XPath
- CSS является однонаправленным; он позволяет обходить узлы только от родителя к ребенку. Когда возникают сложные сценарии, сложно построить локаторы.
- Селекторы CSS не предоставляют методов для работы со сложными локаторами элементов, как это делает метод Axes в XPath.
- Если приложение не включает атрибуты элемента в дерево DOM, написать селектор CSS будет сложно, и он может стать ненадежным.
- Вы не можете построить селекторы на основе видимого текста.
Как создавать селекторы CSS
Как и XPath, все современные браузеры поддерживают CSS-селекторы. Создавать CSS-селекторы можно с помощью инструментов разработчика в браузере. Все браузеры Firefox, Edge и Chrome предоставляют консоль разработчика, в которой удобно создавать CSS-селекторы. Вы можете проверить CSS-селекторы на корректность, проверив выделение интерфейса и количество выделенных элементов в консоли разработчика.
Рассмотрим сценарий написания CSS-селектора для логотипа Testsigma на веб-странице testsigma.com.
Пошаговое руководство по созданию CSS-селекторов
1: Перейдите на сайт testsigma.com в Chrome.
2: Щелкните правой кнопкой мыши на логотипе TestSigma и выберите в контекстном меню inspect.
3: Нажмите CTRL + F, чтобы вызвать ввод строки поиска в инструментах разработчика.
4: Напишите CSS-селектор.
Напишите CSS-селектор в соответствии с правилами CSS-селекторов. Например, если мы посмотрим на дерево DOM для логотипа, это тег <img>, содержащий атрибуты id, class и alt.
Исходя из наличия атрибутов и тегов, вы можете построить следующие CSS-селекторы.
CSS ID селекторы
Просто используйте # и id.
Пример ID селектора: #second_logo
CSS атрибут селектора
Также можете использовать атрибут alt для этого селектора.
Пример атрибута селектора:
img[alt=»Логотип Testsigma»]
CSS-класс селектора
Поскольку этот тег также включает имя класса, вы можете использовать имя класса селектора
Пример селектора класса:
.img-responsive
Примечание: При выполнении теста автоматизации необходимо указать один из селекторов, но не все.
Различия между XPath и CSS селектором
Таблица: Различия между XPath и CSS-селектором
| XPath-селектор | CSS-селектор |
| Xpath является двунаправленным, вы можете перемещать элементы от родителя к ребенку или от ребенка к родителю | CSS selector является однонаправленным, вы можете перемещаться только от родителя к ребенку |
| XPath медленнее | CSS selector сравнительно быстрее |
| XPath позволяет строить текстовые селекторы | CSS не позволяет строить текстовые селекторы |
| XPath должен начинаться с / или //, за которым следует имя тега или подстановочные знаки, такие как * | CSS позволяет напрямую давать некоторые селекторы на основе атрибутов, такие как # для id и . для классов |
| XPath предоставляет оси для решения сложных проблем с селекторами | В CSS нет методов осей |
| Xpath становится менее читабельным по мере масштабирования | Селекторы CSS более читабельны |
Какой селектор XPath или CSS лучше?
Селекторы CSS и XPath широко используются в автоматизации тестирования. Выбор XPath или CSS зависит от архитектуры приложения, особенностей рендеринга страниц и т. д. Например, если нет элемента с уникальными атрибутами и нужно выбрать элемент на основе видимого текста, то нужно использовать XPath; если у вас есть id, класс или любой другой уникальный атрибут, доступный на уровне элемента, использование XPath может усложнить фреймворк. В таком случае можно просто воспользоваться CSS-селекторами. Внимательно рассмотрев сценарии выше, можно заметить, что выбор XPath vs CSS зависит от дизайна приложения, доступности атрибутов в дереве DOM и сложности структуры элементов.
XPath vs CSS в автоматизации
Любой фреймворк автоматизации поддерживает селекторы на основе CSS и XPath. Чтобы сделать ваш фреймворк автоматизации более стабильным и последовательным, создайте чеклист, когда что использовать. Работа с селекторами требует определенных навыков. Как XPath, так и CSS-селекторы могут быть созданы различными способами; наиболее важным является создание стабильных и надежных локаторов.
Часто задаваемые вопросы
Почему селекторы CSS имеют более высокий приоритет по сравнению с XPath
В отличие от CSS-селекторов, селекторы XPath связаны с более чем одним узлом (элементом) в иерархии DOM, поэтому внесение любых изменений на уровне DOM может нарушить процесс. CSS связан с меньшим количеством узлов, он более стабилен. Эксперты советуют использовать XPath только в том случае, если нет возможности написать CSS-селекторы.
Что быстрее — CSS или XPath
Селекторы CSS быстрее XPath, поскольку они однонаправленные; они способны быстрее искать элементы в дереве DOM.
Какой селектор CSS самый удобный?
Селекторы CSS ID более предпочтительны, чем любые другие. Причина в том, что ID связан с одним элементом HTML и является уникальным.
