In questo tutorial, discuteremo in dettaglio il Cypress Automation Framework. Tratteremo cos'è Cypress, come è diverso da altri framework di test, l'architettura di Cypress e la procedura di installazione in questo articolo. Il cipresso è un argomento entusiasmante ed è anche divertente da imparare. Cominciamo!

Struttura di automazione del cipresso

Cypress Automation Framework è un puro strumento di test basato su Javascript che si concentra principalmente sul test front-end nelle moderne applicazioni web. Con Cypress, le applicazioni sono facili da testare con l'interfaccia visiva per assistere all'esecuzione del test. Pertanto, Cypress rappresenta un vantaggio sia per gli sviluppatori che per i tecnici del controllo qualità, semplificando la scrittura di script e l'esecuzione dei test. Inoltre, viene fornito con un test runner distintivo, che semplifica la manipolazione del DOM e viene eseguito direttamente sul browser.

Tabella dei Contenuti

Cos'è il cipresso?

Cypress è più veloce, migliore e fornisce test definitivi che vengono eseguiti su un browser. Cypress è principalmente confrontato con Selenium, ma è completamente diverso. Cypress non funziona sopra il selenio, il che significa che è completamente indipendente. Invece, Cypress viene eseguito su Mocha, che è di nuovo un framework di test ricco di Javascript. È compatibile solo con la Chai Assertion Library, che può accedere a un'ampia gamma di asserzioni BDD e TDD.

Cypress si concentra principalmente su tre diversi tipi di test. Sono test end-to-end, test unitari e test di integrazione. Cypress può eseguire tutti i test che possono essere eseguiti in un browser. Inoltre, viene fornito con diverse capacità di simulazione e convalide che sono affascinate dai test front-end.

I browser supportati da Cypress sono Chrome, Firefox, Edge, Electron e Brave. Inoltre, il test cross-browser è facilmente realizzabile con Cypress. Infine, sebbene Cypress supporti solo Javascript, può anche essere scritto con Typescript, principalmente scritto con Javascript.

Automazione Cypress

Cypress è uno strumento open source con un test runner gratuito ma ha prezzi che variano per team e aziende in cui ti fanno pagare per la Dashboard. Tuttavia, Dashboard è gratuito fino a un certo punto, a meno che tu non abbia funzionalità aggiuntive come il rilevamento di Flake, il supporto e-mail, l'integrazione di Jira e molti altri.

Cypress è principalmente utilizzato per automatizzare gli script sul web (può automatizzare tutto ciò che viene eseguito su un browser). Non può mai essere eseguito su app mobili native, ma può automatizzare alcune delle funzionalità delle applicazioni mobili se sviluppate in un browser.

Caratteristiche

Ci sono molte fantastiche funzionalità disponibili in Cypress che si distinguono da qualsiasi altro strumento di automazione. Qui, discutiamo alcune delle caratteristiche principali e verranno introdotte altre parti in seguito una volta che inizieremo a scrivere i nostri casi di test!

1. Attesa automatica – Cypress ha il vantaggio dell'attesa automatica. Non avremo mai bisogno di aggiungere attese forzate e dorme per aspettare che il DOM recuperi l'elemento. Cypress attende automaticamente qualsiasi interazione con gli elementi e l'esecuzione di asserzioni. Quindi, i test sono veloci!
2. Viaggio nel tempo – Cypress acquisisce schermate durante l'esecuzione del test. Possiamo visualizzare i risultati visivamente in tempo reale semplicemente passando con il mouse sui comandi eseguiti nella Dashboard. In questo modo, i test sono più facili da eseguire il debug
3. Test di debug – Cypress può eseguire il debug di test da strumenti popolari come gli strumenti per sviluppatori. Gli errori sono leggibili e gli stack sono facilmente rintracciabili.
4. Stub richieste – Cypress ha opzioni per confermare e controllare i comportamenti delle funzioni, le risposte di rete o i timer utilizzati da stub e spie.
5. Integrazione continua – Cypress non dipende da altri servizi CI aggiuntivi. Tuttavia, eseguendo il comando per il test, l'integrazione è facilmente accessibile.

Mito sul cipresso

C'è un mito che Cypress possa essere eseguito solo su applicazioni web compatibili con Javascript. Tuttavia, Cypress può testare qualsiasi applicazione web creata con Django, Ruby on Rails, Laravel, ecc. Inoltre, Cypress supporta qualsiasi linguaggio di programmazione come PHP, Python, Ruby, C#, ecc. Tuttavia, scriviamo i nostri test in Javascript ; oltre a ciò, Cypress funziona su qualsiasi applicazione.

Componenti di Cypress

Ci sono due componenti principali in Cypress. Loro sono Corridore di prova ed Performance modelli/hostess.

Corridore di prova – Cypress fornisce questo test runner unico, in cui l'utente può visualizzare i comandi durante l'esecuzione e l'applicazione in fase di test.

Ci sono pochi sottocomponenti in Test runner. Loro sono

1. Registro comandi – Questa è una rappresentazione visiva della suite di test. Puoi vedere i comandi eseguiti nel test, i dettagli dell'asserzione e i blocchi di test.
2. Menu di stato del test – Questo menu mostra il numero di casi di test che hanno superato o meno e il tempo impiegato per l'esecuzione.
3. Anteprima URL – Questo ti dà informazioni sull'URL che stai testando per tenere traccia di tutti i percorsi URL.
4. Ridimensionamento della vista – Puoi impostare la dimensione della finestra dell'app per testare diversi layout reattivi
5. Anteprima dell'app – Questa sezione visualizza i comandi eseguiti in tempo reale. Qui puoi usare Devtools per eseguire il debug o ispezionare ogni base.

Dashboard: Cypress Dashboard offre la possibilità di accedere ai test che vengono registrati. Con il servizio Dashboard, possiamo testimoniare il numero di test superati, falliti o saltati. Inoltre, possiamo visualizzare le istantanee dei test falliti utilizzando cy. comando screenshot(). Puoi anche assistere al video dell'intero test o alla clip dei test falliti.

Architettura di cipresso

La maggior parte degli strumenti di test viene eseguita sul server al di fuori del browser ed esegue comandi sulla rete. Ma Cypress viene eseguito sul browser in cui è in esecuzione anche l'applicazione. In questo modo può accedere a tutti gli elementi DOM ea tutto ciò che si trova all'interno del Browser.

Il server del nodo viene eseguito dietro Cypress sul lato client. Pertanto, il server del nodo e Cypress interagiscono tra loro, accompagnano e svolgono attività per supportare l'esecuzione. Poiché ha accesso sia al front che al back-end, la reattività all'applicazione in tempo reale durante l'esecuzione è ben realizzata e può anche eseguire attività che vengono eseguite anche al di fuori del browser.

Cypress interagisce anche con il livello di rete e acquisisce i comandi leggendo e modificando il traffico web. Infine, Cypress invia richieste e risposte HTTP dal server del nodo al browser. Poiché Cypress opera a livello di rete, aiuta a modificare il codice che potrebbe interferire con l'automazione del browser web. La comunicazione tra il server Node e il browser avviene tramite WebSocket, che inizia l'esecuzione dopo l'avvio del proxy.

Cypress controlla tutti i comandi che vengono eseguiti dentro e fuori i browser. Poiché è installato in una macchina locale, interagisce direttamente con il sistema operativo per registrare video, acquisire istantanee, accedere al livello di rete ed eseguire facilmente le operazioni del file system. Cypress può accedere a tutto da DOM, oggetti finestra, archiviazione locale, livello di rete e DevTools.

Installa Cypress

Questa sezione discuterà il processo di installazione che deve essere seguito prima di scrivere i nostri casi di test. Esistono due modi diversi per scaricare Cypress. Sono

1. Installa tramite npm
2. Download diretto

Prima di installare Cypress, potremmo aver bisogno di alcuni prerequisiti per avviare l'installazione tramite npm. Vediamoli nel dettaglio.

Pre-requisiti

Richiederemo alcuni prerequisiti prima di scrivere i nostri casi di test.

• Come discusso sopra, Cypress viene eseguito su un server nodo; quindi dovremo installare Node.js.
• Inoltre, per scrivere i nostri casi di test, abbiamo bisogno di un editor di codice o IDE.

In questo esempio, utilizzeremo Visual Studio Code. Allora tuffiamoci nei dettagli.

Installazione di Node.js su Mac

Qui, discuteremo i passaggi per scaricare Node.js in Mac. Navigare verso https://nodejs.org/en/download/. Ora atterrerai sulla pagina di download.

1.Fai clic sul programma di installazione di macOS. Facendo clic, è possibile trovare un file del pacchetto scaricato di seguito. Fare clic sul file pkg per installare Node.js

2. Dopo aver fatto clic sul file .pkg, si aprirà il programma di installazione del nodo. La sezione introduttiva fornisce le versioni Node.js e npm. Fare clic su Continua

3. Fare clic sul pulsante Accetto e poi su Continua. Apparirà un pop-up per consentire l'accesso ai tuoi file nella cartella Download. Fare clic su Ok.

4. In questa sezione è possibile selezionare la destinazione in cui scaricare Node.js. Ancora una volta, puoi scegliere in base allo spazio del tuo sistema. Qui sto scegliendo la posizione predefinita.

5. Fare clic sul pulsante Installa. Dopo aver fatto clic, verrà visualizzato un pop-up che richiede la password del sistema. Inserisci la tua password e fai clic su Installa software.

6. Evviva! Abbiamo installato Node.js e il pacchetto npm. Fare clic su Chiudi per completare l'installazione.

Installazione del codice di Visual Studio in Mac

Abbiamo installato con successo Node.js. Ora installiamo il nostro editor di codice Visual Studio Code. Il codice VS è un potente strumento che ha tutte le funzionalità integrate di Javascript. Quindi tuffiamoci nei passaggi di installazione di Visual Studio Code.

Qui discuteremo i passaggi per scaricare il codice VS in Mac. Per prima cosa, vai a https://code.visualstudio.com/download per atterrare sulla pagina di download del codice VS.

1. Fare clic sull'icona del Mac. Di seguito è possibile vedere un pacchetto scaricato.

2. Fare clic sul file scaricato per decomprimere il pacchetto. Una volta decompresso, puoi trovare il codice di Visual Studio in Download nel Finder.

3. Evviva! Abbiamo scaricato il nostro editor di codice. Fare clic sull'icona per aprire Visual Studio Code.

Creazione di un nuovo progetto Cypress

Vedremo ora come creare un nuovo progetto nodo nel nostro codice di Visual Studio. Dopo aver fatto clic sull'icona del codice VS, atterrerai sulla pagina di benvenuto. Quindi, fai clic sulla cartella Aggiungi area di lavoro per creare una nuova cartella.

Dopo aver fatto clic sulla cartella, verrà visualizzato un pop-up che chiede di aggiungere una nuova cartella. Ora fai clic sulla posizione in cui desideri aggiungere l'area di lavoro. Quindi, fai clic su Nuova cartella e Aggiungi il nome della cartella come CypressProject e fai clic su Apri.

Ora abbiamo creato una cartella per il nostro test Cypress. Prima di iniziare a scrivere i nostri test, dovremmo installare il file package.json. Prima di installare, cerchiamo di capire cos'è il file package.json.

Che cos'è il file Package.json?

Package.json comprende tutti i pacchetti npm in un file, solitamente situato nella radice del progetto. Si trova comunemente nella directory principale del progetto Node.js. Questo file contiene tutti i metadati applicabili necessari per il progetto. Fornisce tutte le informazioni a npm e aiuta a identificare il progetto e gestire le dipendenze. Il file Package.json contiene informazioni come nome del progetto, versioni, licenza, dipendenze e molto altro.
Ora abbiamo capito cos'è il file package.json. Quindi, iniziamo i passaggi per scaricare il file nel nostro codice di Visual Studio.

1. Per eseguire i nostri comandi, dobbiamo aprire il Terminale. Nella parte superiore del codice VS, fai clic su terminal. Una volta aperto il menu a discesa, fai clic su Nuovo terminale.

2. Una volta aperto il terminale, digitare il comando seguente nella directory del progetto e premere Invio.

npm init

3. Dopo aver premuto Invio, è possibile visualizzare determinate informazioni. Puoi digitare i dettagli richiesti nel Terminale e premere Invio per ottenere tutti i campi.

• Nome del pacchetto: Puoi fornire qualsiasi nome al tuo pacchetto. L'ho lasciato vuoto poiché è precompilato con il nome della cartella che abbiamo creato.
• Versione: Fornisce le informazioni sulla versione di npm. Puoi saltare questo e premere Invio.
• Descrizione: Qui puoi dare un'informazione aggiuntiva al pacchetto. Se richiesto, è possibile digitare la descrizione e premere nuovamente Invio.
• Punto d'entrata: rappresenta il punto di ingresso dell'applicazione. Poiché è precompilato con index.js, possiamo saltare questo campo e premere Invio.
• Comando di prova: Comando che viene dato per eseguire il test. Qui non è necessario dare alcun comando, ma se richiesto, puoi sicuramente fornire qualsiasi comando.
• Repository Git: questo campo richiede il percorso del repository git. Puoi lasciare vuoto anche questo campo.
• Parole: Parole chiave univoche per aiutare a identificare il progetto. Puoi saltare anche questo campo.
• Autore: di solito è il nome utente della persona. Puoi aggiungere il tuo nome e premere Invio.
• Licenza: La licenza è precompilata con ISC. Puoi procedere premendo Invio.

• 4. Dopo aver premuto Invio, Terminal chiederà conferma elencando tutti i dettagli forniti. genere Sì e premere di nuovo Invio.

Ora abbiamo generato un file package.json. Puoi visualizzare il file nel tuo editor di codice con le informazioni che abbiamo fornito.

Fasi di installazione di Cypress

Abbiamo installato tutti i prerequisiti per il download, il nodo e l'inizializzazione di npm di Cypress. Come accennato in precedenza, ci sono due modi per scaricare Cypress.

Scarica Cypress tramite npm

Dovrai passare il comando sotto menzionato nel Terminale per installare Cypress. Inoltre, dovrai dare il comando nella directory del progetto per installare il nodo e generare il file package.json.

npm install cypress --save-dev

Una volta passato il comando, scaricherà tutte le dipendenze rilevanti richieste per il progetto. Al momento della stesura di questo articolo, l'ultima versione di Cypress è 7.7.0. La versione potrebbe essere diversa al momento del download.

Con riferimento all'immagine sopra, puoi vedere che abbiamo scaricato Cypress. Puoi verificare tramite la rappresentazione scaricata in Terminale e l'aggiunta di devDependencies nel file package.json.

Download diretto

Possiamo scaricare Cypress direttamente dal loro CDN se non stai utilizzando il pacchetto Node o npm nel progetto. Tuttavia, la registrazione dei test nella Dashboard non è possibile tramite download diretto.

Puoi scaricare cliccando su scarica Cypress direttamente da questo link. Questo ora scaricherà direttamente il pacchetto. Una volta scaricato il pacchetto, apri il file zip e fai doppio clic. Cypress verrà eseguito senza la necessità di alcuna installazione di dipendenze. Questo download prenderà sempre l'ultima versione basata e la piattaforma verrà rilevata automaticamente. Tuttavia, si consiglia di scaricare Cypress tramite npm piuttosto che un download diretto.

Per ulteriori post sulla tecnologia, visita il nostro Pagina della tecnologia.

Aishwarya Lakshmi

Ciao... sono Aishwarya Lakshmi, ho completato il mio B.Tech e ho quasi 2+ anni di esperienza nel settore dei test. Sono un entusiasta dei test e una passione per i test e amo esplorare nuove cose nel mio campo e condividerle con i miei colleghi. Mi piace scrivere blog durante il mio tempo libero nel modo più semplice ma efficace. Come tester, mi piace avere le cose alla perfezione, quindi auguro ai miei lettori di avere una perfetta comprensione della tecnologia. Mi tengo aggiornato con le nuove tecnologie relative ai test e passo il tempo a capirle. Sono felice di aiutare gli studenti a comprendere i concetti durante i test.