Мы уже разобрали что такое xpath, давайте поговорим о CSS.
CSS (Cascading Style Sheets) и XPath (XML Path Language) — это два мощных инструмента, используемых в веб-разработке и тестировании. Хотя оба они служат для навигации и выбора элементов на веб-странице, они имеют существенные различия в применении и функциональности. В этой статье мы рассмотрим основные отличия между CSS и XPath, чтобы лучше понять их уникальные особенности и области применения.
Вы можете увидеть CSS стили у любого элемента на странице
Что такое CSS?
CSS — это язык стилей, используемый для оформления и представления HTML-документов. Он позволяет задавать цвета, шрифты, отступы, размеры и другие визуальные параметры элементов на странице. CSS предоставляет возможность отделить контент от стиля, что делает код более читаемым и поддерживаемым.
Основные функции CSS
Селекторы классов: Используются для выбора элементов с определённым классом.
Селекторы идентификаторов: Применяются для выбора элементов с уникальным идентификатором.
Селекторы элементов: Выбирают все элементы определённого типа (например, все <p> элементы).
Псевдоклассы: Применяются к элементам в зависимости от их состояния (например, :hover для элементов при наведении курсора).
Псевдоэлементы: Позволяют добавлять стили к частям элементов, которые не представлены в HTML (например, :before или :after).
Что такое XPath?
XPath — это язык запросов, используемый для навигации по XML-документам. Он позволяет выбирать узлы и элементы в XML-дереве, основываясь на их структуре и отношениях. XPath широко используется в автоматизации тестирования, особенно в инструментах, таких как Selenium WebDriver.
Основные функции XPath
Оси узлов: Позволяют перемещаться по дереву XML-документа, выбирая узлы на разных уровнях.
Оси атрибутов: Используются для выбора атрибутов узлов.
Фильтрация: Позволяет выбирать узлы на основе их значений или атрибутов.
Операторы: Включают логические операторы (например, and, or, not), а также арифметические и строковые операторы.
Отличия CSS и XPath
- Тип документа:
CSS: Используется для стилизации HTML-документов.
XPath: Применяется для навигации по XML-документам. - Функциональность:
CSS: Предназначен для визуального оформления элементов.
XPath: Используется для выбора и навигации по элементам на основе их структуры. - Синтаксис:
CSS: Использует селекторы и псевдоклассы для выбора элементов.
XPath: Применяет выражения и оси для навигации по XML-дереву.
Применение CSS
Хоть CSS нужен для обозначения стилей, мы можем его использовать его для поиска элементов. Это не так удобно как с xpath, но иногда путь css может быть короче раз в 10 и эффективней, всё зависит от ситуации.
Если а xpath мы искали значения через консоль с помощью синтаксиса:
$x("")
То для CSS мы будем использовать
$$("")
Это мы разбирали в 1 статье
Абсолютный путь
Как и в xpath, мы можем с самого первого элемента идти до нужного.
- html > body > div
Относительный путь
Если у нас есть название элемента, то мы можем просто прописать без пути до него. Конечно если он уникален.
- main
Дочерние элементы
Нам ничего не мешает выбрать любой элемент и зайти внутрь него.
- main > div
Дочерний элемент любого уровня
В данном случае не нужно чтобы элементы шли последовательно. Дочерний элемент может быть в любом месте родительского.
- main meta
Id элемента
Это наверное самое частое использование CSS.
- #page-root
Можем явно указывать элемент
- div#page-root
По классу
Также наиболее используемый способ. То есть мы ставим точку и прописываем класс
- ._theme_white
По названию атрибутов
Тут точно также как и xpath, есть элемент у него есть атрибуты мы по ним ищем. Можно прописывать несколько сразу.
- span[itemprop][itemtype]
По значению атрибутов
Всё тоже самое, только мы добавляем конкретное значение для нашего атрибута.
- meta[content='Обучение тестированию']
Ну и конечно вы можете это всё легко сочетать
- div._theme_white span[itemprop] > meta[content='Обучение тестированию']
Если у вас есть вопросы или вы просто хотите стать частью команды тестировщиков, то переходи в ТГ канал, где можем пообщаться с единомышленниками и найти много интересных и полезных знаний!Также если вам нужна индивидуальная консультация, менторство и помощь в создании проекта пишите в ТГ канал!