Testy uwierzytelniania

Pierwszym czego testy z wykorzystaniem Cypressa przygotujemy będą testy uwierzytelniania czyli sprawdzenia poświadczeń i założenia sesji. Pamiętaj by tworząc testy mieć uruchomionego XAMPPa, silnik bazodanowy i web server.

Najpierw w panelu administracyjnym załóż konto testowe np. "redaktor" i nadaj mu uprawnienia redaktora.

https://cdn.xyzedge.com.pl/codehub/tester/auth1.png

Wykorzystamy to konto do logowania się z poziomu Cypressa.

Utwórz nowy skrypt Cypressa z zestawem testowym i nazwij go np. wordpress.spec.js. Wewnątrz utwórz pierwszy test:

describe('Authentication', () => {
  it('Login to existing account', () => {
    // ...
  });
});

W tym miejscu spróbujemy zalogować się tym kontem do WordPressa. Pierwszym krokiem będzie przejście na stronę główną:

cy.visit('http://localhost');

Następnie należy odszukać hiperłącze Zaloguj się i kliknąć w nie. Ponieważ hiperłącze może być ukryte poza rzutnią, przekażemy parametr force: true by pominąć sprawdzanie czy jest aktualnie widoczny przycisk.

cy.contains('Zaloguj się').click({force: true});

Spróbuj uruchomić dotychczasowy test, powinien on wykonać się poprawnie:

https://cdn.xyzedge.com.pl/codehub/tester/auth2.png

Po przejściu odczekaj na załadowanie strony logowania.

 cy.location('pathname').should('include', '/wp-login.php');

Następnie odszukaj pole z loginem i wpisz tam login:

cy.get('input[type="text"]').focus().type('redaktor');

To samo z hasłem, możesz przejść tabulatorem lub odszukać pole jak powyżej. Przekazując opcję log: false hasło nie wyświetli się w logach.

cy.get('input[type="password"]').focus().type('hasło', {log: false});

Na końcu należy kliknąć w przycisk "Zaloguj się":

cy.contains('Zaloguj się').click();

A po zalogowaniu sprawdzić czy udało się zalogować poprawnie.

cy.contains('Witaj, redaktor');

Cały test może zatem wyglądać w ten sposób:

describe('Authentication', () => {
  it('Login to existing account', () => {
    cy.visit('http://localhost');
    cy.contains('Zaloguj się').click({force: true});
    cy.location('pathname').should('include', '/wp-login.php');
    cy.get('input[type="text"]').focus().type('redaktor');
    cy.get('input[type="password"]').focus().type('hasło', {log: false});
    cy.contains('Zaloguj się').click();
    cy.contains('Witaj, redaktor');
  });
});

A testy po wykonaniu następująco:

https://cdn.xyzedge.com.pl/codehub/tester/auth3.png


Nasza strona internetowa używa plików cookies (tzw. ciasteczka) w celach statystycznych, reklamowych oraz funkcjonalnych. Dowiedz się więcej jak je wyłączyć. Ta strona jest chroniona przez reCAPTCHA i Google polityka prywatności Google i regulamin Google.

logo

Copyright © 2021 CodeHub.pl