Asserzione di cipresso: 9 fatti che dovresti sapere

by

Cypress Assertion ci aiuta ad affermare un particolare Le asserzioni sono passaggi di convalida che garantiscono se il risultato atteso è uguale al risultato effettivo. Nell'automazione dei test, affermiamo una dichiarazione per verificare che il test stia generando il risultato atteso. Se l'asserzione fallisce, il test case fallisce assicurando che ci sia un bug. In questo articolo parleremo di Cypress Assertion con implementazione ed esempi di Handson.

Tabella dei Contenuti

Cipresso Affermazione

Cos'è l'affermazione di Cypress?

Cypress utilizza e racchiude la libreria di asserzioni Chai ed estensioni come Sinon e JQuery. Cypress attende e riprova automaticamente fino a quando l'asserzione non viene risolta. Le asserzioni possono essere utilizzate per descrivere come dovrebbe apparire l'applicazione. Possiamo usare le asserzioni Cypress con una combinazione di attese, riprova, blocco fino a raggiungere lo stato desiderato.

Testo dell'asserto di cipresso

In inglese generale, descriveremmo un'affermazione del tipo, Mi aspetto che il pulsante contenga il testo di accesso. La stessa affermazione può essere scritta in Cypress come

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

L'affermazione di cui sopra passerà se il pulsante ha valore 'login'.

Affermazioni comuni sul cipresso

Ci sono una serie di asserzioni Cypress comuni che usiamo nei nostri casi di test. Li useremo con .should() . Esaminiamo il caso d'uso e gli esempi.

Alcune delle comuni affermazioni di Cypress sono elencate di seguito

  1. Lunghezza
  2. Valore
  3. Contesto del testo
  4. Classe
  5. Esistenza
  6. CSS
  7. Visibilità
  8. Regione / Stato
  9. Proprietà per disabili

Affermazione della lunghezza del cipresso

length() controllerà se il particolare elemento ha lunghezza

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

Affermazione del valore del cipresso

Il valore Cypress asserisce se il particolare elemento ha il valore atteso

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

Asserzione del contesto del testo di Cypress

Il contesto del testo asserirà se l'elemento ha il testo particolare

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

Affermazione di classe Cypress

Afferma se la classe è presente o se il particolare elemento dovrebbe avere la classe

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

Affermazione dell'esistenza del cipresso

Il comando di esistenza controlla se il particolare elemento è presente o esiste nel DOM o no

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

Cypress CSS Asserzione

L'asserzione CSS controlla se i particolari elementi hanno una particolare proprietà

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

Asserzione di visibilità del cipresso

Cypress Visibility Assertion afferma se l'elemento DOM è visibile nell'interfaccia utente

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

Affermazione dello stato del cipresso

Afferma lo stato dell'elemento DOM

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

Asserzione di proprietà disabili di Cypress

L'asserzione della proprietà Cypress Disabled afferma se l'elemento è disabilitato

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

Cipresso Riprova Asserzione

Un singolo comando seguito da un'asserzione verrà eseguito in ordine. Inizialmente, il comando viene eseguito e quindi l'asserzione verrà eseguita. Verrà eseguito anche un singolo comando seguito da più asserzioni in ordine, rispettivamente prima e seconda asserzione. Quindi, quando la prima asserzione passa, la prima e la seconda asserzione verranno eseguite di nuovo insieme ai comandi.

Ad esempio, il comando seguente contiene entrambi .should() ed .and() comandi di asserzione, dove .and() è altrimenti noto come .should()

cy.get('.todo-list li') // comando .should('have.length', 2) // asserzione .and(($li) => { // altre 2 asserzioni wait($li.get (0).textContent, 'first item').to.equal('todo A') Expect($li.get(1).textContent, 'second item').to.equal('todo B') })

Esempi di affermazione di cipresso

In questa sezione, discuteremo sui diversi tipi di asserzioni in Cypress come

  • Asserzione implicita
  • Asserzione esplicita

Esamineremo in dettaglio entrambi i tipi con esempi

Asserzione implicita in Cypress

Nell'asserzione implicita, usiamo .should() or .and() comandi. Questi comandi di asserzione si applicano al soggetto attualmente fornito nella catena di comandi. Dipendono dal soggetto ceduto in precedenza.

Esamineremo un esempio su come utilizzare .should() or .and() comandi

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

Con .and() che è un alias di .should() , possiamo concatenare più asserzioni. Questi comandi sono più leggibili.

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

L'esempio sopra è concatenato con .should() affermando che dovrebbe avere la classe "attivo", seguito da .and() viene eseguito contro lo stesso comando. Questo è molto utile quando vogliamo asserire più comandi.

Affermazione esplicita in Cypress

Il passaggio del soggetto esplicito nelle asserzioni rientra nel tipo esplicito di asserzione Cypress. Qui, useremo expect ed assert comandi come asserzione. Le asserzioni esplicite vengono utilizzate quando vogliamo utilizzare più asserzioni per lo stesso argomento. Usiamo anche asserzioni esplicite in Cypress quando vogliamo fare personalizzato logica prima di fare l'affermazione.

Esamineremo il esempio per esplicito Cipresso asserzione

Expect(true).to.be.true //verifica un valore booleano Expect(object).to.equal(object)

Affermazione negativa del cipresso

Simile alle asserzioni positive, ci sono asserzioni negative in Cypress. Useremo la parola chiave "not" aggiunta al prefisso dell'asserzione. Vediamo un esempio di asserzione negativa

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

L'asserzione negativa è consigliata solo nei casi in cui si verifica che una particolare condizione non sia più disponibile dopo che l'applicazione ha eseguito un'azione specifica.

Ad esempio, consideriamo che un toggle sia controllato e verifichiamo che sia stato rimosso

// all'inizio l'elemento è contrassegnato come completato cy.contains('li.todo', 'Scrivi test') .should('have.class', 'completed') .find('.toggle') .click() / / la classe CSS è stata rimossa cy.contains('li.todo', 'Scrivi test').should('not.have.class', 'completed')

Messaggio di asserzione personalizzato Cypress

Con Cypress, possiamo fornire informazioni aggiuntive o messaggi personalizzati per le asserzioni utilizzando una libreria di matcher. I matcher comprendono piccole funzioni che differenziano i valori e genereranno un messaggio di errore dettagliato. Chai la libreria di asserzioni aiuterà il nostro codice a sembrare più leggibile e l'errore di test molto utile

const aspetta = require('chai').expect it('verifica un numero', () => { valore const = 10 const previsto = 3 aspetta(valore).to.uguale(previsto)})
cyy
Messaggio di errore personalizzato Cypress

Migliori pratiche per l'affermazione di Cypress

Possiamo scrivere più asserzioni in un singolo blocco usando una catena di comandi. Non è necessario scrivere una singola asserzione come negli unit test. Molti scrivono affermazioni come di seguito. Va bene scrivere in quel modo, ma aumenta la riga di codice e la ridondanza.

describe('my form', () => { before(() => { cy.visit('/users/new') cy.get('#first').type('ashok') }) it( 'ha attributo di convalida', () => { cy.get('#first').should('have.attr', 'data-validation', 'required') // asserendo se il #first ha un campo obbligatorio } ) it('ha una classe attiva', () => { cy.get('#first').should('have.class', 'active') // affermando se la #first ha una classe attiva }) it( 'ha formattato il nome', () => { cy.get('#first').should('have.value', 'Ashok') // affermando se la #first ha la prima lettera maiuscola }) })

Come vedi sopra, lo stesso selettore e lo stesso tipo di asserzione viene ripetuto. Invece, possiamo concatenare questi comandi in un'unica asserzione che esegue tutti i controlli in modo lineare.

describe('my form', () => { before(() => { cy.visit('/users/new') }) it('validates and format first name', () => { cy.get ('#first') .type('ashok') .should('have.attr', 'data-validation', 'required') .and('have.class', 'active') .and('have .value', 'Ashok') }) })

Come accennato in precedenza, possiamo concatenare il singolo selettore con più asserzioni! Questa è una delle migliori pratiche consigliate per scrivere asserzioni in Cypress.

Per comprendere il modello oggetto della pagina in Cypress, fare clic su qui.