Testy automatyczne Cypress scripts

Testy automatyczne Cypress scripts to wpis pokazujący w jaki sposób rozszerzyć możliwości Cypressa. Jeżeli jesteś zainteresowany innymi wpisami dotyczącymi Cypressa, zapraszamy do odpowiedniego działu.

Wprowadzenie

Tworząc testy automatyczne z wykorzystaniem Cypressa może spotkać się z sytuacjami, że będziemy potrzebowali dodatkowego wsparcia by napisać nasze testy. W ramach tworzenia testów automatycznych, możecie mieć różne zagwozdki jak podejść do pewnych testów, albo jakie testy stworzyć. W ramach tego wpisu wskażemy Wam przykładowe testy które możecie zaimplementować w swoich projektach. Nie będą to najprostsze skrypty typu click, ale też nie będą to rozbudowane testy automatyczne. Czas na bardziej skomplikowane tematy – nadejdzie. 

Jako Ambasador Cypressa mam na celu rozpowszechnianie wiedzy o tym narzędziu, promowanie wartości jakie nam przyświecają.

Sprawdzenie ważności HTTPSa. 

W pierwszym przypadku będzie to wprowadzenie ręczne daty upływu HTTPSa i wykorzystanie biblioteki moment.js.

1. Instalujemy npm install moment 
2. Importujemy w naszej klasie: import moment from 'moment’;
3. Tworzymy krótki skrypt:

});

it('HTTPS data validation', () => {
  cy.request({
    method: 'HEAD',
    url: '/'
  }).then(response => {
    const certExpiryDate = 'Tue, 22 Aug 2023 00:59:59 GMT';
    expect(certExpiryDate).to.exist;
    expect(moment(certExpiryDate).diff(moment(), 'days')).to.be.at.least(5);
    const diffInDays = moment(certExpiryDate).diff(moment(), 'days');
    console.log(`The certificate expires in ${diffInDays} days.`);
  });
});

Weryfikacja serverName:

Oto przykład skryptu gdzie weryfikujemy nazwę servera.

  cy.request('/').then((response) => {
    const serverName = response.headers['server'];
    expect(serverName).to.equal('cloudflare');
  });

Sprawdzenie application/ld+json

Przykładowy skrypt w którym czy posiadamy application/ld+json

   cy.get('script[type="application/ld+json"]').should('exist');

Lokalizacja hosta

Oto przykład skryptu gdzie sprawdzamy lokalizację hosta

    expect(location.hostname).to.eq('www.example-page.com')

Sprawdzenie wartości cache-control header

Teraz przykład skryptu sprawdzamy wartości dla Cache-Control header. 

});

it('Should check Cache-Control header for "max-age=600"', () => {
  cy.intercept('**', (req) => {
    req.reply((res) => {
      expect(res.headers).to.have.property('cache-control');
      const cacheControl = res.headers['cache-control'];
      expect(cacheControl).to.equal('max-age=600');
    });
  }).as('getResponse');
  cy.wait('@getResponse');

Usuwanie wartości target = blank

Oto przykład skryptu gdzie możemy usnąć tą wartość by otworzyć element otwierający się zwyczajowo w nowym oknie

        cy.get('a[href="/message"][target="_blank"]')
            .invoke('removeAttr', 'target')
        cy.get('a[href="/message"]').click();

Kliknięcie entera

Jeżeli chcesz sprawdzić czy wpisując np. wartość w wyszukiwarce i klikając enter zajdzie interakacja skorzystaj ze skryptu:

cy.get('#myInput').type(`Stefan` + '{enter}')

cy.get('#myInput').clear().type(`Stefan` + '{enter}')

Podwójne kliknięcie

Jeżeli jakiś element potrzebuje podwójnego kliknięcia, nie wykonuj dwa razy komendy .click()

cy.get('.myElement').dblclick()

Sprawdzenie czy przycisk nie jest aktywny

Jak masz konieczność sprawdzenie przycisku że nie jest aktywny, np. przed wypełnieniem formularza, skorzystaj z :

cy.get('.myElement').should('be.disabled')

Sprawdzenie opisu meta

Kolejna rzecz przydatna pod kątem SEO, czy ktoś przez przypadek nam nie zmienił. 

        cy.get('head meta[name=description]')
            .should('have.attr', 'content')
            .should('include', 'Nasz opis')

1. zainstalowanie cypress-iframe
2. następnie import 'cypress-iframe’;
3. stworzenie skryptu:

        cy.iframe('#conversations-iframe')
        .find('button[aria-label*="Livechatt"]')
        .should('be.visible')
        .click()

cy.get('link[rel="canonical"]').should('have.attr', 'href', expectedHref)

Nagłówki

cy.contains('h1', 'Nagłówek 1').should('be.visible');
cy.contains('h2', 'Nagłówek 2').should('be.visible');

Przeładowanie strony

cy.reload();

Szybkość ładowania

    cy.window().then((win) => {
      const navigationStart = win.performance.timing.navigationStart;
      const loadEventEnd = win.performance.timing.loadEventEnd;
      const pageLoadTime = loadEventEnd - navigationStart;
      if (pageLoadTime <= 15000) {
        cy.log(`Page loaded in ${pageLoadTime}ms`);
      } else {
        cy.log(`Page took too long to load (${pageLoadTime}ms)`);
        expect(pageLoadTime).to.be.lessThan(15000);
      }
    });

Podsumowanie. 

Artykuł Testy automatyczne Cypress scripts – jest kolejnym krokiem dla Was by rozpocząć przygodę z tym narzędziem, Z racji popularyzacji narzędzia i dużego wsparcia które otrzymał Cypress na rozwój, będziemy poszerzać wpisy na ten temat. Wszelkie artykuły związane z Cypress IO znajdziecie w dedykowanym dziale.

+2