szit

Felhasználói eszközök

Eszközök a webhelyen

Itt vagy: start » oktatas » web » angular » angular_end-to-end_teszt
Nyomvonal:
oktatas:web:angular:angular_end-to-end_teszt

Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

Összehasonlító nézet linkje

Előző változat mindkét oldalonElőző változat
Következő változat		Előző változat
oktatas:web:angular:angular_end-to-end_teszt [2023/04/14 23:37] – [Alrendszerek] adminoktatas:web:angular:angular_end-to-end_teszt [2023/04/15 22:03] (aktuális) – admin
Sor 10: Sor 10:
 ===== Egység tesztek ===== ===== Egység tesztek =====
  
-A Karma és a Jasmine a JavaScript kódra összpontosítanak, amit egy elszigetelt +  * [[oktatas:web:angular:angular_end-to-end_teszt:Bevezetés]] 
-tesztkörnyezetben futtatnak. Szeretnénk olyanokat is tesztelni, hogy egy +  * [[oktatas:web:angular:angular_end-to-end_teszt:Cypress]]
-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. +
- +
-===== Meghatározott környezet ===== +
- +
-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 végpontok közötti tesztek működése ===== +
- +
-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. +
- +
-===== E2E keretrendszerek ===== +
- +
-Kétféle van: +
-  * WebDriver-t használ +
-  * nem használ WebDriver-t +
- +
-==== WebDriver ==== +
- +
-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. +
- +
- +
-===== Az Angular ===== +
- +
-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: +
- +
-<code> +
-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. +
-</code> +
- +
-A ng e2e röviden: ng e. +
- +
- +
-===== A Cypress ===== +
- +
-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. +
- +
- +
-==== Telepítés ==== +
- +
-  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. +
- +
-<code> +
-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. +
-</code> +
- +
-==== A cypress könyvtár ==== +
- +
-<code> +
-app01/ +
-  |-cypress/ +
-     |-e2e/ +
-     |-fixtures/ +
-     |-support/ +
-     `-tsconfig.json +
-</code> +
- +
- +
- +
-  * 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. +
- +
-==== Alrendszerek ==== +
- +
-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 +
- +
-<code javascript> +
-describe('Leírás', () => { +
-    beforeEach(() => { +
-        //Weblapra navigálás +
-    }); +
-    it('leírás', () => { +
-        //Interakció a weblappal +
-        //Figyelmeztetések +
-    }); +
-}); +
-</code> +
- +
-==== Teszt futtatása ==== +
- +
-Telepítés után van egy cypress/e2e/spec.cy.ts tesztünk: +
- +
-<code javascript> +
-describe('My First Test', () => { +
-  it('Visits the initial project page', () => { +
-    cy.visit('/') +
-    cy.contains('app is running!') +
-  }) +
-}) +
-</code> +
- +
-A futtatást itt tesztelhetjük. Futtatás: +
-  npx cypress run +
- +
- +
- +
-===== Linkek ===== +
- +
-  * https://testing-angular.com/end-to-end-testing/#end-to-end-testing (2023) +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
oktatas/web/angular/angular_end-to-end_teszt.1681508274.txt.gz · Utolsó módosítás: 2023/04/14 23:37 szerkesztette: admin