Menu Zamknij

Cypress best practices – selecting elements

W tej serii postaramy się Wam przedstawić dobre praktyki dotyczące pisania testów w Cypressie. Zaczniemy od wyszukiwania elementów na stronie. Zapraszam do lektury.

Wyszukiwanie elementów - get

Cypress umożliwia wyszukiwanie elementów na stronie za pomocą komend get oraz contains. Zajmijmy się teraz komendą get. Jej składnia wygląda następująco:

cy.get(selector)
cy.get(alias)
cy.get(selector, options)
cy.get(alias, options)

Przykłady użycia wyszukiwania elementu na stronie po nazwie selektora

Fragment kodu html:

<form action="...">
	<input type="text" name="imie">
</form>

Input to pole tekstowe do którego można wpisać np. imię czy nazwisko.

Załóżmy, że chcemy wyszukiwać ten element na stronie a następnie wpisać do niego wybrany tekst. Wyszukiwanie tego elementu mogłoby wyglądać następująco:

cy.get('input').type('Anna')

Ale co w przypadku gdy na stronie znajduje się więcej inputów. W tym przypadku cypress wyświetli nam taki komunikat:

Cypress znalazł na stronie 9 elementów. Dlatego sposobu wyszukiwania elementów tylko po nazwie selektora nie powinno się stosować.

 

Wyszukiwanie elementów po stylach tj.

cy.get('.btn.btn-large').click()

gdzie wyszukujemy element  po nazwie klasy również nie jest zupełnie jednoznaczne a dodatkowo style mogą się zmienić. Wtedy nasze testy przestaną przechodzić pomimo, że funkcjonalność będzie działać.

Wyszukiwanie elementów - contains

Innym sposobem wyszukiwanie elementów jest komenda contains. Używa ona następującej składni:

cy.contains(content)
cy.contains(content, options)
cy.contains(selector, content)
cy.contains(selector, content, options)

Jako kontent wpisujemy tekst, który musi zawierać wyszukiwany element. 

Fragment kodu HTML:

<button type=button>Send</button>

Aby znaleźć ten element na stronie po tekście  należałoby wyszukiwać go w ten sposób:

cy.contains('Send').click()

Ale co w przypadku gdy ten tekst się zmieni na ‘wyślij’.  W tym przypadku nasz test przestanie działać.

 

Zalecanym sposobem wyszukiwania elementów na stronie jest używanie atrybutów data-cy używanych tylko do testów. W ten sposób uniezależniamy się od zmian.

<button id="main" class="btn btn-large" data-cy="submit">Submit</button>

Wyszukiwanie takiego elementu w teście będzie wyglądać następująco:

cy.get('[data-cy=submit]').click()

Gdy pole, które chcemy wyszukać nie posiada takiego atrybutu możemy poprosić kolegów developerów o dodanie go do kodu strony.

Podsumowanie

Mam nadzieję, że informację zawarte w tym artykule były dla Was przydatne. Zachęcamy do zapoznania się z naszymi kolejnymi artykułami dot. najlepszych praktyk pisania testów w Cypressie. Jeśli chcecie dowiedzieć się o nich z pierwszej ręki zapraszamy do dołączenia do naszego Newslettera oraz grupy Facebook.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *