Nell'ultimo articolo abbiamo visto cos'è Cypress, la sua architettura, il processo di installazione e i prerequisiti richiesti per l'installazione. Tuttavia, prima di iniziare a scrivere i nostri test, dobbiamo installare Cypress. Clic qui per ottenere i passaggi dettagliati per installare Cypress.

Esempio di cipresso

Questo articolo discuterà il Esempio di cipresso, esempi JSON, variabili e alias e come scrivere casi di test. Quindi iniziamo.

Sommario

Esempio JSON Cypresspress

Inizialmente, quando apriamo il nostro Cypress Test Runner, a cypress.json viene creato il file di configurazione. Tendiamo a memorizzare lo snippet che fornisce un modo per implementare e mantenere alcune proprietà che aiutano nel programma o nel codice di automazione da eseguire. Allo stesso modo, Cypress ha anche un file JSON per memorizzare tutti i valori che forniamo come proprietà di configurazione.

Esaminiamo alcuni esempi che possiamo configurare nel nostro Cypress JSON file.

Cypress ha già assegnato alcuni valori di configurazione predefiniti. Ci sono diverse opzioni che possiamo personalizzare in base alle nostre esigenze. Ad esempio, possiamo fornire il baseURL proprietà nel nostro cypress.json file. Quindi, ogni volta che eseguiamo lo script, baseURL viene impostato e si attiva.

Opzione	Valori standard	Descrizione
URL di base	nullo	Questa opzione può essere utilizzata come a URL prefisso per il cy.richiesta() or cy.visita() comandi.
watchForFileChanges	vero	Questa opzione è impostata come true per impostazione predefinita. Controlla i file per le modifiche e li riavvia quando vengono apportate modifiche.

Di seguito è riportata l'istantanea che abbiamo modificato baseURL e watchForFileChanges proprietà nel nostro Cypress.json file.

Nota: discuteremo tutte le opzioni in Cypress Configuration come argomento separato in seguito.

Cipresso aperto

In precedenza, abbiamo visto come creare un progetto Cypress. Qui vedremo come aprire ed eseguire il Cypress Test runner. Quindi tuffiamoci!

Se hai installato Cypress tramite npm, è stato installato nella directory ./node_modules. Quindi, possiamo aprire il nostro Cypress test runner passando un comando npm dal radice della nostra directory di progetto.

Possiamo aprire Cypress in uno dei seguenti modi

1. dando il comando del percorso completo

./node_modules/.bin/cypress open

2. usando la scorciatoia per npm bin

$(npm bin)/cypress open

3. usando npx

Qui npx è supportato solo con npm > v5.2, oppure possiamo installarlo separatamente.

npx cypress open

4. usando il filato

yarn run cypress open

Ora vedremo come aprire Cypress passando il comando full path nel nostro terminale.

1. Devi passare il comando menzionato sopra al punto 1 e puoi vedere quanto segue nel terminale

2. Dopo un momento, possiamo vedere l'avvio del test runner di Cypress e saremo in grado di visualizzare il test runner come mostrato di seguito. Dopo l'avvio del test runner, è possibile visualizzare alcuni casi di test di esempio. Cypress ha creato una cartella di test nella nostra radice del progetto che ci aiuta con l'impostazione di base e la scrittura dei casi di test.

Torniamo ora a VS Code. Innanzitutto, puoi visualizzare alcune strutture di cartelle che sono state popolate. Ora analizziamo ciascuna delle strutture di cartelle e le esaminiamo in dettaglio.

Struttura delle cartelle in Cypress

Come vediamo, Cypress ha creato una struttura di cartelle nel nostro editor di codice. Li discuteremo in dettaglio.

Variabili e alias

Discuteremo in dettaglio le variabili e gli alias in Cypress.

Mentre comprendiamo e impariamo Cypress, potrebbe essere difficile per noi capire il API asincrona natura in cipresso. Ma come vediamo molti esempi in futuro, diventerebbe un gioco da ragazzi. Molti browser moderni utilizzano API asincrone e anche i moduli principali del nodo sono scritti con codice asincrono. Inoltre, il codice asincrono è presente ovunque nel codice Javascript. Pertanto, esamineremo i valori restituiti in Cypress.

Valori restituiti in cipresso

Tutti i comandi Cypress sono accodato e eseguire il in modo asincrono. Pertanto, noi non può assegnare o interagire con alcun valore restituito di eventuali comandi Cypress. Vedremo un piccolo esempio dello stesso.

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

button.click()

chiusure

Non possiamo accedere agli attributi del pulsante tramite il comando sopra menzionato. Invece, possiamo fornire comandi Cypress usando .then(). Noi li chiamiamo chiusure.

.poi()

.then() ti aiuta ad accedere al thread prodotto dal comando precedente. Se hai capito promesse native, è allo stesso modo .then() funziona con Cypress. Possiamo anche annidare diversi comandi all'interno di .then(). Ogni comando annidato può accedere al comando precedente nel ciclo. Lo vedremo con un esempio.

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)
  })
})

Abbiamo usato chiusure nell'esempio sopra, permettendoci di mantenere il riferimento del comando precedente nel ciclo.

Variabili

Di solito, si tende ad assegnare un valore a una variabile. Ma in Cypress, usiamo a malapena const, vare let. Quando utilizziamo le chiusure, possiamo accedere agli oggetti resi senza assegnarli a una variabile.

Ma ci sono alcuni casi in cui possiamo dichiarare una variabile è quando il lo stato dell'oggetto cambia (oggetti mutabili). Ad esempio, se richiediamo il confronto di an oggetto al suo valore precedente, li dichiareremo a una variabile per confrontarlo con il valore successivo. Consideriamo un esempio a riguardo.

<button>increment</button>

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

Qui, l'intervallo con il conteggio 0 continua ad aumentare ogni volta che si fa clic sul pulsante. Quindi l'oggetto pulsante tende a cambiare il suo stato ogni volta.

Ora diamo un'occhiata a come possiamo assegnare questo a una variabile nel nostro codice Cypress.

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)
    })
})

Poiché span cambia il suo stato ogni volta che facciamo clic sul pulsante, possiamo assegnarlo a una variabile per confrontare il suo stato presente e precedente. Solo nel caso di oggetti mutabili avremo bisogno di variabili, e usando const è un buon approccio.

Alias

In precedenza, abbiamo visto quali sono le variabili e i suoi limiti in Cypress. Per superare questa limitazione, entra in gioco Alias. Alias ​​è uno dei potenti costrutti di Cypress. Lo esamineremo in dettaglio con esempi.

In genere, gli alias possono aiutarti a lavorare come una variabile. Tuttavia, ci sono alcuni casi d'uso in cui un alias può aiutarci al posto di una variabile.

1. Riutilizza elementi DOM

Possiamo alias elementi DOM e successivamente accedervi per il riutilizzo. Gli alias superano anche i limiti di .poi() comando.

2. Condivisione del contesto

In parole povere, la condivisione del contesto è la condivisione dell'oggetto tra gli hook e i test. Il caso d'uso principale per la condivisione del contesto è affrontare cy.fixture – ovvero caricare un insieme fisso di dati in un file.

Come accedere agli alias?

Qui vedremo come accedere agli alias. Useremo il .as() comando per assegnare l'elemento per un uso successivo. Il parametro richiesto è il pseudonimo. Il nome dell'alias è usato come riferimento all'interno di a cy.get() or cy.wait() usando il @ prefisso.

Esamineremo un esempio di come accedere agli alias.

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

Nella prima riga, stiamo ottenendo l'id di user_login dal DOM. Stiamo quindi usando .as() e dichiarando con un nome username. Nella seconda riga, stiamo accedendo al nostro alias con @ simbolo ed eseguendo il Digitare azione.

Esempio di test su cipresso

Inizieremo a scrivere il nostro primo test case con Cypress. È molto semplice e facile. Ma prima, esamineremo i costrutti del test di Cypress.

Costrutti di base in cipresso

Cypress ha adottato la sintassi Mocha per i suoi casi di test e utilizza tutte le opzioni fornite da Mocha. Di seguito sono riportati i costrutti Cypress di base utilizzati in comune per i nostri casi di test.

• Descrivere() – combina tutti i casi di test in un unico test più grande e li raggruppa insieme. Richiede due parametri: la descrizione del test e una funzione di callback.
• esso() – scriviamo casi di test individuali nel nostro blocco it(). Questo blocco accetta anche due parametri: cosa fa un test e il secondo parametro è la funzione di callback.
• dopo() – questo viene eseguito dopo tutti i test nel file spec.
• dopo ogni() – questo viene eseguito dopo ogni singolo caso di test.
• prima() – viene eseguito prima di tutti i test nel file spec.
• prima di ogni() – esegue prima di ogni singolo test case.

Come scrivere un caso di prova?

Prima di iniziare, dovremmo sapere cos'è un test case, scriverlo e quali sono i passaggi per un test case di base.

1. Pre-requisito – Lo stato dell'applicazione che andremo a testare.

2. Action – Eseguiamo alcune azioni sull'applicazione.

3. Affermazione – Affermiamo o convalidiamo il comportamento modificato riguardo alle nostre azioni.

considereremo Lamda Geeks applicazione per i nostri esempi di test. Con la stessa procedura, prenderemo in considerazione l'automazione del seguente scenario

1. Visita il sito https://lambdageeks.com/

2. Convalida se il titolo è Home – Lambda Geeks
Il cipresso usa cy come definizione di tipo. Aggiungeremo il cy comando per invocare qualsiasi metodo.
Innanzitutto, creiamo un nuovo file nel nostro editor di codice.

1. Crea una nuova cartella denominata Dimo nella cartella di integrazione.

2. Nella cartella Demo, crea un nuovo file campione.js. Scriveremo il nostro primo test case in questo file.

Ora iniziamo a scrivere i nostri casi di test!

1. 1. In primo luogo, visiteremo la pagina utilizzando il visitare() metodo in Cipresso. Questo comando navigherà all'URL che forniamo. Li racchiuderemo all'interno di un blocco description() e it().

//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. Una volta aperta l'applicazione, convalideremo il titolo utilizzando il pulsante get() metodo in Cipresso .get() recupera tutti i selettori CSS dal DOM.

Stiamo accedendo al titolo utilizzando il title() metodo, e stiamo affermando di utilizzare la libreria Chai con il comando dovrebbe passando il primo parametro come uguale, in breve eq. Il secondo parametro è la stringa che ci aspettiamo.

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

Evviva! Con due semplici passaggi, abbiamo scritto il nostro Cypress Test case.

Ecco il codice completo del nostro test case

//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')
       
    });
});

Esempio di accesso Cypress

Vedremo esempi di come automatizzare una pagina di accesso utilizzando Cypress. Come abbiamo visto prima, scrivere un test case in Cypress è semplice. Ora passiamo all'impostazione dei valori nel campo di testo e nelle asserzioni.

1. Visitiamo il sito web https://demo.applitools.com/ utilizzando cy.visit comando.

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

2. Immettere il nome utente nel campo del nome utente utilizzando il comando type. Passeremo il nome utente come stringa nel tipo come parametro.

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

3. Allo stesso modo, scriviamo lo stesso comando per inserire la password

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

4. Ora, facciamo clic sul pulsante di accesso utilizzando il click() metodo in Cipresso.

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

5. Dopo aver effettuato l'accesso, atterriamo sulla pagina dell'app. Quindi affermiamo che l'URL ha il /app estensione usando il .include() parola chiave in chai. Il primo parametro di dovrebbe è la parola chiave che stiamo affermando e il secondo parametro è il risultato atteso.

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

Abbiamo scritto un codice completo per una funzionalità di accesso in cinque semplici passaggi. Di seguito è riportato il codice completo per riferimento.

//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')

    });
});

Soluzioni a problemi comuni durante l'avvio di Cypress e FAQ

Potrebbero esserci dei problemi comuni che dovremo affrontare quando cercheremo di avviare Cypress. Discuteremo alcuni dei problemi comuni.

1. Impossibile trovare il comando "Cypress" durante il comando Open Cypress

Una volta dopo l'installazione, dovremmo passare il comando open cypress dalla radice della directory del progetto. Ad esempio, hai creato un progetto chiamato CypressProject; dovresti passare il npm init comando accedendo alla cartella CypressProject. Puoi navigare dando il comando seguente nel terminale

cd CypressProject

Una volta che sei alla radice del progetto, passa il npm init comando per scaricare le dipendenze.

Ora per aprire Cypress, alcune persone provano a navigare verso il /node_modules cartella e ./bin e quindi passare il comando di apertura del cipresso. Tuttavia, non funziona in questo modo. Quindi, invece, dai l'intero comando open dalla radice della directory del progetto per aprire Cypress.

./node_modules/.bin/cypress open

Inoltre, fai attenzione alla barra '/'. Fornisci sempre questo '/' per aprire Cipresso.

2. Cipresso non può essere caricato perché l'esecuzione degli script è disabilitata su questo sistema

Quando installi Cypress in Windows, a volte potresti riscontrare l'errore di cui sopra. È perché a causa di un'eccezione di sicurezza. Possiamo risolvere questo errore passando il comando seguente in PowerShell.

Set-ExecutionPolicy RemoteSigned

Passos per riprodurre:

• Apri PowerShell
• Esegui questo comando Set-ExecutionPolicy RemoteSigned
• Tipologia Yes
• Ora apri il Cipresso passando ./node_modules/.bin/cypress open. Test Runner si aprirà ora.

FAQ

1. Quali sono i sistemi operativi supportati da Cypress?

Supporti in cipresso Mac, Windowse Linux sistemi operativi.

2. Cypress supporta l'automazione nelle app mobili native?

Cypress non potrà mai essere eseguito su un'app mobile nativa. Ma possiamo testare le applicazioni mobili scritte in un browser come Iconic Frameworks.

3. Se Cypress supporta solo applicazioni basate su Javascript?

No! Cypress può interagire con qualsiasi browser web scritto in linguaggi come Ruby on Rails, Node, PHP, C#. Ma scriveremo i nostri test in Javascript. Altrimenti, Cypress può interagire con qualsiasi front-end, back-end, linguaggio e framework.