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

1. Hossz
2. Érték
3. Szöveg kontextusa
4. Osztály
5. Létezés
6. CSS
7. Láthatóság
8. Állami
9. 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.