Architecture Cypress : test runner in-browser

Contrairement à Selenium et Playwright qui pilotent le browser depuis un processus externe (driver), Cypress S'EXÉCUTE À L'INTÉRIEUR du browser, comme une app same-origin. Cette différence architecturale a des conséquences profondes — toutes positives sur certains aspects, toutes négatives sur d'autres. Avantages : (1) zéro latence réseau pour chaque commande (vs ~5-30 ms par roundtrip Selenium), (2) accès direct au window, document, localStorage, fetch — pas de "wrapping" via un protocole WebDriver, (3) retry-ability automatique : chaque commande `cy.get('.btn')` réessaie pendant 4 secondes (timeout configurable) avant d'échouer, ce qui élimine 95 % du flake lié aux animations et au lazy-loading. (4) Le runner Cypress affiche en time-travel chaque étape du test : tu peux survoler une assertion et voir l'état exact du DOM à ce moment-là. Inconvénients : (1) impossible de tester des flux multi-onglets (Cypress ne peut pas switcher de tab), (2) cross-origin support compliqué — depuis v12 il y a `cy.origin()` mais c'est verbeux et lent, (3) pas de mobile natif (iOS Safari réel n'est pas supporté, juste une émulation chromium-mobile), (4) le runner ne peut tester qu'un domaine à la fois par "suite". Cas d'usage idéal : une SPA single-domain avec auth, formulaires, modales, états dynamiques. Pour SallyCards, on l'utilise sur le back-office (Next.js admin) et sur le site marketing salistar.com. PAS pour le mobile (Detox/Maestro/Robot+Appium font mieux) et PAS pour les flux OAuth multi-domaines (Playwright avec `page.context().pages()` est plus simple). L'API Cypress est centrée sur les commandes chainables : `cy.visit('/login').get('[data-cy=email]').type('[email protected]').get('[data-cy=submit]').click().url().should('include', '/dashboard')`. Chaque commande est asynchrone mais l'API fait croire que c'est synchrone — c'est une queue d'opérations qui sont exécutées dans l'ordre par le runtime Cypress. Une fois assimilé, c'est très expressif. Le piège : NE PAS mélanger Cypress avec du async/await classique. Si tu écris `const value = await cy.get(...)`, ça crashe — il faut utiliser `.then(value => ...)` à la place. L'écosystème est mature : cypress-axe (a11y), cypress-image-diff (visual regression), cypress-mailosaur (test emails), Percy/Chromatic (cloud visual). Le Cloud payant ($75/user/month) débloque test parallelization + replay + analytics. Alternative open-source : sorry-cypress (self-hosted, gratuit).