Cypress Cheatsheet
Traduzione:
__HTML_TAG_73_
Cypress - Test finale Made Easy_HTML_TAG_75__
Cypress è uno strumento di test frontale di nuova generazione costruito per il web moderno. Si rivolge agli sviluppatori di punti di dolore chiave e agli ingegneri QA affrontati durante la sperimentazione di applicazioni moderne. Cypress consente di scrivere tutti i tipi di test: Test finali, Test di integrazione, Test dell'unità.
Traduzione:
__HTML_TAG_78_
__HTML_TAG_79_
📋 Copia tutti i comandi_HTML_TAG_81__
📄 Genera PDF_HTML_TAG_83__
__HTML_TAG_84_
__HTML_TAG_85_
## Tavola dei contenuti
- [Installazione](#installazione)
[Getting Started](#getting-started)
- [Comandi Basici](#basic-commands)
- [Selettori]
- [Asserzioni]
- [Network Testing](#network-testing)
- [File Operations](#file-operazioni)
- [Custom Commands](#custom-commands)
- [Configurazione](#configurazione)
- [Obiettivi di pagina]
[API Testing](#api-testing)
- [Visual Testing](#visual-testing)
- [Integrazione CI/CD](#cicd-integrazione)
[Le migliori pratiche](#best-practices)
- [Debugging]
- [Performance](#performance)
- [Troubleshooting](#troubleshooting)
## Installazione
### Installazione di base
Traduzione:
### Progetto Setup
Traduzione:
### Struttura pieghevole
Traduzione:
### Package.json Scripts
Traduzione:
#
### First Test
Traduzione:
# Struttura di prova di base
Traduzione:
# Ganci di prova
Traduzione:
# Comandi di base
### Navigazione
Traduzione:
### Interazione degli elementi
Traduzione:
### Element Ques
Traduzione:
# Traversal #
Traduzione:
### Waiting
Traduzione:
## Selectors
### Selettori CSS
#
# Attributi dati (consigliato)
Traduzione:
### XPath (con plugin)
Traduzione:
// cypress/support/e2e.js
require ( 'cypress-xpath' )
// Usage in tests
cy . xpath ( '//button[contains(text(), "Submit")]' )
cy . xpath ( '//input[@placeholder="Username"]' )
cy . xpath ( '//div[@class="container"]//button[1]' )
### Selettori complessi
Traduzione:
# Asserzioni #
#### Should Asserzioni
Traduzione:
## Aspettatevi le tesi #
Traduzione:
### URL Asserzioni
Traduzione:
### Asserzioni personalizzate
Traduzione:
## Network Testing
### Intercepting Requests
Traduzione:
### Richiedi Asserzioni
Traduzione:
### Condizioni di rete
Traduzione:
### Intercetti multipli
Traduzione:
## Operazioni di file
### Caricamento file
Traduzione:
### Scarica file
Traduzione:
### Lavorare con i dispositivi
Traduzione:
### Reading/Writing Files
Traduzione:
## Comandi personalizzati
# Comandi personalizzati di base
Traduzione:
## Comandi personalizzati avanzati
Traduzione:
### Overwriting Commands
Traduzione:
###
Traduzione:
## Configurazione
## Configurazione Cypress
Traduzione:
### Variabili ambientali
#
### Multiple Environments
Traduzione:
### Configurazione del browser
Traduzione:
## Page Objects
# Pagina di base
Traduzione:
#### Utilizzare oggetti di pagina
Traduzione:
### Advanced Page Object
Traduzione:
### Page Object with API Integration
Traduzione:
## API Testing
### Test API di base
Traduzione:
### API Tests with Authentication
Traduzione:
### API Test Helpers
Traduzione:
### Validazione schema
Traduzione:
## Testing visivo
### Screenshot Testing
Traduzione:
### Regressione visiva con Percy
Traduzione:
// cypress/support/e2e.js
import '@percy/cypress'
// Usage in tests
describe ( 'Visual Regression Tests' , () => {
it ( 'should match visual snapshot' , () => {
cy . visit ( '/' )
cy . percySnapshot ( 'Homepage' )
})
it ( 'should match responsive snapshots' , () => {
cy . visit ( '/dashboard' )
cy . percySnapshot ( 'Dashboard - Desktop' , {
widths : [ 1280 ]
})
cy . percySnapshot ( 'Dashboard - Mobile' , {
widths : [ 375 ]
})
})
})
## Comandi visivi personalizzati
Traduzione:
### Responsive Testing
Traduzione:
## Integrazione CI/CD
## GitHub Azioni
Traduzione:
### Docker Integration
Traduzione:
# docker-compose.yml
version : '3.8'
services :
app :
build : .
ports :
- "3000:3000"
environment :
- NODE_ENV=test
cypress :
build :
context : .
dockerfile : Dockerfile.cypress
depends_on :
- app
environment :
- CYPRESS_baseUrl=http://app:3000
volumes :
- ./cypress/videos:/app/cypress/videos
- ./cypress/screenshots:/app/cypress/screenshots
### Testing parallelo
Traduzione:
# Test Reporting
__________
// cypress.config.js
module . exports = defineConfig ({
e2e : {
reporter : 'mochawesome' ,
reporterOptions : {
reportDir : 'cypress/reports' ,
overwrite : false ,
html : false ,
json : true
}
}
})
{
"scripts" : {
"test:report" : "cypress run && npm run merge:reports && npm run generate:report" ,
"merge:reports" : "mochawesome-merge cypress/reports/*.json > cypress/reports/merged-report.json" ,
"generate:report" : "marge cypress/reports/merged-report.json --reportDir cypress/reports --inline"
}
}
# Migliori Pratiche
### Test Organization
Traduzione:
### Selector Best Practices
Traduzione:
## Attendere le migliori pratiche
Traduzione:
# Gestione dei dati di prova
Traduzione:
### Gestione degli errori
Traduzione:
# Debug #
## Debug Commands
Traduzione:
### Browser DevTools
Traduzione:
## Comandi di debito personalizzati
Traduzione:
## Test Strategie di debug
Traduzione:
## Performance
# Performance di prova
Traduzione:
### Esecuzione parallela
Traduzione:
### Ottimizzazione della memoria
Traduzione:
## Risoluzione dei problemi
### Questioni comuni
Traduzione:
## Debug Configuration
Traduzione:
### Error Recovery
Traduzione:
---
## Sommario
Cypress è un potente framework di test end-to-end che fornisce:
- **Developer Experience**: API intuitiva con anteprima del browser in tempo reale
- **Automatic Waiting**: Smart in attesa di elementi e richieste di rete
- **Time Travel**: Debug test con istantanee ad ogni passo
- **Network Control**: Intercetta e modifica le richieste di rete
- **Real Browser Testing**: I test vengono eseguiti in veri browser per risultati accurati
- **Rich Ecosystem**: Ampio ecosistema plugin e integrazioni
- Pronto? Supporto integrato per l'integrazione continua
- **Visual Testing**: capacità di prova di scherma e regressione visiva
Cypress eccelle nella sperimentazione di applicazioni web moderne con il suo focus sull'esperienza dello sviluppatore, strumenti di debug completi e l'esecuzione di test affidabile. La sua architettura unica e il suo set di caratteristiche lo rendono una scelta eccellente per i team che cercano di implementare robusti flussi di lavoro di test end-to-end.