Поиск элементов на странице Xpath и CSS с нуля

• Видео посвящено гайду по нахождению локаторов для UI автотестов.  

• Рассматриваются XPath и CSS-селекторы.  

• Будут рассмотрены все возможные варианты и их особенности.  

• Видео подготовлено на специальной странице с сложными элементами.  

• В описании видео есть полезные ссылки и ссылка на телеграм-канал.  

• Страница подготовлена для демонстрации разницы между XPath и CSS-селекторами.  

• Страница содержит текстовые элементы и блоки с наворотами.  

• Консоль разработчика используется для анализа структуры страницы.  

• XPath более точный инструмент для нахождения элементов на странице.  

• XPath применим к HTML-структуре и файлам с структурой.  

• XPath позволяет строить логические условия и делать полный или неполный поиск.  

• CSS-селекторы имеют более слабую логику, но иногда проще найти элемент.  

• XPath можно использовать для поиска элементов в любом направлении.  

• CSS-селекторы позволяют двигаться только вниз или вверх.  

• Автор предпочитает XPath из-за его точности и простоты.  

• Первый элемент для нахождения - текст "Телеграм Чат".  

• Копирование XPath из браузера может быть неэффективным из-за динамичной структуры сайтов.  

• В динамичных страницах XPath, скопированный из браузера, может быть одноразовым.  

• Цель видео - показать, как писать XPath и CSS-селекторы вручную.  

• HTML-страница состоит из тегов и атрибутов.  

• Теги начинаются с тега <tag>, например, <h3>.  

• Поиск элементов начинается с тега, например, <h3>.  

• Поиск по стилям может быть случайно активирован.  

• Для активации поиска по стилям нужно сделать область активной и нажать Ctrl+F.  

• XPath начинается с двух слэшей //.  

• XPath позволяет находить уникальные элементы на странице.  

• Атрибуты помогают уточнять поиск, например, класс или стиль.  

• Атрибуты добавляются к тегу для уточнения поиска.  

• Атрибуты используются для добавления свойств стиля.  

• Для уточнения поиска нужно указать тег и атрибут в фигурных скобках.  

• Пример: <h3 class="header"></h3>.  

• Перечисление элементов в квадратных скобках не всегда эффективно.  

• Для нумерации элементов можно использовать фигурные скобки и цифры.  

• Пример: <h3>2</h3> для второго элемента.  

• Важно уточнять поиск, чтобы найти один элемент.  

• Пример: <h3 class="header">2</h3>.  

• Уточнение по атрибутам помогает избежать путаницы.  

• Можно искать элементы по содержанию атрибутов.  

• Пример: <h3 class="header" contains "yellow"></h3>.  

• Это упрощает поиск элементов с длинными названиями.  

• Можно искать элементы по нескольким атрибутам.  

• Пример: <h3 class="header" style="color: red"></h3>.  

• Можно использовать перечисление или сопоставление для уточнения поиска.  

• Уточнение поиска помогает найти один элемент на странице.  

• В будущем будут показаны методы поиска по первым буквам атрибутов.  

• Для получения дополнительной информации можно кликнуть по тайм-кодам.  

• Метод Contain позволяет найти совпадение текста в другом тексте.  

• Для использования метода нужно поставить собаку перед атрибутом.  

• Метод работает с атрибутами, заключенными в круглые скобки.  

• Пример использования Contain для поиска слова "kitty cat".  

• Метод позволяет найти элементы, содержащие определенные слова.  

• Для уточнения поиска можно использовать квадратные скобки.  

• Метод Contain позволяет уточнять, что именно нужно найти.  

• Можно использовать квадратные скобки для уточнения атрибутов.  

• Пример использования для поиска элемента с атрибутом "dog".  

• Метод помогает находить элементы с длинными названиями.  

• Пример использования для поиска элемента с названием "atom".  

• Можно уточнять поиск, добавляя дополнительные атрибуты.  

• Метод Not Contain позволяет найти элементы, не содержащие определенное слово.  

• Пример использования для поиска элемента, не содержащего "abracadabra".  

• Метод работает аналогично Contain, но с отрицанием.  

• Метод позволяет спускаться по дереву элементов.  

• Пример использования для поиска элемента с атрибутом "id" равным "good".  

• Можно использовать слэш для указания пути к следующему элементу.  

• Двойной слэш позволяет пропустить элементы, которые не интересны.  

• Пример использования для пропуска элементов, которые не содержат информацию.  

• Можно уточнять поиск, добавляя атрибуты в квадратные скобки.  

• ID элементов часто уникальны и помогают в поиске.  

• Пример: поиск элемента с ID "not me" находит один элемент.  

• Использование ID позволяет избежать сложных путей поиска.  

• Важно обращать внимание на атрибуты элементов.  

• Пример: поиск элемента с атрибутом "spans" находит два элемента.  

• Использование анкестера позволяет искать элементы сверху по дереву.  

• Можно искать элементы, начиная с текущего элемента и двигаясь вверх.  

• Пример: поиск элемента в блоке "div" с атрибутом "sister".  

• Использование анкестера для поиска элементов сверху.  

• Если элемент не имеет атрибута ID, можно использовать анкестер для поиска.  

• Пример: поиск элемента без атрибута ID в блоке "div".  

• Использование анкестера для поиска элементов сверху.  

• Можно найти несколько элементов с одним ID.  

• Пример: использование OR для поиска трех элементов с одним ID.  

• Полезно для получения коллекции элементов.  

• Методы XPath позволяют упрощать поиск элементов.  

• Пример: использование методов last, first, second для получения последнего, первого и второго элемента.  

• Полезно для интерактивных таблиц и удаления элементов.  

• Логические выражения можно использовать для фильтрации элементов.  

• Пример: поиск элемента с атрибутом "price" и условием "price not equal to five".  

• Логика может зависеть от значения атрибута.  

• Часто приходится искать элементы по тексту.  

• Пример: поиск элемента по тексту с использованием метода text.  

• Полезно для поиска конкретных элементов, таких как кнопки.  

• Метод contain позволяет найти элемент по его части.  

• Пример: поиск элемента через "частью".  

• Можно использовать метод contain для поиска элементов по тексту.  

• Метод contain можно использовать для поиска элементов через пробел.  

• Пример: поиск элемента с текстом "частью".  

• Метод contain позволяет находить элементы по тексту, даже если он содержит пробелы.  

• Метод contain позволяет находить элементы без уточнения тега.  

• Пример: использование звездочки для поиска всех элементов на странице.  

• Это полезно для нахождения общих элементов и уточнения их атрибутов.  

• CSS селекторы позволяют находить элементы без использования слэшей и звездочек.  

• Пример: поиск элемента с классом "хедер".  

• CSS селекторы ищут элементы по значению атрибута, а не по его названию.  

• Регулярные выражения можно использовать для фильтрации элементов.  

• Пример: поиск элементов, начинающихся с буквы "р".  

• Регулярные выражения помогают находить элементы по определенным критериям.  

• Использование решетки для уточнения поиска элементов.  

• Пример: поиск элемента с атрибутом "гуд".  

• CSS селекторы позволяют уточнять поиск элементов по атрибутам.  

• CSS позволяет фильтровать элементы по условиям.  

• Пример: поиск элементов с атрибутом "прайс", который не равен "5".  

• Условия можно добавлять через двоеточие и круглые скобки.  

• Метод last в CSS позволяет найти последний элемент.  

• Пример: поиск второго элемента с помощью атрибута "последний".  

• CSS позволяет выбирать элементы по их положению в DOM.  

• Универсальный тег обозначается звездочкой.  

• Пример: поиск всех элементов с тегом "претендер".  

• Универсальный тег полезен для поиска всех элементов с определенным атрибутом.  

• Видео объясняет различия между XPath и CSS селекторами.  

• CSS селекторы могут быть проще в использовании, но XPath позволяет двигаться вверх и вниз по DOM.  

• Призыв ставить лайки, подписываться на канал и следить за новыми видео.