M

MLOG

Magyar

Átfogó útmutató a Cypresshez, a hatékony végponttól végpontig tartó tesztelési keretrendszerhez, amely a telepítést, a tesztírást, a hibakeresést, a CI/CD integrációt és a legjobb gyakorlatokat fedi le.

Cypress: A végső végponttól végpontig tartó tesztelési útmutató a webalkalmazásokhoz

A mai, gyorsan fejlődő webfejlesztési környezetben a webalkalmazások minőségének és megbízhatóságának biztosítása kiemelkedő fontosságú. A Végponttól Végpontig (E2E) tesztelés kulcsszerepet játszik annak ellenőrzésében, hogy az alkalmazás összes összetevője zökkenőmentesen együttműködik a felhasználó szemszögéből. A Cypress vezető E2E tesztelési keretrendszerré vált, amely fejlesztőbarát élményt, hatékony funkciókat és kiváló teljesítményt kínál. Ez az átfogó útmutató végigvezeti Önt mindenen, amit a Cypress elindításához és a webalkalmazások hatékony teszteléséhez tudnia kell.

Mi az a Cypress?

A Cypress egy következő generációs front-end tesztelő eszköz, amelyet a modern webre építettek. A hagyományos tesztelési keretrendszerekkel ellentétben, amelyek böngészőben futtatják a teszteket, a Cypress közvetlenül a böngészőben működik, ami páratlan irányítást és láthatóságot biztosít az alkalmazás viselkedésében. Gyorsnak, megbízhatónak és könnyen használhatónak tervezték, így népszerű választás a fejlesztők és a minőségbiztosítási mérnökök körében világszerte. A Cypress JavaScriptben íródott, és a böngészőben fut, ami nagyon nagy teljesítményt nyújt, és páratlan hozzáférést biztosít az alkalmazás belső működéséhez.

A Cypress használatának fő előnyei

Telepítés és beállítás

A Cypress használatának megkezdése egyszerű. Íme, hogyan telepítheti:

  1. Előfeltételek: Győződjön meg arról, hogy a Node.js és az npm (Node Package Manager) telepítve van a rendszerén. Letöltheti őket a hivatalos Node.js webhelyről.
  2. Cypress telepítése: Nyissa meg a terminált vagy a parancssort, lépjen a projektkönyvtárba, és futtassa a következő parancsot:
    3. npm install cypress --save-dev
  3. A Cypress megnyitása: A telepítés befejezése után megnyithatja a Cypress Test Runner-t a következő futtatásával:
    4. npx cypress open

    Ez a parancs elindítja a Cypress Test Runner-t, amely grafikus felületet biztosít a tesztek futtatásához és hibakereséséhez.

Az első Cypress teszt írása

Készítsünk egy egyszerű tesztet annak ellenőrzésére, hogy a webhely kezdőlapja helyesen töltődik-e be. Hozzon létre egy `example.cy.js` nevű új fájlt a projekt `cypress/e2e` könyvtárában.


// cypress/e2e/example.cy.js

describe('Az első tesztem', () => {
  it('Meglátogatja a Kitchen Sink-et', () => {
    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')
  })
})

Bontsuk le ezt a tesztet:

Futtassa ezt a tesztet a Cypress Test Runner-ben, hogy lássa működés közben. Látnia kell, hogy a böngésző a Cypress Kitchen Sink webhelyre navigál, rákattint a "type" linkre, és ellenőrzi az URL-t.

Cypress parancsok

A Cypress nagyszámú parancsot biztosít az alkalmazással való interakcióhoz. Íme néhány a leggyakrabban használt parancsok közül:

Ez csak néhány a Cypressben elérhető sok parancs közül. Olvassa el a Cypress dokumentációt a parancsok teljes listájáért és azok beállításaiért.

Állítások a Cypressben

Az állításokat az alkalmazás elvárt viselkedésének ellenőrzésére használják. A Cypress gazdag beépített állításkészletet biztosít, amellyel ellenőrizheti az elemek állapotát, az URL-t, a címet és egyebeket. Az állítások a Cypress parancsok után a `.should()` metódussal vannak összefűzve.

Íme néhány gyakori állítási példa:

Saját állításokat is létrehozhat az egyedi igényeinek megfelelően.

A legjobb gyakorlatok a Cypress tesztek írásához

A legjobb gyakorlatok követése segíthet karbantarthatóbb, megbízhatóbb és hatékonyabb Cypress teszteket írni. Íme néhány ajánlás:

Fejlett Cypress technikák

Stubbálás és mockolás

A Cypress lehetővé teszi a hálózati kérések és válaszok stubbálását, lehetővé téve a különböző forgatókönyvek szimulációját és az alkalmazás hibakezelésének tesztelését. Ez különösen hasznos a külső API-któl vagy szolgáltatásoktól függő funkciók teszteléséhez.

A hálózati kérés stubbálásához a `cy.intercept()` parancsot használhatja. Például az alábbi kód a `/api/users` GET kérését stubbálja, és egy mock válaszát adja vissza:


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

Ezután megvárhatja az elfogott kérést a `cy.wait('@getUsers')` használatával, és ellenőrizheti, hogy az alkalmazás helyesen kezeli-e a mock választ.

A helyi tárral és a cookie-kkal való munka

A Cypress parancsokat biztosít a helyi tárral és a cookie-kkal való interakcióhoz. Ezeket a parancsokat használhatja a helyi tárolás beállításához, lekéréséhez és törléséhez a tesztekben.

Egy helyi tárolási elem beállításához a `cy.window()` parancsot használhatja a window objektum eléréséhez, majd a `localStorage.setItem()` metódust. Például:


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

Egy helyi tárolási elem lekéréséhez a `cy.window()` parancsot használhatja, majd a `localStorage.getItem()` metódust. Például:


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

Egy cookie beállításához a `cy.setCookie()` parancsot használhatja. Például:


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

Egy cookie lekéréséhez a `cy.getCookie()` parancsot használhatja. Például:


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

Fájlfeltöltések kezelése

A Cypress egy `cypress-file-upload` nevű beépülő modult biztosít, amely egyszerűsíti a fájlfeltöltéseket a tesztekben. A beépülő modul telepítéséhez futtassa a következő parancsot:

npm install -D cypress-file-upload

Ezután adja hozzá a következő sort a `cypress/support/commands.js` fájlhoz:


import 'cypress-file-upload';

Ezután a `cy.uploadFile()` parancsot használhatja egy fájl feltöltéséhez. Például:


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

IFrames-szel való munka

Az IFrames tesztelése trükkös lehet, de a Cypress lehetőséget ad velük való interakcióra. A `cy.frameLoaded()` parancsot használhatja egy IFrame betöltésének megvárásához, majd a `cy.iframe()` parancsot az IFrame dokumentumobjektumának lekéréséhez.


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

Cypress és a folyamatos integráció/folyamatos üzembe helyezés (CI/CD)

A Cypress integrálása a CI/CD csatornába elengedhetetlen az alkalmazás minőségének biztosításához. A Cypress teszteket headless módban futtathatja a CI/CD környezetben. Így teheti:

  1. Cypress telepítése: Győződjön meg arról, hogy a Cypress függőségként telepítve van a projektjében.
  2. CI/CD konfigurálása: Konfigurálja a CI/CD csatornáját a Cypress tesztek futtatására minden build után.
  3. Cypress futtatása fej nélkül: Használja a `cypress run` parancsot a Cypress tesztek headless módban történő futtatásához.

Példa CI/CD konfiguráció (GitHub Actions használatával):


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'

Ez a konfiguráció futtatja a Cypress teszteket, amikor a kódot a `main` ágra küldi, vagy egy lekérési kérelmet hoznak létre a `main` ágra. A `cypress-io/github-action` művelet egyszerűsíti a Cypress tesztek futtatásának folyamatát a GitHub Actions szolgáltatásban.

A Cypress tesztek hibakeresése

A Cypress kiváló hibakereső eszközöket biztosít, amelyek segítenek azonosítani és kijavítani a problémákat a tesztekben. Íme néhány tipp a Cypress tesztek hibakereséséhez:

Cypress vs. más tesztelési keretrendszerek

Miközben a Cypress hatékony végponttól végpontig tartó tesztelési keretrendszer, elengedhetetlen megérteni, hogyan viszonyul a többi népszerű opcióhoz. Íme egy rövid áttekintés:

A keretrendszer kiválasztása a projekt konkrét igényeitől és követelményeitől függ. A Cypress kiváló választás a modern webalkalmazásokhoz, amelyek gyors, megbízható és fejlesztőbarát végponttól végpontig tartó tesztelést igényelnek.

Valós példák a Cypress működés közben

Vessünk egy pillantást néhány valós példára arra, hogy a Cypress hogyan használható a különböző típusú webalkalmazások tesztelésére:

Egy e-kereskedelmi alkalmazás tesztelése

A Cypress segítségével tesztelheti a különféle felhasználói folyamatokat egy e-kereskedelmi alkalmazásban, például:

Íme egy példa egy Cypress tesztre, amely ellenőrzi, hogy a felhasználó sikeresen hozzá tud-e adni egy terméket a kosarához:


it('Terméket ad a kosárhoz', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Egy közösségi médiaalkalmazás tesztelése

A Cypress használatával tesztelheti a felhasználók interakcióit egy közösségi médiaalkalmazásban, például:

Íme egy példa egy Cypress tesztre, amely ellenőrzi, hogy a felhasználó sikeresen létre tud-e hozni egy új bejegyzést:


it('Új bejegyzést hoz létre', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Helló, világ!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Helló, világ!')
})

Egy banki alkalmazás tesztelése

A banki alkalmazások esetében a Cypress használható a kritikus funkciók tesztelésére, mint például:

Egy teszt a pénzátutalás ellenőrzésére így nézhet ki (megfelelő stubbálással a biztonság érdekében):


it('Sikeresen átutalja a pénzt', () => {
  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')
})

Következtetés

A Cypress egy hatékony és sokoldalú végponttól végpontig tartó tesztelési keretrendszer, amely segíthet biztosítani a webalkalmazások minőségét és megbízhatóságát. A fejlesztőbarát API-ja, a hatékony funkciói és a kiváló teljesítménye népszerű választássá teszi a fejlesztők és a minőségbiztosítási mérnökök körében világszerte. Az ebben az útmutatóban vázolt legjobb gyakorlatok követésével hatékony Cypress teszteket írhat, amelyek segítenek a hibák korai felismerésében a fejlesztési folyamatban, és kiváló minőségű szoftvert biztosítanak a felhasználók számára.

A webalkalmazások folyamatos fejlődésével a végponttól végpontig tartó tesztelés jelentősége csak növekedni fog. A Cypress elfogadása és a fejlesztési munkafolyamatába való integrálása képessé teszi Önt a robusztusabb, megbízhatóbb és felhasználóbarátabb webes élmények létrehozására.