Jak używać xpath’ów w Cypress’ie?

Instalacja dodatku cypress-xpatch

Czasami łatwiej jest zidentyfikować jakiś obiekt na stronie za pomocą xpath’ów, albo po prostu lubimy ich używać. Domyślnie Cypress nie pozwala nam używać xpath’ów, ale nic nie stoi na przeszkodzie żeby to zmienić. Po pierwsze musimy zainstalować pewien dodatek do Cypress’a używając następującego polecenia:

npm install -D cypress-xpath

Może się zdarzyć że nie uda się tego zrobić i pojawi się komunikat o braku pliku „package.json”. Wówczas w katalogu głównym należy uruchomić polecenie:

npm init -y

Następnie będąc w katalogu z naszym projektem przechodzimy do cypress/support i edytujemy plik index.js dopisując na końcu:

require('cypress-xpath')

Całość wygląda mniej więcej tak:

Używanie dodatku cypress-xpatch

Pisząc testy w Cypressie zazwyczaj używamy CSS selektorów. Wówczas przykład użycia takiego selektora mógłby wyglądać tak:

cy.get('.login').shoul('be.visible').click()

Gdybyśmy jednak chcieli używać xpath’ów zamiast CSS’ów wówczas napisalibyśmy tak:

cy.xpath('//span[text()="Log in"]').should('be.visible').click()

Czyli zamiast cy.get(’selektor’)…. użyjemy cy.xpath(’xpath’)…. .