A Cypress Assertion segít egy adott állítás állításában. Az állítások olyan érvényesítési lépések, amelyek biztosítják, hogy a várt eredmény megegyezik-e a tényleges eredménnyel. A tesztautomatizálás során egy nyilatkozatot állítunk be annak ellenőrzésére, hogy a teszt a várt eredményt hozza-e létre. Ha az állítás kudarcot vall, akkor a teszteset meghiúsítja a hiba fennállását. Ebben a cikkben arról fogunk beszélni Cypress Assertion Handson implementációval és példákkal.
Tartalomjegyzék
- Mi az a Cypress Assertion?
- Cypress Assert szöveg
- Cypress Közös állítás
- Cypress Retry Assertion
- Példák a ciprus állításokra
- Implicit állítás a ciprusban
- Explicit állítás a Cypressben
- Negatív ciprus állítás
- Cypress Custom Assertion Message
- Cypress Assertion legjobb gyakorlatok

Mi az a Cypress Assertion?
A Cypress a Chai állítási könyvtárat és olyan kiterjesztéseket használja és burkolja, mint a Sinon és a JQuery. A Cypress automatikusan vár, és újra próbálkozik, amíg az állítás meg nem oldódik. Az állítások segítségével leírható, hogyan kell kinéznie az alkalmazásnak. Használhatunk Cypress állításokat várakozás, újrapróbálkozás, blokkolás kombinációjával, amíg el nem éri a kívánt állapotot.
Cypress Assert szöveg
Az általános angol nyelven egy olyan állítást írnánk le, mint pl. Azt várnám, hogy a gombon legyen bejelentkezési szöveg. Ugyanaz az állítás írható a Cypress nyelven, mint
cy.get('button').should('have.value', 'login')
A fenti állítás érvényes, ha a gomb 'bejelentkezési' értékkel rendelkezik.
Cypress Közös állítások
Van egy sor általános Cypress-állítás, amelyet teszteseteinkben használunk. Együtt fogjuk használni őket .should()
. Nézzük a használati esetet és a példákat.
Az alábbiakban felsorolunk néhány gyakori ciprusi állítást
- Hossz
- Érték
- Szöveg kontextusa
- Osztály
- Létezés
- CSS
- Láthatóság
- Állami
- Letiltott tulajdon
Cypress Length Assertion
length()
ellenőrzi, hogy az adott elemnek van-e hosszúsága
cy.get('dropdown').should('have.length', 5)
Cypress érték állítás
A Cypress érték érvényesíteni fogja, ha az adott elem rendelkezik a várt értékkel
cy.get('textfield').should('have.value', 'first name')
Cypress szöveg kontextus állítása
A szövegkörnyezet érvényesíteni fogja, ha az elem rendelkezik az adott szöveggel
cy.get('#user-name').should('have.text', 'John Doe')
Cypress Class Assertion
Azt állítja, hogy az osztály jelen van-e, vagy az adott elemnek rendelkeznie kell az osztállyal
cy.get('form').find('input').should('have.class', 'disabled')
A ciprus létezésének állítása
Az Existence parancs ellenőrzi, hogy az adott elem jelen van-e a DOM-ban vagy sem
cy.get('#button').should('exist')
Cypress CSS állítás
A CSS Assertion ellenőrzi, hogy az adott elemek rendelkeznek-e egy adott tulajdonsággal
cy.get('.completed').should('have.css', 'text-decoration', 'line-through')
Cypress láthatósági állítás
A Cypress Visibility Assertion megerősíti, hogy a DOM elem látható-e a felhasználói felületen
cy.get('#form-submit').should('be.visible')
Cypress State Assertion
Megerősíti a DOM elem állapotát
cy.get(':radio').should('be.checked')
Cypress Disabled Property Assertion
A Cypress Disabled tulajdonság érvényesítése azt állítja, hogy az elem le van-e tiltva
cy.get('#example-input').should('be.disabled')
Cypress Retry Assertion
Egyetlen parancs, amelyet egy kijelentés követ, sorrendben hajtódik végre. Kezdetben a parancs végrehajtásra kerül, majd az állítás végrehajtásra kerül. Egyetlen parancs, majd több állítás is végrehajtódik sorrendben – az első és a második állítás. Tehát amikor az első állítás átmegy, az első és a második állítás ismét végrehajtásra kerül a parancsokkal együtt.
Például az alábbi parancs mindkettőt tartalmazza .should()
és a .and()
érvényesítési parancsok, hol .and()
más néven .should()
cy.get('.todo-list li') // parancs .should('have.length', 2) // assertion .and(($li) => { // 2 további állítás várható ($li.get (0).textContent, 'first item').to.equal('todo A') expect($li.get(1).textContent, 'second item').to.equal('todo B') })
Példák a ciprus állításokra
Ebben a részben a Cypress különböző típusú állításairól fogunk beszélni, mint pl
- Implicit állítás
- Kifejezett állítás
Mindkét típust példákkal részletesen megvizsgáljuk
Implicit állítás a ciprusban
Implicit állításban használjuk .should()
or .and()
parancsokat. Ezek az érvényesítési parancsok a parancsláncban jelenleg megadott alanyra vonatkoznak. Ezek a korábban megadott témától függenek.
Megnézünk egy példát a használatára .should()
or .and()
parancsok
cy.get('button').should('have.class', 'enabled')
Val vel .and()
amely egy álneve .should()
, több állítást is leláncolhatunk. Ezek a parancsok jobban olvashatók.
cy.get('#title') .should('have.class', 'active') .and('have.attr', 'href', '/post')
A fenti példa össze van láncolva .should()
kimondja, hogy az „aktív” osztálynak kell lennie, majd ezt követi .and()
ugyanazon parancsra hajtják végre. Ez nagyon hasznos, ha több parancsot akarunk érvényesíteni.
Explicit állítás a Cypressben
Az explicit tárgy átadása az állításokban a ciprusi állítás explicit típusa alá esik. Itt fogjuk használni expect
és a assert
parancsok állításként. Az explicit állításokat akkor használjuk, ha több állítást akarunk használni ugyanarra a tárgyra vonatkozóan. Ebben explicit állítást is használunk Cypress, ha egyedit akarunk csinálni logika az állítást megelőzően.
Megvizsgáljuk a példa az explicit ciprusra kijelentés
expect(true).to.be.true //ellenőrzi a logikai értékre vár(object).to.equal(object)
Negatív ciprus állítás
A pozitív állításokhoz hasonlóan a Cypressben is vannak negatív állítások. A „nem” kulcsszót fogjuk használni, amelyet az állítás előtagjához adunk. Lássunk egy példát a negatív állításra
cy.get('#loading').should('not.be.visible')
A negatív állítás csak olyan esetekben javasolt, amelyek célja annak ellenőrzése, hogy egy adott feltétel már nem áll rendelkezésre, miután az alkalmazás végrehajt egy adott műveletet.
Vegyük például, hogy egy kapcsoló be van jelölve, és ellenőrizzük, hogy eltávolították-e
// először az elemet befejezettnek jelölik cy.contains('li.todo', 'Write tests') .should('have.class', 'completed') .find('.toggle') .click() / / a CSS osztály eltávolítva cy.contains('li.todo', 'Write tests').should('not.have.class', 'completed')
Cypress Custom Assertion Message
A Cypress segítségével az állításokhoz további információkat vagy egyéni üzeneteket tudunk biztosítani a megfelelők könyvtárának használatával. A Matchers kis függvényekből áll, amelyek megkülönböztetik az értékeket, és részletes hibaüzenetet küldenek. Chai Az állítási könyvtár segít a kódunknak olvashatóbban kinézni, és nagyon hasznos lesz a teszthiba
const expect = követelmény('chai').expect it('ellenőrzi a számot', () => { const value = 10 const expect = 3 expect(value).to.equal(expected) })

Cypress Assertion legjobb gyakorlatok
Egyetlen blokkba több állítást is írhatunk parancslánc használatával. Nem szükséges egyetlen állítást írni, mint az egységteszteknél. Sokan írnak az alábbi állításokat. Rendben van, ha ilyen módon írunk, de ez növeli a kódsort és a redundanciát.
description('saját űrlap', () => { before(() => { cy.visit('/users/new')) cy.get('#first').type('ashok') }) it( 'has validation attribútum', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // annak megerősítése, hogy a #first kötelező mezővel rendelkezik-e } ) it('has active class', () => { cy.get('#first').should('have.class', 'active') // annak megállapítása, hogy az #elsőnek van-e aktív osztálya }) it( 'has formatted first name', () => { cy.get('#first').should('have.value', 'Ashok') // annak megerősítése, hogy a #first nagy kezdőbetűt ír-e }) })
Mint fentebb látható, ugyanaz a választó és állítástípus ismétlődik. Ehelyett ezeket a parancsokat egyetlen állításba láncolhatjuk, amely az összes ellenőrzést lineárisan hajtja végre.
description('saját űrlap', () => { before(() => { cy.visit('/users/new') }) it('ellenőrzi és formázza a keresztnevet', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .value', 'Ashok') }) })
Ahogy fentebb említettük, az egyetlen választót több állítással is leláncolhatjuk! Ez az egyik ajánlott legjobb gyakorlat az állítások Cypress nyelven történő írására.
A Cypress oldalobjektum-modelljének megismeréséhez kattintson a gombra itt.