Adoptez les bonnes pratiques

Dans ce chapitre, vous allez apprendre à structurer vos tests Cypress en suivant les standards de l'industrie : création de sélecteurs dédiés, tests de sécurité basiques, gestion du cycle de vie avec les hooks, et isolation des comportements grâce aux spies et stubs.

Comprenez votre environnement de test

Pour ce cours, vous travaillez uniquement avec le dépôt Tech-Buy-Light. Celui-ci fonctionne de manière autonome et contient déjà les données nécessaires pour exécuter l’application et réaliser vos tests avec Cypress.

Pour installer et lancer correctement le projet, suivez les instructions indiquées dans le fichier README du dépôt Tech-Buy-Light. Vous disposerez ainsi de l’environnement nécessaire pour modifier l’application et tester vos changements au fil du cours.

Ajoutez les attributs data-cy

Cypress préconise l'utilisation de l'attribut data-* (notamment data-cy) comme sélecteur privilégié pour garantir que vos tests ne rompent pas lors de changements de styles CSS ou de structure HTML.

Étapes de mise en œuvre :

1. Ouvrez le fichiercontact.component.htmldans votre projetTech-Buy-Light.

2. Dans VSCode, utilisez la fonction Find in Files (Ctrl+Shift+Fou Edit > Find in Files) et recherchezcontact-page.

3. Ouvrez le fichiercontact.component.htmlet ajoutez les attributsdata-cysur les éléments du formulaire et de la page :

<div id="contact-page" data-cy="contact-page">
<section id="contact-form" [formgroup]="form" data-cy="contact-form">
<h2 data-cy="title-contact-us">Contactez-nous</h2>
<form>
<p>
<label for="name">Nom</label>
<input type="text" name="name" id="name" formcontrolname="name" data-cy="name">
</p>
<p>
<label for="email">Adresse e-mail</label>
<input type="email" name="email" id="email" formcontrolname="email" data-cy="email">
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" formcontrolname="message" data-cy="message"></textarea>
</p>
<button (click)="send()" data-cy="sendButton">Envoyer</button>
<p class="success" *ngif="success" data-cy="successMessage">Message envoyé avec succès.</p>
</form>
</section>
<section id="contact-place" data-cy="contact-place">
<h2 data-cy="title-where-find-us">Où nous trouver</h2>
<div class="contact-address">
<p data-cy="address">4 Rue de la République<br>30900 Nîmes<br>France</p>
<button (click)="openItinerary()" data-cy="itinerary-button">Itinéraire</button>
</div>
</section>
</div>

1. Ouvrezhttp://localhost:4200/#/contactdans votre navigateur et vérifiez via l'inspecteur d'éléments que les attributsdata-cysont bien présents dans le DOM.

2. Reprenez votre fichier de test Cypress (contact.cy.js) et remplacez les anciens sélecteurs génériques par vos nouveaux attributs :

describe('contact page', () => {
it('it navigate to the contact page', () => {
cy.visit('http://localhost:4200/#/contact')
cy.get('[data-cy="name"]').type('name')
cy.get('[data-cy="email"]').type('test@test.fr')
cy.get('[data-cy="message"]').type('Bonjour, votre site est génial !')
cy.get('[data-cy="sendButton"]').click()
cy.get('[data-cy="successMessage"]')
.should('be.visible')
.should('contain', 'Message envoyé avec succès.')
})
})

Vos tests reposent désormais sur des sélecteurs robustes et pérennes.

Testez une faille XSS (Sécurité Frontend)

Cypress peut également servir à vérifier que les formulaires web neutralisent les tentatives d'injection de scripts malveillants (XSS / Cross-Site Scripting).

Pour tester ce scénario, injectons une balise <script> dans le champ message :

it("n'exécute pas de HTML injecté dans le message", () => {
const payload = '<img src="x" onerror="window.__xss = true">'
cy.visit('http://localhost:4200/#/contact')
cy.get('[data-cy="name"]').type('name')
cy.get('[data-cy="email"]').type('test@test.fr')
cy.get('[data-cy="message"]').type(payload, { parseSpecialCharSequences: false })
cy.get('[data-cy="sendButton"]').click()
cy.visit('http://localhost:4200/#/admin/messages')
cy.contains(payload).should('exist') // affiché comme texte brut, donc échappé
cy.get('img[src="x"]').should('not.exist')
cy.window().its('__xss').should('be.undefined')
})

Maîtrisez les hooks Cypress

Les hooks sont des fonctions exécutées automatiquement avant ou après vos cas de test afin d'initialiser, d'isoler ou de nettoyer l'environnement.

Les principaux hooks disponibles :

• before / after: S'exécutent une seule fois avant ou après l'ensemble des tests de la suite.

• beforeEach / afterEach: S'exécutent avant ou après chaque test individuel.

• context: Permet de structurer des groupes de tests partageant un même contexte d'exécution.

context('Cas de test pour une fonctionnalité spécifique', () = {
beforeEach(() = {
// Configuration ou réinitialisation avant chaque test
})
it('Test 1', () = { /* ... */ })
it('Test 2', () = { /* ... */ })
})

Les hooks peuvent être placés au niveau global (cypress/support/e2e.js ou index.js), au niveau d'un bloc describe/context, ou directement dans un test it.

Allez plus loin avec les Spies et les Stubs

Afin d'isoler vos composants et de simuler des comportements réseau sans dépendre d'un serveur externe :

• Spy (cy.spy()) : Permet d'observer les appels faits à une fonction (arguments, nombre d'exécutions, valeurs de retour) sans en altérer l'exécution réelle.

cy.spy(object, 'method')

• Stub (cy.stub()) : Remplace une fonction ou une requête réseau par une réponse simulée (par exemple pour tester une erreur 500 du serveur).

cy.stub(object, 'method')

À vous de jouer !

Exercice pratique : Rédigez un cas de test vérifiant que le formulaire de contact empêche l'envoi lorsque les champs sont laissés vides.

En résumé

• Ajoutez systématiquement des attributsdata-cypour vos sélecteurs E2E.

• Assurez-vous que Cypress pointe vers l'environnement qui héberge votre code modifié.

• Préparez l'état de démarrage de vos tests dans les hooksbeforeEachplutôt que dans les hooksafter.

• Utilisez spies et stubs pour contrôler et observer les dépendances de vos tests.

Vous maîtrisez désormais les bonnes pratiques de test sur le frontend ! Dans le chapitre suivant, vous allez apprendre à tester directement les API de votre application.