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.