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.