Scrivere E2E test
con Cypress
per applicazioni front-end
In questo corso imparerai a scrivere test E2E con Cypress e TypeScript, allo scopo di garantire il funzionamento della tua applicazione web, indipendentemente dal linguaggio (JS, Java, PHP, ...) e dal framework front-end utilizzato: Angular, Vue, React, Svelte, Qwik ... o perfino jQuery : )
L'unico video corso in italiano su E2E e Component Testing in Cypress!
L'unico video corso in italiano su E2E e Component Testing in Cypress!
In pochi giorni imparerai a:
- • apprezzare i test e non trovarli più noiosi o inutili
- • ridurre i tempi di rilascio fino al 90%*
- • aumentare la produttività fino all'80%*
- • ridurre i costi dei test fino al 75%*
* Estratto dal rapporto "The ROI of Test Automation" di Tricensis che ha esaminato più di 500 aziende
6 ore
di lezione
100+
video
12
capitoli
Introduzione
Ci troviamo spesso a gestire applicazioni e siti web composti da decine o centinaia di pagine.
Dopo ogni aggiornamento è necessario ricontrollare manualmente tutte le pagine coinvolte al fine di assicurarci che il software si comporti sempre come previsto, senza sorprese spiacevoli. Questo significa che dovremo visitare una ad una tutte le pagine e riprovare ogni funzionalità o possibile scenario. Che angoscia!
Troppo rischioso!
Questo processo di verifica manuale è davvero impegnativo e soprattutto soggetto a dimenticanze ed errori, pur avendo una checklist di operazioni da effettuare.
Guarda il video seguente per saperne di più e comprendere le differenze tra Unit, Integration e E2E test:
Cosa sono i test E2E?
I test E2E vi permettono di scrivere dei programmi che eseguiranno questi controlli al vostro posto, simulando il comportamento degli utenti e testando l’applicazione su diversi browser.
Ogni volta che sarà effettuato un aggiornamento, infatti, verrà ri-eseguita la suite di test che avrete scritto per verificare ogni scenario, con la garanzia che la vostra applicazione funzioni ancora correttamente.
I test non sono un costo ma un investimento!
Testare componenti Angular, React e Vue
Ma non solo... Cypress ha introdotto anche la possibilità di testare componenti in un ambiente isolato, riducendo o, spesso, annullando la necessità di studiare e scrivere buona parte di unit e integration test tramite altri framework e librerie dedicate.
Cosa imparerai in questo corso?
1
Cypress Fundamentals
Installare, configurare e utilizzare Cypress
2
E2E tests
Scrivere test E2E per simulare le interazioni dell'utente
3
Component Testing
Creare test isolati per componenti Angular, React, Vue, Svelte e Qwik
A chi è rivolto
Developers
(Newbie & Experts)
Indipendentemente dal framework/libreria che stai utilizzando (Angular, React, Vue, Svelte, Qwik o... jQuery/PHP/Java/...) questo corso ti aiuterà ad entrare nel mondo del testing E2E.
REQUISITI
Per questo corso è necessario avere conoscenza base di HTML, CSS e, preferibilmente, aver già utilizzato uno dei framework front-end JavaScript di ultima generazione
Software Tester
& QA engineers
Vuoi provare altri Tool per scrivere i tuoi test E2E?
Utilizza questo corso per comprendere come Cypress possa aiutarti a scrivere test migliori anche con il team che lavora sul Front End.
Il corso è pratico-centrico e non teorico, potrai avere un'ottima panoramica e capire se può coprire i vostri use case
Utilizza questo corso per comprendere come Cypress possa aiutarti a scrivere test migliori anche con il team che lavora sul Front End.
Il corso è pratico-centrico e non teorico, potrai avere un'ottima panoramica e capire se può coprire i vostri use case
Punti di forza
Acquisisci il know-how necessario per testare componenti e intere applicazioni front-end con video brevi e molto pratici
Micro Learning
Perché perdere tempo con video lunghi e tediosi, creati al solo scopo di allungare il corso?
Lezioni brevi, molto pratiche e "velocizzate" in post-produzione nelle parti più noiose e ripetitive.
(altrimenti, il corso avrebbe avuto una durata di almeno 10-12 ore)
Lezioni brevi, molto pratiche e "velocizzate" in post-produzione nelle parti più noiose e ripetitive.
(altrimenti, il corso avrebbe avuto una durata di almeno 10-12 ore)
Nuova Skill
Aggiungi una nuova competenza al tuo Curriculum.
Scrivere test è una delle skill che fa la differenza in fase di colloquio e definizione della RAL.
Scrivere test è una delle skill che fa la differenza in fase di colloquio e definizione della RAL.
Component Testing
Scrivi test E2E e sfrutta le stesse tecniche per testare componenti React, Angular, Vue in modo isolato.
In molti scenari possono rimpiazzare totalmente sia gli unit che gli integration test
In molti scenari possono rimpiazzare totalmente sia gli unit che gli integration test
Modern Stack
Nel corso utilizzerai strumenti e tecnologie front-end di ultima generazione: Cypress, Vite, TypeScript, Tailwind, Angular, React, Vue e PocketBase, solo per citarne alcune
8 Repository
Nel corso troverai 8 repository:
• 1 repo con gli esempi del corso
• 4 playground per iniziare a scrivere E2E test in TypeScript, Angular, React e Vue
• 3 playground per iniziare a scrivere Component test in Angular, React e Vue
• 1 repo con gli esempi del corso
• 4 playground per iniziare a scrivere E2E test in TypeScript, Angular, React e Vue
• 3 playground per iniziare a scrivere Component test in Angular, React e Vue
Supporto
Sei bloccato con qualche esercizio? Scrivi un commento sotto il video per ricevere supporto
Struttura del corso
Una breve panoramica sui contenuti del corso
CYPRESS FUNDAMENTALS
Nella prima parte del corso acquisirai le basi per la creazione di test E2E in Cypress e TypeScript: vedremo come installare e configurare il framework; scrivere e concatenare asserzioni con Cypress e CHAI, sia implicite che esplicite; organizzare i test e comprenderne il ciclo di vita.
In questa parte del corso scriviamo gli scenari da testare in HTML e Vanilla JavaScript (in realtà TypeScript : )
Ad ogni modo, tutti i concetti descritti possono essere applicati in applicazioni web sviluppate con qualunque linguaggio/framework: da Java, a PHP a JavaScript...
In questa parte del corso scriviamo gli scenari da testare in HTML e Vanilla JavaScript (in realtà TypeScript : )
Ad ogni modo, tutti i concetti descritti possono essere applicati in applicazioni web sviluppate con qualunque linguaggio/framework: da Java, a PHP a JavaScript...
SCRIVERE TEST E2E
La seconda parte del corso è dedicata all'approfondimento di Cypress: lavorare con i selettori; testare form e applicazioni CRUD; HTTP interceptor, mock e stub; creazione di comandi riutilizzabili; organizzare i test con "Page Object"; time travel debug; moltissimi tips & trick.
Gli scenari simulati in questa parte del corso sono creati in React/TypeScript. Tuttavia la libreria/framework utilizzata è assolutamente ininfluente in questa fase.
Ho scelto React perché è una delle librerie JavaScript attualmente più utilizzate e permette di simulare facilmente diversi scenari. Troverete comunque diversi video per configurare Cypress anche in progetti Angular v.16 e Vue 3.
In un capitolo dedicato, avremo modo, inoltre, di testare parte di un CMS reale, Pocket Base (scritto in GO), tra cui la procedura di login e la gestione delle collezioni.
Ricorda che stiamo testando il risultato finale!
Simuliamo le interazioni dell'utente e non testiamo il codice sorgente.
Gli scenari simulati in questa parte del corso sono creati in React/TypeScript. Tuttavia la libreria/framework utilizzata è assolutamente ininfluente in questa fase.
Ho scelto React perché è una delle librerie JavaScript attualmente più utilizzate e permette di simulare facilmente diversi scenari. Troverete comunque diversi video per configurare Cypress anche in progetti Angular v.16 e Vue 3.
In un capitolo dedicato, avremo modo, inoltre, di testare parte di un CMS reale, Pocket Base (scritto in GO), tra cui la procedura di login e la gestione delle collezioni.
Ricorda che stiamo testando il risultato finale!
Simuliamo le interazioni dell'utente e non testiamo il codice sorgente.
COMPONENT TESTING
La funzionalità "Component Testing" di Cypress ci consente di testare componenti individuali, come ad esempio un componente "Accordion" o una "Card", in un ambiente isolato.
Questa tipologia di test è utile per assicurarsi che i componenti funzionino correttamente in isolamento, senza dipendere dal contesto in cui sono utilizzati o da altri moduli dell'applicazione.
Configuriamo l'ambiente, creiamo diversi progetti in React 18, Angular 16 e Vue 3, scriviamo step by step il codice dei componenti e, infine, li testeremo.
Questa tipologia di test è utile per assicurarsi che i componenti funzionino correttamente in isolamento, senza dipendere dal contesto in cui sono utilizzati o da altri moduli dell'applicazione.
Configuriamo l'ambiente, creiamo diversi progetti in React 18, Angular 16 e Vue 3, scriviamo step by step il codice dei componenti e, infine, li testeremo.
La piattaforma
Il corso è fruibile tramite la piattaforma Teachable:
• Video tutorial organizzati in lezioni e capitoli
• Video brevi e ottimizzati per un apprendimento veloce
• Risorse e codice sorgente disponibile sotto ogni video
• Possibilità di commentare ogni lezione e chiedere supporto
• Possibilità di inserire note personali in ogni lezione
• Monitoraggio del proprio progresso
• Video tutorial organizzati in lezioni e capitoli
• Video brevi e ottimizzati per un apprendimento veloce
• Risorse e codice sorgente disponibile sotto ogni video
• Possibilità di commentare ogni lezione e chiedere supporto
• Possibilità di inserire note personali in ogni lezione
• Monitoraggio del proprio progresso
Il Programma
L'unico corso in italiano su E2E e Component testing con Cypress e TypeScript
01. Introduzione
Durata: 30:16
01. Unit, Integration e E2E test per il front-end: panoramica
9:50
02. Introduzione a Cypress
16:14
03. Introduzione al corso: il programma
4:12
04. La piattaforma Teachable: consultare il corso
4:12
02. Cypress e Test Fundamentals
Durata: 27:03
Installa e configura Cypress con TypeScript, scrivi i tuoi primi test E2E e apprendi i concetti fondamentali
01. TypeScript Project - Creazione Progetto con Vite
1:38
02. Installazione e configurazione Cypress
3:12
03. Run the first test
1:58
04. Configurare TypeScript
1:07
05. My First Test in Cypress
4:21
06. Describe - multiple tests
1:52
07. Testare una funzione
1:26
08. Testare il DOM
3:00
09. Cypress Console e Preview Selezioni
1:54
10. Test case multipli e assertion
2:21
11. Hooks - beforeEach
0:52
12. Hooks- before, beforeEach, afterEach, after
1:21
13. skip e only: escludere e includere test
1:19
14. Multiple Describe
0:42
03. Assertions
Durata: 14:46
Scrivi le tue prime asserzioni utilizzando Cypress e CHAI
01. Default Assertions
0:53
02. Chai
3:06
03. Explicit Subject
3:01
04. Implicit subject e le funzioni "should" / "and"
3:34
05. Multipli test case
1:24
06. La funzione "And" e altre assertion
2:48
04. E2E in Cypress in React, Angular & Vue
Durata: 11:37
Crea un progetto React / TypeScript per simulare diversi scenari da testare
01. Creazione Progetto React / TypeScript con Vite
2:50
02. Installare e avviare Cypress
1:34
03. Cypress and TypeScript
0:45
04. React Router: Creare un'applicazione multi-view
1:39
05. Angular 15 & Cypress 12: installazione e configurazione
2:19
06. Angular 16 & Cypress 13 - pt.1: installazione e configurazione
3:21
07. Angular 16 & Cypress 13 - pt.2: scrivere il primo test E2E
4:01
08. Cypress & Vue / TypeScript: configurazione e avvio test
2:30
05. Querying
Durata: 48:26
Impara ad effettuare selezioni sfruttando le API di Cypress
01. Visit URL
1:34
02. Get
4:37
03. Contains
1:29
04. get vs contain
1:49
05. Contains and Get
3:03
06. TIP
1:32
07. children
3:13
08. Parent
1:29
09. closest
1:02
10. within
4:34
11. sibling
1:51
12 alias
1:31
13. exist vs visible
3:11
14. automatic waiting and http requests
1:57
15. find
1:28
16. invoke
4:08
17. Esempio con Dialog e DropDown (React & AntDesign)
8:14
18. Utilizzare la doc di Cypress
1:44
06. List
Durata: 10:27
Analizziamo diverse strategie per testare elenchi di dati
01. List, get and find
1:00
02. first, last, eq
1:45
03. wrap + each - test items
4:56
4. Filtered List and User Interactions
2:46
07. Forms
Durata: 29:10
Approndimento sui form e simulare le azioni dell'utente
01. Mouse Events
3:07
02. Keyboard Events
2:53
03. focus, blur e classi dinamiche
3:52
04. Selezioni e popolamento di input, checkbox, Date, Select
5:11
05. Multiple Checkbox
0:44
06. Form Validations
7:22
07. Multiple Subscribes
6:01
08. Interceptors
Durata: 21:26
Impara a 'mockare' le chiamate del backend, gestire gli errori e simulare diversi scenari
01. Cypress HTTP Interceptor
5:44
02. Mock Response
4:26
03. CRUD, Mock e Stub
6:45
04. Interceptor Error
4:31
09. Commands & Page Object
Durata: 15:56
Organizza il tuo codice tramite 'custom Command' e 'Page Object'
01. Commands - pt1 - Simple Login
3:29
02. Commands - pt2 - Creare routine riutilizzabili
3:44
03. Commands - pt3 - Supportare TypeScript
1:24
04. Organizzare i test con Page Object
7:19
10. Real World Test: testare un CMS
Durata: 48:04
In questi video mettiamo in pratica molti dei concetti descritti nei capitoli precedenti testando un vero CMS: PocketBase.
01. Installazione e configurazione PocketBase CMS
4:47
02. Installazione Cypress
0:56
03. Configurare TypeScript
0:48
04. Login Test
3:26
05. baseUrl
1:14
06. Login - Intercept e Gestione Errori
2:56
07. Login - Page Object
2:45
08. Login & Collections
2:38
09. Collections - Creazione e Cancellazione
12:24
10. Migliorare i selettori
6:06
11. Selezioni dinamiche con 'invoke'
2:11
12. Refactoring - Migrare a Page Object
7:53
11. Cypress Tips & Tools
Durata: 12:36
01. Impostare il baseUrl
0:56
02. ViewPort
0:57
03. Screenshot
1:29
04. Generare Video e processare i test da CLI
0:46
05. Cypress env variables
1:04
06. Creare Environment Files con 'Vite' e 'dotenv'
1:16
07. Rallentare i test
0:52
08. Image Placeholders with intercept
1:24
09. Cypress Studio (experimental)
3:52
12. Component Testing in Angular, React, Vue
Durata: 01:13:42
Impara a testare componenti in un ambiente isolato. Non solo scriveremo i componenti step by step con diversi framework / librerie front-end ma vedremo come simulare il passaggio di proprietà, la gestione di slot, l'emissione di eventi, utilizzeremo Spie e diversi trick interessanti.
React - pt.1: Creazione progetto con Vite e supporto TypeScript
3:27
React - pt.2 - Creare il componente Panel
7:25
React - pt.3 - Testare il componente Panel
6:54
React - pt.4 - Includere Tailwind in tutti i test
0:43
Angular v.16 - pt.1: Creazione progetto con l'opzione Standalone
3:31
Angular v.16 - pt.2: Creare il componente Panel (Standalone)
7:15
Angular v.16 - pt.3: Testare il componente Panel
10:51
Vue v.3 - pt.1: Creare progetto con Vite e supporto TypeScript
3:43
Vue v.3 - pt.2: Creare il componente Panel
8:40
Vue v.3 - pt.3: Testare il componente
16:53
Vue v.3 - pt.4 - Problemi con TypeScript
2:20
Vue v.3 - pt.5 - Problem Fixed
2:00
13. EXTRA
Aggiornamenti, articoli e nuovi video
Scrivere test E2E con Cypress per qualunque applicazione o sito web (anche di terze parti)
2:50
Angular (v.16) Material - Testare il Drag'n'Drop di una lista (Articolo e Source Code)
Acquista il corso
Accedi al materiale dove e quando vuoi... per sempre!
5 studenti
€
129
+ iva
/utente
-
Prezzo promozionale per team di almeno 5 persone
-
Report / Progress per singolo utente
-
Promozione applicabile solo a società e team. Non gruppi di acquisto
IN OFFERTA
Singolo Utente
€
169
+ iva
invece di € 300
-
Accesso life-time
(senza scadenza) -
100+ video tutorial
-
6 ore di lezione
-
15 gg soddisfatto o rimborsato
-
Codice Sorgente
Hai bisogno della fattura?
Devi inserire i dati in fase di acquisto cliccando il checkbox "Add a business tax ID" o non sarà più possibile richiederla
10 studenti
€
99
+ iva
/utente
-
Prezzo promozionale per team di 10 persone
-
Report / Progress per singolo utente
-
Promozione applicabile solo a società e team. Non gruppi di acquisto
FAQ
Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?
Ho qualche dubbio che il corso faccia al caso mio. Posso contattarti?
Certo, puoi scrivermi tramite il Form di Contatto
È possibile fruire il corso simultaneamente su device?
È possibile fruire il corso simultaneamente su device?
Gli accessi simultanei alla piattaforma da diversi IP verranno bloccati.
Nel caso fossi interessato all’acquisto di più di una licenza d’uso sono previsti degli sconti.
Contattami per ulteriori info.
Contattami per ulteriori info.
È previsto un rimborso nel caso non fossi soddisfatto?
È previsto un rimborso nel caso non fossi soddisfatto?
Sono sicuro che apprezzerai i contenuti del corso ma se non fossi soddisfatto potrai comunque essere rimborsato totalmente entro 15 giorni dall'acquisto
Posso ricevere la fattura?
Posso ricevere la fattura?
In fase di acquisto, è necessario inserire la partita iva (utilizzando IT come prefisso, ad es. IT1234567890) cliccando sul pulsante "+ ADD BUSINESS DETAILS" e inserire i dati per la fatturazione.
Teachable, la piattaforma americana utilizzata per erogare i corsi, si occupa di tutto il processo di pagamento e di mettere le ricevute di acquisto.
Essendo un sistema di pagamento extra EU, nel caso di acquisto con partita iva, l'iva non sarà applicata e quindi sarà tolto il 22% dal totale.
Prima di effettuare l'ordine guarda un esempio di fattura che riceverai.
L'iva viene applicata? La fattura è inviata da un'azienda americana
L'iva viene applicata? La fattura è inviata da un'azienda americana
Il mio corso è fruibile tramite la piattaforma Teachable, azienda con sede negli Stati Uniti. Per questo motivo: se richiedi la fattura e inserisci la partita iva in fase di acquisto NON verrà applicata l'iva. Al contrario, il costo per i privati sarà comprensivo di IVA
La possibilità di visionare il corso è limitata nel tempo?
La possibilità di visionare il corso è limitata nel tempo?
No! La licenza d’uso non ha nessuna scadenza. Una volta acquistato il corso potrai fruire dei contenuti del corso ed eventuali aggiornamenti senza limiti di tempo.
Dubbi e Domande?
Dubbi e Domande?
Scrivimi in privato su LinkedIn o utilizza l'apposito form di contatto
Dove posso seguirti per ulteriori aggiornamenti?
Dove posso seguirti per ulteriori aggiornamenti?
Sono presente su tutti i principali social network. Trovi i link nel footer.
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter
Per tutti gli aggiornamenti puoi seguirmi su Telegram e non dimenticare di iscriverti alla newsletter
☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?
☠️ PIRATERIA : hai visto il mio corso replicato su qualche piattaforma oppure la tua azienda condivide l'account tra più studenti?
Per favore inviami una segnalazione compilando il Form di contatto
Keep updated about latest content
videos, articles, tips and news
BETA
2023 Fabio Biondi | P.I. 01116230317