Interakcja ze stroną

Testy Cypressa zakładają testowanie stron i aplikacji webowych z perspektywy użytkownika końcowego. Framework Cypressa dostarcza bogatą bibliotekę API z obiektami, metodami i właściwościami do wchodzenia w interakcję ze stroną.

Dostęp do elementu HTML

Aby wejść w interakcję z jakimś elementem HTML musimy najpierw sprawdzić czy istnieje i pobrać do niego uchwyt (tzw. handler). Uchwyt to nic innego jak obiekt, który posiada metody cypressa, których wykonanie zasymuluje stosowną akcję na tym elemencie.

Uchwyt do elementu można pobrać na kilka sposobów. Kilka istotniejszych z nich to metody:

  • get - zwraca DOM element po query selektorze (np. id, klasie, nazwie elementu lub atrybutach),
cy.get('a.btn'); // uchwyt do hiperłącza a z klasą btn
  • contains - zwraca elementy posiadający określoną zawartość
cy.contains('Title');
  • find - pozwala pobrać uchwyt do elementu zagnieżdżonego w innym elemencie
cy.get('form').find('input'); // zwróci uchwyt do inputa z formularza

Kliknięcie

Aby zasymulować kliknięcie na element HTML należy użyć metodę click(), która może przyjąć koordynaty do kliknięcia lub być wywołana z obiektu reprezentującego element.

Przykładowo spróbujmy wejść na stronę iana.org, organizacji, która zajmuje się nadzorem nad adresacją IP i domenami. Następnie odnajdźmy na stronie hiperłącze "Domain Names" i poinstruujmy Cypressa by kliknąć w niego.

describe('Test example.com', () => {
  it('navigate to www.iana.org', () => {
    cy.visit('https://www.iana.org/');
  });
  
  it('is can found a clickable href', () => {
    cy.contains('Domain Names').click();
  });
  
  it('is iana domains page', () => {
    cy.location().should((loc) => {
      expect(loc.pathname).to.equal('/domains');
    });
  });
});

Analogicznie można zasymulować podwójne kliknięcie przy pomocy metod:

cy.dblclick();

oraz klik prawym przyciskiem myszy:

cy.rightclick();

Podczas wchodzenia w interakcje z elementami Cypress będzie próbował wykonać interakcję z nimi z perspektywy użytkownika. To znaczy, że element musi być dostępny i nie może być np. przykryty innym elementem z właściwością z-index lub niewidoczny.

Wpisywanie danych

Niektóre formularze wymagają wpisania danych. Aby wpisać dane do pól tekstowych należy użyć metody type() np.

cy.get('input').type('dane wejściowe{enter}');

W ten sposób do pola zostanie wpisany tekst "dane wejściowe" a następnie naciśnięty ENTER.

Inne znaki specjalne to między innymi:

  • {del} - klawisz DELETE
  • {esc} - klawisz ESCAPE
  • {uparrow} - strzałka do góry
  • {alt} - klawisz ALT
  • {ctrl} - klawisz CTRL
  • {shift} - klawisz SHIFT

Pola typu checkbox oraz radio

Aby zaznaczyć pole typu checkbox lub radio należy użyć metody check() np.

cy.get('#terms').check();

W ten sposób można zaznaczyć pole z id "terms". Analogicznie można odznaczyć pole przy pomocy metody uncheck().


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