# Tester les e-mails avec Cypress · Facteur

> Attendre un e-mail dans Cypress sans cy.wait : une tâche Node garde la clé d'API hors du navigateur, et le test lit le code reçu dans le flux de commandes habituel.
> https://facteur.eu/fr/tester-les-emails-avec-cypress

/ Cypress

#  Attendre un e-mail sans cy.wait 

 Cypress exécute votre test dans le navigateur, ce qui pose deux problèmes pour lire un e-mail : la clé d'API ne doit pas s'y trouver, et l'appel réseau dépend de l'origine de la page testée. Une tâche Node règle les deux.

 [ Le guide complet sur le portail ](https://developers.facteur.eu/fr/guides/cypress/) [ Voir l'état des paquets ](/fr/integrations) 

 

 La configuration, puis le test

## La clé reste dans Node

La tâche vit dans le processus Cypress, là où la clé peut rester. Le test, lui, ne voit qu'une commande.

 

       cypress.config.js JavaScript 

 

```
<span class="hl-comment">// La clé reste ici, hors du navigateur.</span>
<span class="hl-keyword">import</span> { defineConfig } <span class="hl-keyword">from</span> <span class="hl-value">'cypress'</span>;

<span class="hl-keyword">export</span> <span class="hl-keyword">default</span> <span class="hl-property">defineConfig</span>({
  <span class="hl-property">e2e</span>: {
    <span class="hl-property">setupNodeEvents</span>(on) {
      <span class="hl-property">on</span>(<span class="hl-value">'task'</span>, {
        <span class="hl-keyword">async</span> <span class="hl-property">attendreEmail</span>({ sentTo }) {
          <span class="hl-keyword">const</span> search = <span class="hl-keyword">new</span> <span class="hl-type">URLSearchParams</span>({ <span class="hl-property">inbox</span>: <span class="hl-value">'j3k9x2mq'</span>, sentTo, <span class="hl-property">wait</span>: <span class="hl-value">'30000'</span> });
          <span class="hl-keyword">const</span> response = <span class="hl-keyword">await</span> <span class="hl-property">fetch</span>(<span class="hl-value">'https://api.facteur.eu/v1/messages?'</span> + search, {
            <span class="hl-property">headers</span>: { <span class="hl-property">authorization</span>: <span class="hl-value">'Bearer '</span> + process.<span class="hl-property">env</span>.<span class="hl-property">FACTEUR_API_KEY</span> },
          });
          <span class="hl-keyword">if</span> (!response.<span class="hl-property">ok</span>) <span class="hl-keyword">throw</span> <span class="hl-keyword">new</span> <span class="hl-type">Error</span>(<span class="hl-value">'Facteur a répondu '</span> + response.<span class="hl-property">status</span>);

          <span class="hl-keyword">const</span> { messages } = <span class="hl-keyword">await</span> response.<span class="hl-property">json</span>();
          <span class="hl-keyword">return</span> messages[0] ?? <span class="hl-keyword">null</span>;
        },
      });
    },
  },
});
```

        cypress/e2e/inscription.cy.js JavaScript 

 

```
<span class="hl-comment">// Le numéro de tentative sépare une reprise de l'essai précédent.</span>
<span class="hl-property">it</span>(<span class="hl-value">'le code arrive par e-mail'</span>, () => {
  <span class="hl-keyword">const</span> tag = <span class="hl-value">'inscription-a'</span> + (<span class="hl-type">Cypress</span>.<span class="hl-property">currentRetry</span> ?? 0) + <span class="hl-value">'-'</span> + <span class="hl-type">Date</span>.<span class="hl-property">now</span>();

  cy.<span class="hl-property">visit</span>(<span class="hl-value">'/inscription'</span>);
  cy.<span class="hl-property">get</span>(<span class="hl-value">'[name=email]'</span>).<span class="hl-property">type</span>(tag + <span class="hl-value">'@j3k9x2mq.inbox.facteur.eu'</span>);
  cy.<span class="hl-property">contains</span>(<span class="hl-value">'button'</span>, <span class="hl-value">'Créer mon compte'</span>).<span class="hl-property">click</span>();

  cy.<span class="hl-property">task</span>(<span class="hl-value">'attendreEmail'</span>, { <span class="hl-property">sentTo</span>: tag }, { <span class="hl-property">timeout</span>: 40000 }).<span class="hl-property">should</span>((message) => {
    <span class="hl-property">expect</span>(message, <span class="hl-value">"aucun e-mail n'est arrivé"</span>).<span class="hl-property">to</span>.<span class="hl-property">not</span>.<span class="hl-property">be</span>.<span class="hl-property">null</span>;
    <span class="hl-property">expect</span>(message.<span class="hl-property">otp</span>).<span class="hl-property">to</span>.<span class="hl-property">have</span>.<span class="hl-property">length</span>(6);
  });
});
```

  

  La clé reste côté Node Votre spec est servie à une page : une clé écrite dedans serait une clé dans le JavaScript d'une page. La tâche la garde de l'autre côté. 

 cy.task rend une valeur, donc la chaîne continue Le message revient dans le flux de commandes habituel, et .should() se comporte comme sur un cy.get(). Le timeout de cy.task reste au-dessus du wait envoyé à l'API. 

 Le numéro de tentative est dans l'adresse Sans lui, un test rejoué relit l'e-mail de sa première tentative et passe pour une mauvaise raison, précisément quand quelque chose est déjà instable. 



  

 Pourquoi

## Pourquoi il n'y a pas de cy.wait

 

01

### L'attente se fait chez Facteur

La requête reste ouverte jusqu'à l'arrivée du message, avec un délai maximum que vous fixez. Un cy.wait fixe est soit trop court sur une machine chargée, soit du temps perdu à chaque exécution.

 

02

### Le code est déjà extrait

Le message arrive avec son code à usage unique dans le champ otp.

 

03

### Une inbox suffit pour toute la suite

Chaque test reçoit à sa propre adresse dans la même inbox, sans rien créer. Sur une offre qui n'inclut qu'une inbox, c'est la différence entre une suite qui tourne et une suite qui bute sur un plafond.

 



 

 

 Le plugin Cypress

## Écrit, pas encore publié

cypress-facteur donne une adresse par test et une commande qui attend le message, la clé restant dans Node. Il n'est pas encore publié sur npm. La configuration ci-dessus reste celle qui ne demande rien à installer, en une trentaine de lignes que vous gardez.

 

 [ Voir l'état des paquets ](/fr/integrations) 

 

 

## Écrivez ce test aujourd'hui

Une inbox et une clé en lecture seule suffisent. L'offre gratuite ne demande pas de carte bancaire.

 [ Créer un compte gratuit ](/fr/inscription) [ Comment migrer ](/fr/migrer)
