Cypress Cheatsheet

Bases & syntaxe

Installer Cypress

npm install --save-dev cypress
npx cypress open

Installation et lancement de Cypress

Commandes de base

cy.visit('https://example.com')
cy.get('.selector').click()
cy.contains('Submit').click()
cy.type('Username')
cy.submit()

Interactions courantes avec les éléments web

Structures de données

Tableaux (Arrays)

const fruits = ['apple', 'banana', 'cherry']
fruits.push('date')
cy.log(fruits[0]) // apple

Manipulation de tableaux en JavaScript

Objets (Objects)

const user = { name: 'John', age: 30 }
user.age++
cy.log(user.name) // John

Utilisation d'objets pour stocker des données

Fonctions & methodes essentielles

Assertions

cy.get('h1').should('have.text', 'Welcome')
cy.contains('Submit').click().should('be.disabled')

Vérification de la présence et du comportement des éléments

Attente (Wait)

cy.get('.selector').should('exist')
cy.wait(2000) // attente de 2 secondes

Gestion des délais dans les tests asynchrones

Récupération d'éléments

const email = 'john@example.com'
cy.contains(email).click()

Sélection d'un élément par son contenu

Patterns courants

Test de login

it('should login with valid credentials', () => {
  cy.visit('/login')
  cy.get('#username').type('admin')
  cy.get('#password').type('secret')
  cy.contains('Login').click()
})

Structure standard pour un test de connexion

Vérification des données

it('should display the correct data', () => {
  cy.visit('/data')
  cy.get('.item').its('length').should('be.gt', 0)
})

Vérification du nombre d'éléments affichés

Opérations avancées

Tests parallèles

describe('Parallel Tests', () => {
  it('test case 1', () => { /* ... */ })
  it('test case 2', () => { /* ... */ })
})

Exécution de tests en parallèle pour accélérer le processus

Tests E2E

it('should complete an e-commerce purchase', () => {
  cy.visit('/store')
  cy.contains('Add to Cart').click()
  cy.get('.cart').click()
  cy.contains('Proceed to Checkout').click()
  cy.fillForm({ name: 'John Doe', email: 'john@example.com' })
  cy.submit()
})

Test complet d'une interaction utilisateur

Debugging & outils

Utilisation de cy.log

cy.get('.selector').then($el => {
  cy.log($el.text())
})

Affichage des informations dans la console Cypress

Outils de débogage

Cypress.Commands.add('logDebug', (msg) => {
  console.log(msg)
})

it('debugging example', () => {
  cy.logDebug('Starting test')
  // ...
})

Création d'un alias personnalisé pour les logs

Snapshot testing

cy.get('.selector').toMatchSnapshot()

Capture et vérification des états de l'UI