Az utolsó cikkben láthattuk, hogy mi is az a Cypress, annak architektúrája, a telepítés folyamata és a telepítéshez szükséges előfeltételek. Mielőtt azonban elkezdenénk írni a teszteket, telepítenünk kell a Cypress-t. Kattintson itt hogy megkapja a Cypress telepítésének részletes lépéseit.

Ciprus példa

Ez a cikk a Ciprus példa, JSON-példák, változók és álnevek, valamint tesztesetek írása. Tehát kezdjük.

Tartalomjegyzék

Cypress JSON példa

Kezdetben, amikor megnyitjuk Cypress Test Runnerünket, a cypress.json konfigurációs fájl jön létre. Hajlamosak vagyunk tárolni a kódrészletet, amely módot ad bizonyos tulajdonságok megvalósítására és megtartására, amelyek segítenek a programban vagy az automatizálási kódban a végrehajtásban. Hasonlóképpen, a Cypress rendelkezik egy JSON-fájllal is, amely tárolja az általunk konfigurációs tulajdonságként megadott értékeket.

Nézzük meg néhányat példák, amelyeket a Cypress JSON-ban konfigurálhatunk fájlt.

A Cypress már hozzá van rendelve néhány alapértelmezett konfigurációs értékhez. Számos lehetőség közül választhatunk, amit igényeinknek megfelelően személyre szabhatunk. Például biztosíthatjuk a baseURL ingatlan a mi cypress.json fájlt. Tehát minden alkalommal, amikor futtatjuk a szkriptet, a baseURL be van állítva és aktiválódik.

opció	Alapértelmezett értékek	Leírás
baseUrl	null	Ez az opció használható a URL előtag a cy.request() or cy.visit() parancsokat.
watchForFileChanges	igaz	Ez a beállítás alapértelmezés szerint igaz. Figyeli a fájlokat a módosításokra, és újraindítja őket, ha bármilyen módosítás történik.

Az alábbiakban az a pillanatkép látható, amelyen módosítottuk a baseURL és a watchForFileChanges tulajdonságait Cypress.json fájlt.

Megjegyzés: A Cypress Configuration összes opcióját később külön témaként tárgyaljuk.

Nyissa meg a Cypresst

Korábban láttuk, hogyan lehet Cypress projektet létrehozni. Itt látni fogjuk, hogyan kell megnyitni és végrehajtani a Cypress Test runnert. Szóval merüljünk bele!

Ha a Cypress-t npm-en keresztül telepítette, akkor a ./node_modules könyvtárba került. Így kinyithatjuk a mieinket Cypress teszt futtató egy npm parancs átadásával tól gyökér projektkönyvtárunkból.

A Cypress-t a következő módok egyikével nyithatjuk meg

1. a teljes elérési út parancs kiadásával

./node_modules/.bin/cypress open

2. az npm bin parancsikon használatával

$(npm bin)/cypress open

3. npx használatával

Itt az npx csak npm > v5.2 esetén támogatott, vagy külön is telepíthetjük.

npx cypress open

4. fonal használatával

yarn run cypress open

Most látni fogjuk, hogyan lehet megnyitni a Cypress-t a teljes elérési út parancs átadásával a terminálunkban.

1. Az 1. pontban említett parancsot át kell adni, és a terminálban a következőket láthatja

2. Egy pillanat múlva láthatjuk, hogy a Cypress Test futó elindul, és az alábbiak szerint láthatjuk a tesztfutót. Miután a tesztfutó elindult, láthat néhány tesztesetet. A Cypress létrehozott egy tesztmappát a projektgyökérben, amely segít a tesztesetek alapvető beállításában és írásában.

Most térjünk vissza a VS Code-hoz. Először is megtekinthet néhány feltöltött mappastruktúrát. Most bontsuk le az egyes mappastruktúrákat, és nézzük meg őket részletesen.

Mappaszerkezet a Cypressben

Amint látjuk, a Cypress mappastruktúrát hozott létre a kódszerkesztőnkben. Részletesen megbeszéljük őket.

Változók és álnevek

Részletesen tárgyaljuk a Cypress változóit és álneveit.

Ahogy megértjük és megtanuljuk a ciprust, nehéz lehet megértenünk a Aszinkron API természet Cypressben. De amint sok példát látunk a jövőben, ez egy szelet torta lenne. Sok modern böngésző aszinkron API-kat használ, és még az alapvető csomóponti modulok is aszinkron kóddal íródnak. Ezenkívül az aszinkron kód mindenhol jelen van a Javascript kódban. Ezért megvizsgáljuk a Cypress visszatérési értékeit.

Visszatérési értékek ciprusban

Az összes Cypress parancs az behúzva és a futás aszinkron. Ezért mi nem tud hozzárendelni semmilyen visszatérési értéket, és nem tud kölcsönhatásba lépni velük a Cypress parancsok közül. Egy kis példát fogunk látni ugyanerre.

const button = cy.get("login-btn");  //this command is to get the element with the button attribute

button.click()

lezárások

A gomb attribútumait a fent említett paranccsal nem tudjuk elérni. Ehelyett a .then() használatával adhatunk ki Cypress parancsokat. Ezeket hívjuk lezárások.

.azután()

A .then() segít elérni az előző parancsból származó szálat. Ha megértetted bennszülött ígéretek, ugyanúgy működik a .then() a Cypress-szel működik. Különféle parancsokat is beágyazhatunk a .then() függvénybe. Minden beágyazott parancs hozzáférhet a ciklus előző parancsához. Egy példán keresztül látni fogjuk.

cy.get('login').then(($btn) => {

  // store the button's text
  const buttonText = $btn.text()

  // we are comparing the two buttons' text
  // and ensuring they are different
  cy.get('login').should(($btn2) => {
    expect($btn2.text()).not.to.eq(buttonText)
  })
})

Használtunk lezárások a fenti példában, ami lehetővé teszi számunkra, hogy az előző parancs hivatkozását a ciklusban tartsuk.

Változók

Általában egy változóhoz szoktunk értéket rendelni. De a Cypressben alig használjuk const, varés let. Amikor lezárásokat használunk, akkor hozzáférhetünk a kapott objektumokhoz anélkül, hogy változóhoz rendelnénk őket.

De vannak olyan esetek, amikor deklarálhatunk egy változót, amikor a az objektum állapota megváltozik (változó objektumok). Például, ha össze kell hasonlítani egy tárgy az előző értékéhez, akkor deklaráljuk őket egy változónak, hogy összehasonlítsuk a következő értékkel. Nézzünk erre egy példát.

<button>increment</button>

You clicked button <span id="num">0</span> times

Itt a tartomány 0-val növekszik minden alkalommal, amikor a gombra kattintunk. Tehát a gombobjektum hajlamos minden alkalommal megváltoztatni az állapotát.

Most nézzük meg, hogyan rendelhetjük hozzá ezt egy változóhoz a Cypress kódunkban.

cy.get('#num').then(($span) => {
  // we are capturing the number by assigning it to a variable
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()  //we have clicked the button once
    .then(() => {
      // we are capturing the number again by assigning it to another variable
      const num2 = parseFloat($span.text())

      // we are ensuring that num1+1 is equal to num2
      expect(num2).to.eq(num1 + 1)
    })
})

Mivel a span minden alkalommal megváltoztatja állapotát, amikor rákattintunk a gombra, hozzárendelhetjük egy változóhoz, hogy összehasonlíthassuk jelenlegi és korábbi állapotát. Csak a változó objektumok esetén lesz szükségünk változókra és használatára const jó megközelítés.

Más nevek

Korábban láttuk, hogy milyen változók és korlátai vannak a Cypress-ben. Ennek a korlátnak a leküzdésére az Aliases jön a képbe. Az alias a Cypress egyik legerősebb konstrukciója. Ezt példákkal részletesen megvizsgáljuk.

Általában az álnevek segíthetnek változóként dolgozni. Vannak azonban olyan használati esetek, amikor egy alias segíthet nekünk a változó helyett.

1. Használja újra a DOM-elemeket

A DOM-elemeket alias névvel látjuk el, és később hozzáférhetünk hozzájuk újrafelhasználás céljából. Az álnevek felülmúlják a korlátait is .azután() parancs.

2. Kontextus megosztása

Egyszerű értelemben a kontextus megosztása az objektum megosztását jelenti a horgok és a tesztek között. A kontextus megosztásának elsődleges használati esete a kezelés cy.fixture – ami egy rögzített adathalmaz betöltése egy fájlba.

Hogyan lehet elérni az álneveket?

Itt látni fogjuk, hogyan lehet hozzáférni az álnevekhez. Használni fogjuk a .as() parancsot az elem későbbi használatra való hozzárendeléséhez. A szükséges paraméter a fedőnév. Az álnév neve hivatkozásként használatos az a-n belül cy.get() or cy.wait() használatával @ előtagot.

Megnézünk egy példát az álnevek elérésére.

cy.get('#user_login').as('username')
cy.get('@username').type('abc@gmail.com')

Az első sorban a user_login azonosítóját kapjuk a DOM-tól. Akkor használjuk .as() és névvel felhasználónévvel deklarálva. A második sorban a következővel érjük el az álnevünket @ szimbólum és teljesítő a típus akció.

Cypress teszt példa

Elkezdjük írni az első tesztesetünket a Cypress-szel. Ez nagyon egyszerű és könnyű. De előtte megvizsgáljuk a Cypress teszt konstrukcióit.

Alapvető cipruskonstrukciók

A Cypress a Mocha szintaxist alkalmazta teszteseteiben, és a Mocha által kínált összes lehetőséget felhasználja. Az alábbiakban bemutatjuk azokat az alapvető Cypress-konstrukciókat, amelyeket általánosan használunk teszteseteinkben.

• Leírás() – az összes tesztesetet egyetlen nagyobb tesztben egyesíti és csoportosítja. Két paraméter kell hozzá – a teszt leírása és egy visszahívási funkció.
• azt() – egyedi teszteseteket írunk az it() blokkunkba. Ez a blokk két paramétert is felvesz – amit egy teszt csinál, a második paraméter pedig a visszahívási függvény.
• megveti de () – ez a specifikációs fájlban található összes teszt után végrehajtódik.
• AfterEach() – ez minden egyedi teszteset után lefut.
• előtt () – a specifikációs fájlban található összes teszt előtt lefut.
• BeforeEach() – minden egyes teszteset előtt végrehajtódik.

Hogyan írjunk tesztesetet?

Mielőtt elkezdenénk, tudnunk kell, mi az a teszteset, meg kell írnunk, és mik az alapvető teszteset lépései.

1. Előfeltétel – A tesztelni kívánt alkalmazás állapota.

2. Akció – Elvégzünk néhány műveletet az alkalmazáson.

3. kijelentés – A cselekedeteinkkel kapcsolatos megváltozott magatartást érvényesítjük vagy érvényesítjük.

megfontoljuk LamdaGeeks alkalmazás tesztpéldáinkhoz. Ugyanezzel az eljárással megfontoljuk a következő forgatókönyv automatizálását

1. Látogasson el a weboldalra https://lambdageeks.com/

2. Ellenőrizze, hogy a cím Home – Lambda Geeks
Cypress használ cy mint típusdefiníciója. Mellékeljük a cy parancsot bármely metódus meghívásához.
Először is hozzunk létre egy új fájlt a kódszerkesztőnkben.

1. Hozzon létre egy új nevű mappát Demó az integrációs mappa alatt.

2. A Demo mappában hozzon létre egy új fájlt sample.js. Ebben a fájlban írjuk meg első tesztesetünket.

Most pedig kezdjük el megírni teszteseteinket!

1. 1. Először is meglátogatjuk az oldalt a látogatás() módszer a Cypressben. Ez a parancs az általunk megadott URL-re navigál. Egy description() és it() blokkba foglaljuk őket.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {
        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

2. Amint az alkalmazás megnyílt, érvényesítjük a címet a get() módszer a Cypressben .get() lekéri az összes css választót a DOM-ból.

A címet a segítségével érjük el title() módszerrel, és azt állítjuk, hogy a Chai könyvtárat használjuk a should paranccsal úgy, hogy az első paramétert egyenlőként adjuk át. eq. A második paraméter a várt karakterlánc.

 cy.title().should('eq','Home - Lambda Geeks')

Hurrá! Két egyszerű lépéssel megírtuk a Cypress Test esetünket.

Itt van a tesztesetünk teljes kódja

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("launch the application", function() {

        // visit the lambdageeks page
        cy.visit('https://lambdageeks.com/')

        // validate the title
        cy.title().should('eq','Home - Lambda Geeks')
       
    });
});

Cypress bejelentkezési példa

Példákat fogunk látni a bejelentkezési oldal Cypress segítségével történő automatizálására. Ahogy korábban láttuk, a teszteset megírása Cypress nyelven egyszerű. Most ugorjunk a szövegmezőben és az állításokban lévő értékek beállítására.

1. Meglátogatjuk a weboldalt https://demo.applitools.com/ segítségével cy.visit parancs.

 cy.visit('https://demo.applitools.com/')

2. Írja be a felhasználónevet a felhasználónév mezőbe a type paranccsal. A felhasználónevet karakterláncként adjuk át a típusban paraméterként.

 cy.get('#username').type('test123')

3. Hasonlóképpen ugyanazt a parancsot írjuk be a jelszó megadásához

 cy.get('#password').type('123')

4. Most kattintsunk a bejelentkezés gombra a click() módszer a Cypressben.

cy.get('#log-in').click();

5. Bejelentkezés után az alkalmazás oldalán landolunk. Tehát azt állítjuk, hogy az URL tartalmazza a /app kiterjesztése segítségével .include() kulcsszó a chai nyelven. A should első paramétere az általunk érvényesített kulcsszó, a második paraméter pedig a várt eredmény.

cy.url().should('include', '/app')

Öt egyszerű lépésben írtunk egy teljes kódot egy bejelentkezési funkcióhoz. Az alábbiakban a teljes kód az Ön referenciaként szolgál.

//type definition for Cypress object 'cy'
/// <reference types="cypress" />

describe("Testing the application", function() {
    it("should login with username and password", function() {

        // visit the lambdageeks page
        cy.visit('https://demo.applitools.com/')

        cy.get('#username').type('test123')

        cy.get('#password').type('123')

        cy.get('#log-in').click();

        cy.url().should('include', '/app')

    });
});

Megoldások a gyakori problémákra a Cypress indításakor és GYIK

Előfordulhat néhány gyakori probléma, amellyel szembe kell néznünk, amikor megpróbáljuk elindítani a Cypress-t. Megbeszélünk néhány gyakori kérdést.

1. Nem található a „Cypress” parancs az Open Cypress parancs alatt

A telepítés után át kell adnunk az open cypress parancsot a projektkönyvtár gyökeréből. Például létrehozott egy CypressProject nevű projektet; át kell menned a npm init parancsot a CypressProject mappába navigálva. Az alábbi parancs kiadásával navigálhat a terminálban

cd CypressProject

Miután a projekt gyökeréhez ért, adja át a npm init parancsot a függőségek letöltéséhez.

A Cypress megnyitásához néhányan megpróbálnak navigálni a /node_modules mappát és ./bin majd adja ki a ciprusnyitás parancsot. Ez azonban nem így működik. Tehát ehelyett adja ki a teljes open parancsot a projektkönyvtár gyökeréből a Cypress megnyitásához.

./node_modules/.bin/cypress open

Legyen óvatos a perjellel is/'. Mindig ezt adja meg/' a Cypress kinyitásához.

2. Ciprus nem tölthető be, mert a szkriptek futtatása le van tiltva ezen rendszer

Amikor a Cypress-t Windowsba telepíti, néha szembesülhet a fenti hibával. Ez azért van, mert egy biztonsági kivétel miatt. Ezt a hibát az alábbi parancs átadásával tudjuk megoldani a PowerShellben.

Set-ExecutionPolicy RemoteSigned

A szaporodás lépései:

• Nyissa meg a PowerShell alkalmazást
• Futtassa ezt a parancsot Set-ExecutionPolicy RemoteSigned
• típus Yes
• Most nyissa ki a Cypress-t áthaladással ./node_modules/.bin/cypress open. A Test Runner most megnyílik.

FAQ

1. Mely operációs rendszereket támogatja a Cypress?

Cypress támogatja Mac, Windowsés Linux operációs rendszer.

2. A Cypress támogatja az automatizálást a natív mobilalkalmazásokban?

A Cypress soha nem fog tudni futni natív mobilalkalmazáson. De tesztelhetünk olyan mobilalkalmazásokat, amelyeket olyan böngészőben írtak, mint az Iconic Frameworks.

3. A Cypress csak Javascript-alapú alkalmazásokat támogat?

Nem! A Cypress bármilyen nyelven írt webböngészővel kommunikálhat, például Ruby on Rails, Node, PHP, C#. De a tesztjeinket Javascriptben fogjuk megírni. Ellenkező esetben a Cypress bármilyen kezelőfelülettel, háttérrel, nyelvvel és keretrendszerrel kölcsönhatásba léphet.