Cypress: Täydellinen opas web-sovellusten päästä-päähän-testaukseen

Nykypäivän nopeasti kehittyvässä web-kehityksen maailmassa web-sovellusten laadun ja luotettavuuden varmistaminen on ensisijaisen tärkeää. Päästä-päähän (End-to-End, E2E) -testaus on ratkaisevassa roolissa varmistettaessa, että kaikki sovelluksen osat toimivat saumattomasti yhdessä käyttäjän näkökulmasta. Cypress on noussut johtavaksi E2E-testauskehykseksi tarjoten kehittäjäystävällisen kokemuksen, tehokkaita ominaisuuksia ja erinomaisen suorituskyvyn. Tämä kattava opas johdattaa sinut läpi kaiken, mitä sinun tarvitsee tietää päästäksesi alkuun Cypressin kanssa ja testataksesi tehokkaasti web-sovelluksiasi.

Mitä on Cypress?

Cypress on uuden sukupolven front-end-testaustyökalu, joka on rakennettu modernia webiä varten. Toisin kuin perinteiset testauskehykset, jotka ajavat testejä selaimessa, Cypress toimii suoraan selaimessa, mikä antaa sinulle vertaansa vailla olevan hallinnan ja näkyvyyden sovelluksesi toimintaan. Se on suunniteltu nopeaksi, luotettavaksi ja helppokäyttöiseksi, mikä tekee siitä suositun valinnan kehittäjien ja QA-insinöörien keskuudessa maailmanlaajuisesti. Cypress on kirjoitettu JavaScriptillä ja suoritetaan selaimen sisällä, mikä tekee siitä erittäin suorituskykyisen ja tarjoaa vertaansa vailla olevan pääsyn sovelluksen sisäisiin osiin.

Cypressin käytön keskeiset hyödyt

• Kehittäjäystävällinen: Cypress tarjoaa selkeän ja intuitiivisen API:n, mikä tekee testien kirjoittamisesta ja debuggaamisesta helppoa.
• Aikamatkustus: Cypress ottaa tilannekuvia sovelluksesi tilasta jokaisen testikomennon aikana, jolloin voit palata ajassa taaksepäin ja nähdä tarkalleen, mitä missäkin vaiheessa tapahtui.
• Reaaliaikaiset päivitykset: Cypress päivittyy automaattisesti, kun teet muutoksia testeihisi, tarjoten välitöntä palautetta.
• Automaattinen odotus: Cypress odottaa automaattisesti elementtien tulemista näkyviin tai interaktiivisiksi ennen toimintojen suorittamista, poistaen tarpeen eksplisiittisille odotuksille.
• Verkkoliikenteen hallinta: Cypress mahdollistaa verkkopyyntöjen ja -vastausten stubbaamisen, mikä antaa sinun simuloida erilaisia skenaarioita ja testata sovelluksesi virheenkäsittelyä.
• Debugattavuus: Cypress tarjoaa erinomaiset debuggaustyökalut, mukaan lukien tehokkaan debuggerin ja yksityiskohtaiset virheilmoitukset.
• Selainrajaton testaus: Cypress tukee useita selaimia, mukaan lukien Chrome, Firefox, Edge ja Electron.
• Headless-testaus: Aja testejä headless-tilassa nopeampaa suoritusta varten CI/CD-ympäristöissä.
• Sisäänrakennetut assertiot: Cypress tarjoaa laajan valikoiman sisäänrakennettuja assertioita sovelluksesi odotetun toiminnan varmistamiseksi.

Asennus ja käyttöönotto

Cypressin käytön aloittaminen on suoraviivaista. Näin asennat sen:

1. Edellytykset: Varmista, että sinulla on Node.js ja npm (Node Package Manager) asennettuna järjestelmääsi. Voit ladata ne viralliselta Node.js-sivustolta.
2. Asenna Cypress: Avaa terminaali tai komentokehote, siirry projektihakemistoosi ja suorita seuraava komento:

npm install cypress --save-dev

3. Avaa Cypress: Kun asennus on valmis, voit avata Cypress Test Runnerin suorittamalla:

npx cypress open

Tämä komento käynnistää Cypress Test Runnerin, joka tarjoaa graafisen käyttöliittymän testien ajamiseen ja debuggaamiseen.

Ensimmäisen Cypress-testin kirjoittaminen

Luodaan yksinkertainen testi varmistamaan, että verkkosivuston etusivu latautuu oikein. Luo uusi tiedosto nimeltä `example.cy.js` projektisi `cypress/e2e`-hakemistoon.

// cypress/e2e/example.cy.js

describe('Ensimmäinen testini', () => {
  it('Vierailee Kitchen Sink -sivustolla', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Käydään tämä testi läpi:

• `describe()`: Määrittelee testikokoelman (test suite), joka on kokoelma toisiinsa liittyviä testejä.
• `it()`: Määrittelee yksittäisen testitapauksen testikokoelman sisällä.
• `cy.visit()`: Siirtyy määriteltyyn URL-osoitteeseen.
• `cy.contains()`: Etsii elementin, joka sisältää määritellyn tekstin.
• `.click()`: Napsauttaa valittua elementtiä.
• `cy.url()`: Hakee sivun nykyisen URL-osoitteen.
• `.should()`: Tekee assertion sovelluksen tilasta.
• `cy.get()`: Valitsee elementin CSS-valitsimella.
• `.type()`: Kirjoittaa tekstiä valittuun elementtiin.
• `.should('have.value', 'fake@email.com')`: Varmistaa, että elementin arvo on 'fake@email.com'.

Aja tämä testi Cypress Test Runnerissa nähdäksesi sen toiminnassa. Sinun pitäisi nähdä selaimen siirtyvän Cypress Kitchen Sink -sivustolle, napsauttavan "type"-linkkiä ja varmistavan URL-osoitteen.

Cypress-komennot

Cypress tarjoaa laajan valikoiman komentoja sovelluksesi kanssa vuorovaikuttamiseen. Tässä on joitakin yleisimmin käytettyjä komentoja:

• `cy.visit(url)`: Siirtyy määriteltyyn URL-osoitteeseen.
• `cy.get(selector)`: Valitsee elementin CSS-valitsimella.
• `cy.contains(content)`: Valitsee elementin, joka sisältää määritellyn tekstin.
• `cy.click()`: Napsauttaa valittua elementtiä.
• `cy.type(text)`: Kirjoittaa tekstiä valittuun elementtiin.
• `cy.clear()`: Tyhjentää syötekentän tai tekstialueen sisällön.
• `cy.submit()`: Lähettää lomakkeen.
• `cy.check()`: Valitsee valintaruudun tai radiopainikkeen.
• `cy.uncheck()`: Poistaa valinnan valintaruudusta.
• `cy.select(value)`: Valitsee vaihtoehdon pudotusvalikosta.
• `cy.scrollTo(position)`: Vierittää sivun määriteltyyn kohtaan.
• `cy.trigger(event)`: Laukaisee DOM-tapahtuman valitussa elementissä.
• `cy.request(url, options)`: Tekee HTTP-pyynnön määriteltyyn URL-osoitteeseen.
• `cy.intercept(route, handler)`: Sieppaa HTTP-pyynnöt, jotka vastaavat määriteltyä reittiä.
• `cy.wait(time)`: Odottaa määritellyn ajan.
• `cy.reload()`: Lataa nykyisen sivun uudelleen.
• `cy.go(direction)`: Siirtyy edelliselle tai seuraavalle sivulle selaimen historiassa.
• `cy.url()`: Hakee sivun nykyisen URL-osoitteen.
• `cy.title()`: Hakee sivun otsikon.
• `cy.window()`: Hakee window-objektin.
• `cy.document()`: Hakee document-objektin.
• `cy.viewport(width, height)`: Asettaa näkymän koon.

Nämä ovat vain muutamia monista Cypressin tarjoamista komennoista. Katso Cypressin dokumentaatiosta täydellinen luettelo komennoista ja niiden asetuksista.

Assertiot Cypressissä

Assertioita käytetään varmistamaan sovelluksesi odotettu toiminta. Cypress tarjoaa laajan valikoiman sisäänrakennettuja assertioita, joilla voit tarkistaa elementtien tilan, URL-osoitteen, otsikon ja paljon muuta. Assertiot ketjutetaan Cypress-komentojen perään `.should()`-metodilla.

Tässä on joitakin yleisiä assertioesimerkkejä:

• `.should('be.visible')`: Varmistaa, että elementti on näkyvissä.
• `.should('not.be.visible')`: Varmistaa, että elementti ei ole näkyvissä.
• `.should('be.enabled')`: Varmistaa, että elementti on käytössä.
• `.should('be.disabled')`: Varmistaa, että elementti on pois käytöstä.
• `.should('have.text', 'odotettu teksti')`: Varmistaa, että elementillä on määritelty teksti.
• `.should('contain', 'odotettu teksti')`: Varmistaa, että elementti sisältää määritellyn tekstin.
• `.should('have.value', 'odotettu arvo')`: Varmistaa, että elementillä on määritelty arvo.
• `.should('have.class', 'odotettu luokka')`: Varmistaa, että elementillä on määritelty luokka.
• `.should('have.attr', 'attribuutin nimi', 'odotettu arvo')`: Varmistaa, että elementillä on määritelty attribuutti ja arvo.
• `.should('have.css', 'css-ominaisuus', 'odotettu arvo')`: Varmistaa, että elementillä on määritelty CSS-ominaisuus ja arvo.
• `.should('have.length', odotettu pituus)`: Varmistaa, että elementillä on määritelty pituus (esim. elementtien määrä listassa).

Voit myös luoda omia assertioita omiin tarpeisiisi.

Parhaat käytännöt Cypress-testien kirjoittamiseen

Parhaiden käytäntöjen noudattaminen auttaa sinua kirjoittamaan ylläpidettävämpiä, luotettavampia ja tehokkaampia Cypress-testejä. Tässä on joitakin suosituksia:

• Kirjoita selkeitä ja ytimekkäitä testejä: Jokaisen testin tulisi keskittyä tiettyyn toiminnallisuuteen tai skenaarioon. Vältä liian monimutkaisten testien kirjoittamista, joita on vaikea ymmärtää ja ylläpitää.
• Käytä kuvaavia testien nimiä: Anna testeillesi kuvaavat nimet, jotka ilmaisevat selvästi, mitä ne testaavat.
• Vältä arvojen kovakoodaamista: Käytä muuttujia tai konfiguraatiotiedostoja tallentaaksesi arvoja, jotka saattavat muuttua ajan myötä.
• Käytä omia komentoja: Luo omia komentoja kapseloidaksesi uudelleenkäytettävää logiikkaa ja tehdäksesi testeistäsi luettavampia.
• Eristä testit: Jokaisen testin tulisi olla riippumaton muista testeistä. Vältä luottamasta sovelluksen tilaan aiemmista testeistä.
• Siivoa testien jälkeen: Nollaa sovelluksen tila jokaisen testin jälkeen varmistaaksesi, että seuraavat testit alkavat puhtaalta pöydältä.
• Käytä data-attribuutteja: Käytä data-attribuutteja (esim. `data-testid`) elementtien valitsemiseen testeissäsi. Data-attribuutit muuttuvat epätodennäköisemmin kuin CSS-luokat tai ID:t, mikä tekee testeistäsi kestävämpiä käyttöliittymän muutoksille.
• Vältä eksplisiittisiä odotuksia: Cypress odottaa automaattisesti elementtien tulemista näkyviin tai interaktiivisiksi. Vältä eksplisiittisten odotusten (esim. `cy.wait()`) käyttöä, ellei se ole ehdottoman välttämätöntä.
• Testaa käyttäjäkulkuja: Keskity testaamaan käyttäjäkulkuja yksittäisten komponenttien sijaan. Tämä auttaa sinua varmistamaan, että sovelluksesi toimii oikein käyttäjän näkökulmasta.
• Aja testejä säännöllisesti: Integroi Cypress-testit CI/CD-putkeesi ja aja niitä säännöllisesti havaitaksesi virheet varhaisessa kehitysvaiheessa.

Edistyneet Cypress-tekniikat

Stubbaus ja mockaus

Cypress mahdollistaa verkkopyyntöjen ja -vastausten stubbaamisen, mikä antaa sinun simuloida erilaisia skenaarioita ja testata sovelluksesi virheenkäsittelyä. Tämä on erityisen hyödyllistä testattaessa ominaisuuksia, jotka tukeutuvat ulkoisiin API-rajapintoihin tai palveluihin.

Stubataksesi verkkopyynnön voit käyttää `cy.intercept()`-komentoa. Esimerkiksi alla oleva koodi stubbaa GET-pyynnön osoitteeseen `/api/users` ja palauttaa mock-vastauksen:

cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Voit sitten odottaa siepattua pyyntöä komennolla `cy.wait('@getUsers')` ja varmistaa, että sovelluksesi käsittelee mock-vastauksen oikein.

Local Storagen ja evästeiden käsittely

Cypress tarjoaa komentoja local storagen ja evästeiden kanssa vuorovaikuttamiseen. Voit käyttää näitä komentoja asettaaksesi, hakeaksesi ja tyhjentääksesi local storagea ja evästeitä testeissäsi.

Asettaaksesi local storage -kohteen voit käyttää `cy.window()`-komentoa päästäksesi käsiksi window-objektiin ja käyttää sitten `localStorage.setItem()`-metodia. Esimerkiksi:

cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Hakeaksesi local storage -kohteen voit käyttää `cy.window()`-komentoa ja sitten `localStorage.getItem()`-metodia. Esimerkiksi:

cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Asettaaksesi evästeen voit käyttää `cy.setCookie()`-komentoa. Esimerkiksi:

cy.setCookie('myCookie', 'myCookieValue')

Hakeaksesi evästeen voit käyttää `cy.getCookie()`-komentoa. Esimerkiksi:

cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Tiedostojen latausten käsittely

Cypress tarjoaa lisäosan nimeltä `cypress-file-upload`, joka yksinkertaistaa tiedostojen latauksia testeissäsi. Asenna lisäosa suorittamalla seuraava komento:

npm install -D cypress-file-upload

Lisää sitten seuraava rivi `cypress/support/commands.js`-tiedostoosi:

import 'cypress-file-upload';

Voit sitten käyttää `cy.uploadFile()`-komentoa ladataksesi tiedoston. Esimerkiksi:

cy.get('input[type="file"]').attachFile('example.txt')

IFrame-kehysten kanssa työskentely

IFrame-kehysten testaaminen voi olla hankalaa, mutta Cypress tarjoaa tavan vuorovaikuttaa niiden kanssa. Voit käyttää `cy.frameLoaded()`-komentoa odottaaksesi IFrame-kehyksen latautumista ja sitten `cy.iframe()`-komentoa saadaksesi IFrame-kehyksen document-objektin.

cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress ja jatkuva integraatio/jatkuva käyttöönotto (CI/CD)

Cypressin integroiminen CI/CD-putkeesi on olennaista sovelluksesi laadun varmistamiseksi. Voit ajaa Cypress-testejä headless-tilassa CI/CD-ympäristössäsi. Näin se tapahtuu:

1. Asenna Cypress: Varmista, että Cypress on asennettu projektisi riippuvuudeksi.
2. Määritä CI/CD: Määritä CI/CD-putkesi ajamaan Cypress-testit jokaisen buildin jälkeen.
3. Aja Cypress headless-tilassa: Käytä `cypress run` -komentoa ajaaksesi Cypress-testit headless-tilassa.

Esimerkki CI/CD-konfiguraatiosta (käyttäen GitHub Actionsia):

name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Tämä konfiguraatio ajaa Cypress-testit aina, kun koodia pushataan `main`-haaraan tai luodaan pull-pyyntö `main`-haaraa vastaan. `cypress-io/github-action` -toiminto yksinkertaistaa Cypress-testien ajamista GitHub Actionsissa.

Cypress-testien debuggaus

Cypress tarjoaa erinomaiset debuggaustyökalut, jotka auttavat sinua tunnistamaan ja korjaamaan ongelmia testeissäsi. Tässä on muutamia vinkkejä Cypress-testien debuggaamiseen:

• Käytä Cypress Test Runneria: Cypress Test Runner tarjoaa visuaalisen käyttöliittymän testien ajamiseen ja debuggaamiseen. Voit käydä testejäsi läpi komento kerrallaan, tarkastella sovelluksen tilaa ja nähdä yksityiskohtaisia virheilmoituksia.
• Käytä `cy.pause()`-komentoa: `cy.pause()`-komento pysäyttää testisi suorituksen ja antaa sinun tarkastella sovelluksen tilaa selaimen kehittäjätyökaluissa.
• Käytä `cy.debug()`-komentoa: `cy.debug()`-komento tulostaa valitun elementin konsoliin, jolloin voit tarkastella sen ominaisuuksia ja attribuutteja.
• Käytä selaimen kehittäjätyökaluja: Selaimen kehittäjätyökalut tarjoavat runsaasti tietoa sovelluksestasi, mukaan lukien DOM, verkkopyynnöt ja konsolilokit.
• Lue virheilmoitukset huolellisesti: Cypress tarjoaa yksityiskohtaisia virheilmoituksia, jotka voivat auttaa sinua tunnistamaan virheen syyn. Kiinnitä huomiota virheilmoitukseen ja kutsupinoon.

Cypress vs. muut testauskehykset

Vaikka Cypress on tehokas päästä-päähän-testauskehys, on tärkeää ymmärtää, miten se vertautuu muihin suosittuihin vaihtoehtoihin. Tässä on lyhyt yleiskatsaus:

• Selenium: Selenium on laajalti käytetty automaatiotestauskehys. Vaikka se on joustava ja tukee useita kieliä, sen asentaminen ja ylläpito voi olla monimutkaista. Cypress tarjoaa yksinkertaisemman ja kehittäjäystävällisemmän kokemuksen, erityisesti JavaScript-pohjaisille sovelluksille.
• Puppeteer: Puppeteer on Node-kirjasto, joka tarjoaa korkean tason API:n headless Chromen tai Chromiumin ohjaamiseen. Se on erinomainen web-scrapingiin ja selain-tehtävien automatisointiin, mutta saattaa vaatia enemmän manuaalista konfigurointia päästä-päähän-testauksessa verrattuna Cypressiin.
• Playwright: Playwright on toinen Microsoftin kehittämä selainrajaton automaatiokehys. Se on samankaltainen kuin Puppeteer, mutta tarjoaa laajemman selaintuen. Cypressillä on ainutlaatuinen aikamatkustusdebuggeri ja integroidumpi testaamiskokemus.

Kehyksen valinta riippuu projektisi erityistarpeista ja vaatimuksista. Cypress on erinomainen valinta moderneille web-sovelluksille, jotka vaativat nopeaa, luotettavaa ja kehittäjäystävällistä päästä-päähän-testausta.

Tosielämän esimerkkejä Cypressin käytöstä

Tarkastellaan muutamaa tosielämän esimerkkiä siitä, miten Cypressia voidaan käyttää erilaisten web-sovellusten testaamiseen:

Verkkokauppasovelluksen testaaminen

Voit käyttää Cypressia testaamaan erilaisia käyttäjäkulkuja verkkokauppasovelluksessa, kuten:

• Tuotteiden etsiminen
• Tuotteiden lisääminen ostoskoriin
• Kassalle siirtyminen ja tilauksen tekeminen
• Tiliasetusten hallinta

Tässä on esimerkki Cypress-testistä, joka varmistaa, että käyttäjä voi onnistuneesti lisätä tuotteen ostoskoriinsa:

it('Lisää tuotteen ostoskoriin', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Sosiaalisen median sovelluksen testaaminen

Voit käyttää Cypressia testaamaan käyttäjäinteraktioita sosiaalisen median sovelluksessa, kuten:

• Uuden julkaisun luominen
• Julkaisusta tykkääminen
• Julkaisun kommentointi
• Muiden käyttäjien seuraaminen

Tässä on esimerkki Cypress-testistä, joka varmistaa, että käyttäjä voi onnistuneesti luoda uuden julkaisun:

it('Luo uuden julkaisun', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hei, maailma!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hei, maailma!')
})

Pankkisovelluksen testaaminen

Pankkisovelluksissa Cypressia voidaan käyttää testaamaan kriittisiä toiminnallisuuksia, kuten:

• Turvallinen sisäänkirjautuminen
• Tilin saldojen tarkistaminen
• Varojen siirtäminen
• Maksunsaajien hallinta

Testi varojen siirron varmistamiseksi voisi näyttää tältä (asianmukaisella stubbauksella tietoturvan vuoksi):

it('Siirtää varoja onnistuneesti', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Yhteenveto

Cypress on tehokas ja monipuolinen päästä-päähän-testauskehys, joka voi auttaa sinua varmistamaan web-sovellustesi laadun ja luotettavuuden. Sen kehittäjäystävällinen API, tehokkaat ominaisuudet ja erinomainen suorituskyky tekevät siitä suositun valinnan kehittäjien ja QA-insinöörien keskuudessa maailmanlaajuisesti. Noudattamalla tässä oppaassa esitettyjä parhaita käytäntöjä voit kirjoittaa tehokkaita Cypress-testejä, jotka auttavat sinua löytämään virheet varhaisessa kehitysvaiheessa ja toimittamaan korkealaatuista ohjelmistoa käyttäjillesi.

Kun web-sovellukset kehittyvät jatkuvasti, päästä-päähän-testauksen merkitys vain kasvaa. Cypressin omaksuminen ja sen integroiminen kehitystyönkulkuusi antaa sinulle mahdollisuuden rakentaa vankempia, luotettavampia ja käyttäjäystävällisempiä web-kokemuksia.