Xpath-селекторы считаются довольно трудночитаемыми и не дают особых преимуществ по сравнению с селекторами CSS или data-* атрибутами. Благодаря jQuery, встроенному в Cypress, вы можете выбирать элементы гораздо более удобным для чтения способом. Тем не менее, xpath-селекторы широко используются и являются оптимальным выбором для проектов, в которых у вас нет доступа к исходному коду. Поэтому полезно иметь представление о том, как их использовать.
БЕСПЛАТНО СКАЧАТЬ КНИГИ в телеграм канале "Библиотека тестировщика"
Содержание
Установка плагина xpath
Для использования селекторов xpath необходимо сначала установить плагин. Это официальный плагин, поддерживаемый компанией Cypress. Установка довольно стандартная. Чтобы установить пакет, достаточно использовать npm install -D cypress-xpath.
Затем необходимо добавить require('cypress-xpath') в файл cypress/support/index.js. Без этого ваш плагин не будет зарегистрирован, и вы получите ошибку “cy.xpath is not a function”.
Если вы используете TypeScript, не забудьте добавить cypress-xpath в файл tsconfig.json.
Это добавит команду .xpath(), которая работает аналогично команде .get(). Она возвращает HTML-элемент, с которым можно взаимодействовать. Рассмотрим несколько примеров работы с xpath и сравним их с использованием селекторов с командами Cypress.
Примеры использования xpath
Выбор всего документа
cy.xpath('/html')
cy.root() Выбор элемента по тексту
cy.xpath('//*[text()[contains(.,"My Boards")]]')
cy.contains('My Boards') Выбор конкретного элемента по тексту
cy.xpath('//h1[contains(.,"My Boards")]')
cy.contains('h1', 'My Boards') Выбор элемента по атрибуту
cy.xpath('//*[@data-cy="create-board"]')
cy.get('[data-cy="create-board"]') Выбор элемента, содержащего класс
cy.xpath('//*[contains(@class, "font-semibold"]')
cy.get('.font-semibold') Важное замечание. Этот xpath будет соответствовать любой подстроке в атрибуте class. То есть если у нас есть элемент с именем класса button_font-semibold, то он также будет соответствовать этому xpath-селектору.
Выбор элемента с определенным классом по тексту
cy.xpath('//*[contains(@class, "font-semibold")][text()[contains(.,"My Boards")]]')
cy.contains('.font-semibold', 'My Boards') Фильтрация элемента по индексу
cy.xpath('(//div[contains(@class, "board")])[1]')
cy.get('.board').eq(0) Обратите внимание, что xpath не использует нумерацию с 0, как это часто делается в других языках, а начинает нумерацию с единицы.
Выбор дочернего элемента
cy.xpath('//div[contains(@class, "list")]//child::div[contains(@class, "card")]')
cy.get('.list').find('.card') Выбор элемента, содержащего определенный дочерний элемент
cy.xpath('//div[contains(@class, "list")][.//div[contains(@class, "card")]]')
cy.get('.card').parents('.list') В данном примере мы хотим выбрать только тот список, который содержит некоторые карточки:
Выбор элемента после определенного элемента
cy.xpath('//div[contains(@class, "card")][preceding::div[contains(., "milk")]]')
cy.contains('.card', 'milk').next('.card') Выбор элемента перед определенным элементом
cy.xpath('//div[contains(@class, "card")][following::div[contains(., "bread")]]')
cy.contains('.card', 'bread').next('.card') Если вы хотите узнать больше о выделении элементов в Cypress, рекомендуем ознакомиться с другими статьями, посвященным автодополнению селекторов и очень полезной команде .contains().
Перевод статьи «Cypress basics: xpath vs. CSS selectors».