Щоб почати використовувати селектори XPath, вам слід встановити спеціальний плагін.

Ми маємо на увазі ліцензійний плагін від Cypress.

Встановлюється він типовим способом - командою npm install D cypress-xpath виконується для встановлення потрібного пакунка.

Далі потрібно додати функцію cypress-xpath до файлу cypress/support/index.js до файлу cypress/sypress/support/index.js.

Якщо цього не зробити, плагін не буде зареєстровано, а користувач побачить повідомлення про те, що cy.xpath не є функцією.

Якщо користувачі використовують TypeScriptїм потрібно додати cypress-xpath до tsconfig.jsonfile файли.

Ця дія допоможе додати функцію xpath () яка працює разом з командою .get командою .get.

Він допомагає повернути HTML-елемент, який ви можете використовувати в подальшій роботі.

Далі ми розглянемо кілька прикладів XPath і спробуємо проаналізувати, як вони використовуються на основі команд Cypress (наприклад, при наданні послуг з тестування безпеки).

Приклад Cypress/XPath

Виділення всього документа:

cy.xpath(‘/html’)

cy.root()

Виділення об’єкта за певним текстом:

cy.xpath(‘//*[text()[contains( .,”My Lists”)]]’)

cy.contains(‘Мої списки’)

cy.xpath(‘//*[@data-cy=”create-board”]’)

cy.get(‘[data-cy= create-board=””]’)

Вибір елемента, що містить потрібний клас:

cy.xpath(‘//*[contains(@class, “font-semibold”]’)

cy.get(‘.font-semibold’)

[highlight dark=”no”]Зверніть увагу![/highlight] Цей селектор XPath повністю відповідає випадковим налаштуванням всередині класу класу атрибуту class.

Тому, якщо елемент X містить значення button_front-semibold цей селектор XPath також знайде його.

Виділення елемента з певним класом за текстом:

cy.xpath(‘//*[contains(@class, “font-semibold”)][text()[contains( .,”My Lists”)]]’)

cy.contains(‘.font-semibold’, ‘Мої списки’)

Фільтрація об’єкта за індексом:

cy.xpath(‘(//div[contains(@class, “list”)])[1]’)

cy.get(‘.list’).eq(0)

Майте на увазі, що селектор XPath починається не з 0, як в інших мовах, а з 1.

Пошук дочірнього елемента:

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