• Szerző: Sallai András
• Copyright © Sallai András, 2023
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

A Karma és a Jasmine a JavaScript kódra összpontosítanak, amit egy elszigetelt tesztkörnyezetben futtatnak. Szeretnénk olyanokat is tesztelni, hogy egy kattintásra megtörténik-e valami.

Ezt általában kézi teszteléssel végezzük. Egy dedikált tesztelő egy teszt terv szerint végigjárja a teszteket.

A kézi tesztek lassúak és nem mindig ismételhetők meg.

Olyan automatizált tesztekre van szükségünk, ami a felhasználói oldalról közelíti meg az alkalmazást. Ezeket nevezzük End-to-end vagy E2E teszteknek.

Az E2E tesztek gyakran lassúk és hibásak, de ezek tájékoztatnak minket arról, hogy valóban működi-e az alkalmazás.

Az adatbázist előre elkészített hamis adatokkal töltjük fel, amit utána törlünk, azaz az adatbázist kezdeti állapotba hozzuk.

A teszt utánozza a felhasználói kommunikációt az alkalmazással, másként szólva, szimulálja a felhasználói műveleteket.

Például a teszt kitölt egy űrlapot és kattint a küldés gombra.

Kétféle van:

• WebDriver-t használ
• nem használ WebDriver-t

A WebDriver lehetővé teszik a böngésző távoli irányítását. Ilyen a Selenium böngésző automatizáló projekt, amit a W3C fejleszt.

Néhány WebDriver parancs:

• navigáljon egy URL-re
• Kattintson egy elemre
• JavaScript kód végrehajtása
• Billentyűzet bevitel küldése egy űrlapelembe
• Egy elemről információkérés

A tesztek akár több böngészőben egyszerre is futtathatók.

A 12-es verzióig az Angular a Protactort használta alapértelmezett teljes körű tesztelő keretrendszernek. A 12 verziótól azonban elavult. A 12 verziótól nincs alapértelmezetten megadott keretrendszer. Telepítenünk kell egyet.

A következőket használhatjuk:

• Cypress
• Nightwatch
• WebdriverIO

Ha futtatjuk az ng e2e parancsot és még nincs telepítve egyik sem:

ng e2e

Cannot find "e2e" target for the specified project.

You should add a package that implements end-to-end testing capabilities.

For example:
  Cypress: ng add @cypress/schematic
  Nightwatch: ng add @nightwatch/schematics
  WebdriverIO: ng add @wdio/schematics

More options will be added to the list as they become available.

A ng e2e röviden: ng e.

Nyílt forráskódú tesztelő keretrendszer. Nem használja a WebDrivert, egyéni eszközöket használ. Egy NodeJS alkalmazás elindítja a böngészőt. A böngésző ugyan nem vezérelhető távolról, de tesztek közvetlenül a böngészőben futnak.

A Cypress hasonlít ugyan a Jasmin-ra, de részleteiben mégis különbözik.

A Cypress a Firefoxot és a Chromium alapú böngészőket támogatja, mint a Google Chrome és a Microsoft Edge. Kísérletileg támogatja a WebKit és a Safari által használt motort. A régi Edge és Internet Explorer nem támogatott.

ng add @cypress/schematic

Mi történik:

• A package.json fájlba beíródik a függőség.
• Létre jön a cypress.config.ts fájl.
• Módosítja az angular.json fájlt, az belül az ng run részt.
• Létre jön egy cypress alkönyvtár.

A telepítő megkérdezi, hogy szeretnék az ng e2e paranccsal indítani a Cypress parancsot. Válaszóljunk „Yes”-szel. Ha 12 előtti Angular verziónk van, és van Protactor, akkor lehet jó válasz a „No”, így elérhetővé válik a Protactor továbbra is.

ng add @cypress/schematic
ℹ Using package manager: npm
✔ Found compatible package version: @cypress/schematic@2.4.0.
✔ Package information loaded.

The package @cypress/schematic@2.4.0 will be installed and executed.
Would you like to proceed? (Y/n)

✔ Package successfully installed.
? Would you like the default `ng e2e` command to use Cypress? [ Protractor to Cy
press Migration Guide: https://on.cypress.io/protractor-to-cypress?cli=true ] (Y
/n) 
? Would you like to add Cypress component testing?  This will add all files need
ed for Cypress component testing. (Y/n)
CREATE cypress.config.ts (288 bytes)
CREATE cypress/tsconfig.json (139 bytes)
CREATE cypress/e2e/spec.cy.ts (143 bytes)
CREATE cypress/fixtures/example.json (85 bytes)
CREATE cypress/support/commands.ts (1377 bytes)
CREATE cypress/support/e2e.ts (649 bytes)
CREATE cypress/support/component-index.html (290 bytes)
CREATE cypress/support/component.ts (1123 bytes)
UPDATE package.json (1220 bytes)
UPDATE angular.json (4451 bytes)
✔ Packages installed successfully.

app01/
  |-cypress/
     |-e2e/
     |-fixtures/
     |-support/
     `-tsconfig.json

• e2e/ - A tesztek helye
• fixtures/ - ide írjuk a tesztadatokat
• support/ - egyéni parancsok, teszt segédletek
• tsconfig.json - TypeScript beállítások ehhez a könyvtárhoz

A tesztek az e2e könyvtárban találhatók .cy.ts kiterjesztéssel.

A Cypress a Mocha és Chai rendszerekre épül. A Mocha és a Chai népszerű kombináció. Nagyjából ugyanazt csinálják mint a Jasmine, gazdagabb funkciókkal.

Ha használtunk már Jasmine-t, akkor láthatjuk hasonló teszteket kell írnunk.

describe('', () => {})

Egy fájl általában egyetlen describe blokkot tartalmaz, ami újabb beágyazott describe blokkokat tartalmazhat.

A describe blokkon belül itt is használhatók a következő blokkok:

• beforeEach
• afterEach
• beforeAll
• afterAll

describe('Leírás', () => {
    beforeEach(() => {
        //Weblapra navigálás
    });
    it('leírás', () => {
        //Interakció a weblappal
        //Figyelmeztetések
    });
});

Telepítés után van egy cypress/e2e/spec.cy.ts tesztünk:

describe('My First Test', () => {
  it('Visits the initial project page', () => {
    cy.visit('/')
    cy.contains('app is running!')
  })
})

A futtatást itt tesztelhetjük. Futtatás:

npx cypress run

• https://testing-angular.com/end-to-end-testing/#end-to-end-testing (2023)