Автор: Филип Рик (Filip Hric)
Оригинал статьи
Перевод: Ольга Алифанова

Сразу начну с того, что сообщу, что я не фанат селекторов xpath. Я считаю, что их трудно читать, а выгода от них по сравнению с CSS-селекторами или атрибутами data-* невелика. При помощи встроенного в Cypress jQuery можно выбирать элементы куда более читабельным способом. Однако эти селекторы широко используются, и их выбирают в проектах, где нет доступа к исходному коду. Поэтому полезно знать, как ими пользоваться.

Cypress и xpath

Чтобы воспользоваться селекторами xpath, нужно установить плагин. Это официальный поддерживаемый Cypress плагин. Установка довольно стандартна – выполните npm install -D cypress-xpath для установки пакета.

Затем нужно добавить ('cypress-xpath') в ваш файл cypress/support/index.js. Без этого плагин не будет зарегистрирован, и вы получите ошибку, что cy.xpath – это не функция.

Если вы используете TypeScript, не забудьте добавить cypress-xpath в ваши типы в файле tsconfig.jsonfile.

Это добавит команду .xpath(), которая работает схожим с командой .get() образом. Она возвращает HTML-элемент, с которым затем можно взаимодействовать. Рассмотрим несколько примеров xpath и сравним их с использованием селекторов при помощи команд Cypress.

Как это заведено в моем блоге, рабочий код можно посмотреть в моем репозитории.

Примеры Cypress vs 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 совпадет с любой подстрокой в атрибуте класса. Это означаеТ, что если элемент имеет имя класса 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 не использует нумерацию с нуля, как это часто бывает в других языках, а начинает с единицы.

Выбор дочернего элемента

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')

Надеюсь, это вам поможет.

Обсудить в форуме