Cypress Assertion helpt ons om een bepaalde bewering te doen. Beweringen zijn validatiestappen die ervoor zorgen dat het verwachte resultaat gelijk is aan het werkelijke resultaat. Bij testautomatisering stellen we een verklaring af om te verifiëren dat de test het verwachte resultaat oplevert. Als de bewering faalt, faalt de testcase om ervoor te zorgen dat er een bug is. In dit artikel zullen we het hebben over: Cypress Assertion met Handson-implementatie en voorbeelden.

Wat is Cypress Assertion?

Cypress gebruikt en verpakt de Chai-bevestigingsbibliotheek en extensies zoals Sinon en JQuery. Cypress wacht automatisch en probeert het opnieuw totdat de bewering is opgelost. Beweringen kunnen worden gebruikt om te beschrijven hoe de aanvraag eruit moet zien. We kunnen Cypress-beweringen gebruiken met een combinatie van wachten, opnieuw proberen, blokkeren totdat het de gewenste status bereikt.

Cypress Assert-tekst

In het algemeen Engels zouden we een bewering beschrijven als: Ik zou verwachten dat de knop een inlogtekst heeft. Dezelfde bewering kan in Cypress worden geschreven als

cy.get('button').should('have.value', 'login')

Bovenstaande bewering gaat door als de knop 'login' waarde heeft.

Cypress Algemene beweringen

Er is een reeks algemene Cypress-beweringen die we in onze testgevallen gebruiken. We zullen ze gebruiken met .should() . Laten we eens kijken naar de use case en voorbeelden.

Enkele van de veelvoorkomende beweringen van Cypress staan hieronder:

Lengte
Waarde
Tekstcontext
Klasse
Bestaan
CSS
Zichtbaarheid
Land
uitgeschakeld eigendom

Cypress lengte bewering

length() zal controleren of het specifieke element lengte heeft

cy.get('dropdown').should('have.length', 5)

Cypress Waarde Bewering

De Cypress-waarde zal gelden als het specifieke element de verwachte waarde heeft

cy.get('textfield').should('have.value', 'first name')

Cypress Tekst Context Bewering

Tekstcontext wordt bevestigd als het element de specifieke tekst heeft

cy.get('#user-name').should('have.text', 'John Doe')

Cypress klasse bewering

Beweert of de klasse aanwezig is of dat het specifieke element de klasse moet hebben

cy.get('form').find('input').should('have.class', 'disabled')

Cypress Bestaan Bewering

Existence-opdracht controleert of het specifieke element aanwezig is of bestaat in de DOM of niet

cy.get('#button').should('exist')

Cypress CSS-bewering

CSS Assertion controleert of de specifieke elementen een bepaalde eigenschap hebben

cy.get('.completed').should('have.css', 'text-decoration', 'line-through')

Cipres Zichtbaarheid Bewering

Cypress Visibility Assertion bevestigt of het DOM-element zichtbaar is in de gebruikersinterface

cy.get('#form-submit').should('be.visible')

Cypress State Bewering

Bevestigt de status van het DOM-element

cy.get(':radio').should('be.checked')

Cypress Gehandicapte Eigendom Bewering

De eigenschapbewering Cypress Disabled bevestigt of het element is uitgeschakeld

cy.get('#example-input').should('be.disabled')

Cypress probeert bewering opnieuw

Een enkele opdracht gevolgd door een bewering wordt in volgorde uitgevoerd. Aanvankelijk wordt de opdracht uitgevoerd en vervolgens wordt de bewering uitgevoerd. Een enkele opdracht gevolgd door meerdere beweringen wordt ook in volgorde uitgevoerd - respectievelijk eerste en tweede bewering. Dus wanneer de eerste bewering is geslaagd, worden de eerste en de tweede bewering samen met de opdrachten opnieuw uitgevoerd.

Het onderstaande commando bevat bijvoorbeeld beide .should() en .and() bewering commando's, waar .and() is ook wel bekend als .should()

cy.get('.todo-list li') // command .should('have.length', 2) // assertion .and(($li) => { // 2 meer beweringen verwachten ($li.get (0).textContent, 'eerste item').to.equal('todo A') expect($li.get(1).textContent, 'tweede item').to.equal('todo B') })

Voorbeelden van beweringen van cipres

In deze sectie zullen we de verschillende soorten beweringen in Cypress bespreken, zoals:

Impliciete bewering
Expliciete bewering

We zullen beide typen in detail bekijken met voorbeelden

Impliciete bewering in Cypress

In impliciete bewering gebruiken we .should() or .and() commando's. Deze assertion-commando's zijn van toepassing op het momenteel opgeleverde onderwerp in de commandoketen. Ze zijn afhankelijk van het eerder opgeleverde onderwerp.

We zullen kijken naar een voorbeeld over hoe te gebruiken .should() or .and() commando's

cy.get('button').should('have.class', 'enabled')

met .and() wat een alias is van .should() , we kunnen meerdere beweringen aan elkaar koppelen. Deze commando's zijn beter leesbaar.

cy.get('#title') .should('have.class', 'active') .and('have.attr', 'href', '/post')

Het bovenstaande voorbeeld is geketend met .should() waarin staat dat het de klasse "actief" moet hebben, gevolgd door .and() wordt uitgevoerd tegen hetzelfde commando. Dit is erg handig als we meerdere commando's willen laten gelden.

Expliciete bewering in Cypress

Het doorgeven van een expliciet onderwerp in de beweringen valt onder het expliciete type Cypress-bewering. Hier zullen we gebruiken expect en assert commando's als bewering. Expliciete beweringen worden gebruikt wanneer we meerdere beweringen voor hetzelfde onderwerp willen gebruiken. We gebruiken ook expliciete beweringen in Cypress wanneer we op maat willen doen logica voorafgaand aan het maken van de bewering.

We zullen kijken naar de voorbeeld voor expliciete Cypress bewering

expect(true).to.be.true //controleert op een boolean expect(object).to.equal(object)

Negatieve cipresbewering

Net als bij positieve beweringen, zijn er ook negatieve beweringen in Cypress. We zullen het trefwoord "niet" gebruiken dat is toegevoegd aan het voorvoegsel van de beweringverklaring. Laten we een voorbeeld van een negatieve bewering bekijken

cy.get('#loading').should('not.be.visible')

Negatieve bewering wordt alleen aanbevolen in gevallen om te verifiëren dat een bepaalde aandoening niet langer beschikbaar is nadat een specifieke actie door de toepassing is uitgevoerd.

Laten we bijvoorbeeld aannemen dat een schakelaar is aangevinkt en controleren of deze is verwijderd

// eerst wordt het item gemarkeerd als voltooid cy.contains('li.todo', 'Write tests') .should('have.class', 'completed') .find('.toggle') .click() / / de CSS-klasse is verwijderd cy.contains('li.todo', 'Write tests').should('not.have.class', 'completed')

Cypress Custom Assertion-bericht

Met Cypress kunnen we aanvullende informatie of een aangepast bericht voor beweringen leveren door een bibliotheek met matchers te gebruiken. Matchers bestaat uit kleine functies die waarden differentiëren en een gedetailleerde foutmelding geven. Chai assertion-bibliotheek helpt onze code er leesbaarder uit te zien en testfouten zijn erg handig

const expect = vereisen('chai').expect it('checkt a number', () => { const value = 10 const verwacht = 3 expect(value).to.equal(expected) })

Cypress Assertion Best Practices

We kunnen meerdere beweringen in een enkel blok schrijven door een reeks commando's te gebruiken. Het is niet nodig om een enkele bewering te schrijven zoals in unit tests. Velen schrijven beweringen zoals hieronder. Het is prima om op die manier te schrijven, maar het verhoogt de coderegel en de redundantie.

beschrijven('mijn formulier', () => { before(() => { cy.visit('/users/new') cy.get('#first').type('ashok') }) it( 'heeft validatiekenmerk', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // bevestigen of de #first een verplicht veld heeft } ) it('heeft actieve klasse', () => { cy.get('#first').should('have.class', 'active') // bevestigen of de #first actieve klasse heeft }) it( 'heeft voornaam opgemaakt', () => { cy.get('#first').should('have.value', 'Ashok') // bevestigen of de #first de eerste letter met een hoofdletter heeft geschreven }) })

Zoals je hierboven ziet, wordt dezelfde selector en hetzelfde beweringtype herhaald. In plaats daarvan kunnen we deze commando's in één enkele bewering ketenen die alle controles op een lineaire manier uitvoert.

beschrijven('mijn formulier', () => { before(() => { cy.visit('/users/new') }) it('valideert en formatteert voornaam', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .waarde', 'Ashok') }) })

Zoals hierboven vermeld, kunnen we de enkele selector koppelen aan meerdere beweringen! Dit is een van de aanbevolen best practices voor het schrijven van beweringen in Cypress.

Om meer te weten te komen over het pagina-objectmodel in Cypress, klikt u op hier.