Enregistrez automatiquement une démo d'application web avec l'IA

Vous pouvez désormais enregistrer automatiquement une démo d'application web en décrivant ce qu'il faut montrer à un agent IA, qui naviguera dans votre produit via un navigateur cloud tout en l'enregistrant. La qualité du résultat dépend de ce que vous avez configuré au préalable : le compte utilisé, les données à l'écran et les instructions fournies. Ce guide couvre chaque étape, la marche à suivre si l'agent est bloqué, et quand privilégier un script Playwright ou Puppeteer.

Comment fonctionne l'enregistrement automatique de site web#

Dans Clevera, l'enregistreur IA prend 2 entrées : une page de démarrage et une instruction écrite décrivant ce qu'il faut montrer. Un agent IA ouvre la page dans un navigateur cloud, effectue les étapes et enregistre la session. Vous pouvez observer le processus, reprendre la main sur le navigateur à tout moment et rendre le contrôle une fois terminé.

Par défaut, l'agent est en lecture seule. Il peut naviguer, ouvrir des menus et lire les écrans, mais il ne créera ni ne modifiera rien sans votre autorisation. L'enregistrement final est ajouté à votre bibliothèque comme n'importe quel autre, et vous pouvez le transformer en tutoriel narré, en démo produit ou en article.

Étape 1 : Préparez un compte et des données de démonstration#

Tout ce que l'agent voit finit dans la vidéo. Configurez le compte avant de rédiger la moindre instruction.

• Utilisez un compte de démonstration dédié. Ne dirigez jamais l'agent vers un compte administrateur en production. Un espace de travail de démo avec ses propres identifiants évite d'exposer des données clients réelles et limite les risques en cas d'erreur.
• Utilisez des données réalistes. Un tableau de bord vide ne fait pas une bonne démo. Ajoutez 10 à 20 enregistrements avec des noms, montants et dates crédibles, afin que les tableaux, graphiques et résultats de recherche reflètent une utilisation réelle du produit. Évitez "Test 1", "asdf" et les noms de vrais clients.
• Définissez l'état initial du flux. Si la démo montre comment "créer votre premier projet", assurez-vous qu'aucun projet n'existe encore. Si elle montre la modification d'une facture, assurez-vous que la facture est présente et possède un nom clair que l'instruction peut cibler.
• Supprimez les interruptions ponctuelles. Fermez les visites guidées, les fenêtres modales de nouveautés et les bannières d'essai dans ce compte au préalable. Tout ce qui s'affiche une fois par utilisateur apparaîtra dans votre enregistrement.
• Vérifiez que l'application est accessible depuis Internet. L'agent s'exécute dans un navigateur cloud, il ne peut donc pas ouvrir localhost, un serveur de staging derrière votre VPN ou tout élément restreint par IP à votre bureau. Utilisez un environnement de démo public ou un bac à sable.

Étape 2 : Rédigez une instruction que l'agent peut suivre#

La plupart des mauvais enregistrements IA proviennent d'instructions vagues. L'agent fait ce que vous avez écrit, dans l'ordre indiqué, et comble les lacunes par des suppositions. De bonnes instructions ressemblent à un court script de test écrit pour une personne qui n'a jamais vu votre produit.

Suivez 4 règles :

1. Nommez les écrans. Utilisez les libellés qui apparaissent dans l'interface : "Ouvrez la facturation depuis la barre latérale gauche", et non "allez dans la section argent". 2. Donnez l'ordre. Numérotez les étapes. Si l'ordre est important pour le scénario (configurer, puis utiliser, puis voir le résultat), précisez-le. 3. Ciblez des éléments précis. Nommez le bouton, l'onglet, le champ ou l'enregistrement : "Cliquez sur la facture INV-1042", "Ouvrez le menu déroulant Filtres et choisissez En retard". 4. Dites où s'arrêter. Terminez sur l'écran de résultat que le spectateur doit retenir et demandez à l'agent d'y rester un moment.

Voici la différence en pratique.

Mauvaise instruction :

> Montrez comment fonctionne notre facturation.

L'agent doit décider quels écrans sont importants, quel enregistrement ouvrir et quand il a terminé. Vous obtiendrez une visite de ce qu'il trouve en premier.

Meilleure, mais encore trop vague :

> Montrez comment créer une facture et l'envoyer à un client.

Objectif clair, mais pas de point de départ, pas de client, pas d'articles. Avec un agent en lecture seule, cela ne peut pas fonctionner, car créer une facture est une action d'écriture.

Bonne instruction :

> Commencez sur le tableau de bord. 1) Cliquez sur Factures dans la barre latérale gauche. 2) Cliquez sur le bouton Nouvelle facture en haut à droite. 3) Dans Client, choisissez "Northwind Studio". 4) Ajoutez un article : "Forfait design", quantité 1, prix 2 400. 5) Cliquez sur Enregistrer le brouillon. 6) Ouvrez le brouillon et cliquez sur Aperçu, puis arrêtez-vous sur l'écran d'aperçu pendant 3 secondes. Ne cliquez pas sur Envoyer.

Ceci nomme chaque écran et élément, utilise le client exact de vos données de test et trace une ligne claire sur l'action à ne pas effectuer. Cela vous indique également, avant de commencer, que cette exécution nécessite des autorisations de création (voir Étape 4).

Quelques habitudes supplémentaires aident :

• Un flux par enregistrement. "Créer une facture, puis configurer un calendrier récurrent, puis exporter un rapport" représente 3 vidéos. Les exécutions plus courtes sont plus faciles à corriger et à réutiliser.
• Épelez les valeurs à saisir. Si l'agent doit inventer du texte, il pourrait écrire quelque chose d'étrange à l'écran.
• Mentionnez les particularités connues. "Le bouton Enregistrer est désactivé tant que le champ prix ne perd pas le focus" évite à l'agent quelques clics confus.

Étape 3 : Choisissez une option de connexion#

La plupart des démos d'applications web nécessitent une connexion. Vous avez 3 options :

Le compte de démonstration de l'étape 1 est utile ici. Un mot de passe dédié à la démo avec accès à des données de test est le choix le moins risqué lorsque vous fournissez un identifiant. Si votre entreprise utilise le SSO avec 2FA, saisir vous-même les informations est généralement plus rapide que d'essayer de le faire faire par l'agent.

Étape 4 : Décidez entre lecture seule ou création/modification#

La lecture seule est le mode par défaut, et elle couvre plus de démos que vous ne le pensez (les risques liés à l'autorisation d'écriture pour un agent sont détaillés dans Sécurité de l'agent d'enregistrement d'écran IA) : naviguer, filtrer, rechercher, ouvrir des enregistrements, changer d'onglet et afficher des rapports.

Autorisez la création ou la modification uniquement lorsque le flux en a réellement besoin (créer un enregistrement, modifier un paramètre, soumettre un formulaire) et uniquement sur un compte de démonstration. Ensuite, faites 2 choses :

• Intégrez le point d'arrêt dans l'instruction, comme dans "Ne cliquez pas sur Envoyer" ci-dessus. Les actions qui envoient des e-mails, débitent des cartes ou publient vers des intégrations doivent être exclues de l'exécution ou déconnectées dans l'espace de travail de démo.
• Réinitialisez les données de démonstration après coup, afin que la prochaine exécution commence à partir du même état.

Étape 5 : Reprenez la main quand l'agent est bloqué#

Certains écrans piègent n'importe quel navigateur automatisé. Prévoyez de les gérer plutôt que de relancer tout le flux :

• Bannières de cookies et pop-ups de consentement. Reprenez la main, acceptez ou fermez, puis rendez la main.
• Sélecteurs de date personnalisés et glisser-déposer. Les widgets inhabituels sont là où les agents perdent le plus de temps. Choisissez la date vous-même et rendez le contrôle.
• Captchas. Ils existent pour stopper l'automatisation. Résolvez-les vous-même.
• Codes 2FA. Saisissez le code reçu sur votre téléphone, puis rendez la main.

Lorsque vous rendez la main, l'agent reprend là où vous l'avez laissé. Si le transfert est visible dans l'enregistrement, coupez-le dans l'éditeur.

Étape 6 : Gardez des exécutions courtes pour limiter les crédits#

L'enregistreur IA utilise des crédits en fonction du temps de travail de l'IA, quel que soit le forfait. Cela fait de l'instruction un levier de coût. Une instruction précise sur un compte préparé se termine rapidement. Une instruction vague sur un compte rempli de pop-ups gaspille du temps à explorer, réessayer et attendre. Les montants de crédits des forfaits sont sur la page de tarification.

Ce que devient l'enregistrement#

L'enregistrement brut est l'entrée, pas le livrable. À partir du même enregistrement IA, vous pouvez générer :

• Une vidéo explicative. Clevera couvre chaque action requise dans l'ordre, rédige le script et ajoute une voix off générée par IA, pour éviter toute narration en direct. C'est le format idéal pour les centres d'aide et l'onboarding. Découvrez comment cela fonctionne dans le créateur de tutoriels IA.
• Une démo produit. L'IA est sélective ici : elle peut ignorer les séquences à faible valeur ajoutée, réorganiser les clips et narrer les résultats plutôt que chaque clic. C'est le format pour les pages de vente et de lancement. Notre générateur de démos produit couvre les formats de démo.
• Un article. Un guide écrit avec des captures d'écran automatiquement sélectionnées et légendées, pour la documentation et le SEO.

Chacun est un élément de contenu distinct, et les vidéos ainsi que les articles sont traduits en 74 langues. Lorsque l'interface utilisateur change, les modifications apportées à la narration et au texte sont mises à jour sur les liens hébergés et les intégrations, mais les images elles-mêmes ne changent pas. Relancez la même instruction pour obtenir de nouvelles images ; comment mettre à jour les vidéos de tutoriel après un changement d'interface explique quand réenregistrer et quand une simple modification suffit.

Si vous n'êtes pas sûr du format dont votre audience a besoin, notre comparaison entre démos interactives et vidéos produit et le guide sur comment créer une vidéo de tutoriel couvrent les compromis.

Notre premier essai : 1 instruction, 78 secondes, 9 crédits#

En octobre 2026, nous avons lancé l'enregistreur IA sur TodoMVC, une application de démonstration publique, avec cette instruction :

> Ajoutez trois tâches : 'Rédiger l'article de lancement', 'Enregistrer la démo', 'Envoyer la newsletter'. Marquez 'Enregistrer la démo' comme terminée. Cliquez ensuite sur le filtre Actif pour n'afficher que les tâches en cours.

La connexion était définie sur Aucun. Nous avons activé les modifications, car ajouter et terminer des tâches sont des actions d'écriture, et nous ne l'avons fait que parce qu'il s'agit d'une application de démonstration publique sans données réelles derrière. Sur votre propre produit, suivez plutôt l'étape 4.

L'agent a fait exactement ce que nous avons écrit, dans l'ordre, sans tentatives infructueuses ni mauvais clics visibles, et nous n'avons pas eu besoin d'intervenir. L'exécution a pris environ 78 secondes de temps réel et a laissé 58 secondes d'images pour une tâche qu'une personne effectue en environ 20 secondes, car l'agent marque des pauses entre les étapes. Clevera l'a réduit à une vidéo explicative de 0:40 avec 2 chapitres, 6 étapes et des zooms automatiques à 1,5x et 1,8x, en environ 50 secondes. Crédits : 5 pour l'analyse de l'enregistrement et 4 pour la vidéo explicative, soit 9 au total.

La vidéo explicative de 0:40 que Clevera a réalisée à partir de cet enregistrement IA, non modifiée.

À surveiller : les images sont apparues délavées et peu contrastées, vérifiez-les donc avant de publier. De plus, notre instruction n'était pas numérotée. Cela a fonctionné sur un flux en 3 étapes car il précisait chaque valeur à saisir et le filtre exact à cliquer. Pour des flux plus longs, numérotez les étapes.

L'alternative scriptée : Playwright et Puppeteer#

Les équipes d'ingénierie enregistrent les navigateurs avec des scripts d'automatisation depuis des années, et pour certaines tâches, un script est le meilleur outil.

Playwright enregistre la vidéo nativement. Dans Playwright Test, vous définissez l'option video sur 'on', 'retain-on-failure' ou 'on-first-retry' ; avec la bibliothèque, vous passez recordVideo à browser.newContext() avec un dir et un size optionnel. 2 détails piègent souvent les utilisateurs. Les vidéos ne sont enregistrées que lorsque le contexte du navigateur se ferme, vous devez donc await context.close(). De plus, la vidéo est par défaut mise à l'échelle pour s'adapter à 800x800, alors définissez vous-même la fenêtre d'affichage et size si vous voulez une prise nette en 1080p. Vous n'avez pas non plus à écrire les sélecteurs à la main : npx playwright codegen génère le script au fur et à mesure que vous cliquez dans l'application.

Puppeteer possède page.screencast(), qui enregistre en WebM à 30 FPS par défaut et nécessite ffmpeg sur la machine. Depuis Puppeteer 25.13, la documentation le marque comme obsolète au profit de page.record(), qui produit du MP4.

Un script est le meilleur choix lorsque :

• Vous voulez que le même flux soit enregistré à chaque version, déclenché depuis la CI sans surveillance.
• L'enregistrement sert également de test, et vous vous souciez autant des échecs que des images.
• Votre application se trouve là où un navigateur cloud ne peut pas accéder, comme un réseau de staging privé accessible par votre runner CI.
• Vous avez des ingénieurs qui maintiennent déjà des tests de bout en bout et les sélecteurs sont stables.

L'agent est le meilleur choix lorsque :

• La personne qui a besoin de la vidéo travaille dans le marketing produit, la vente ou le support et ne code pas.
• Le flux est ponctuel ou change souvent : une démo spécifique à un prospect, une nouvelle fonctionnalité, un article d'aide.
• Vous avez besoin d'une vidéo terminée et narrée, pas d'images brutes. Un script vous donne une capture d'écran silencieuse ; la narration, les zooms et le montage restent à votre charge.

Les 2 approches se combinent bien. Clevera accepte les vidéos téléchargées, y compris les enregistrements silencieux, afin qu'une équipe puisse enregistrer un flux avec Playwright en CI et télécharger le fichier pour générer la vidéo explicative ou la démo narrée.

Limites à connaître avant de commencer#

• Web uniquement. L'enregistreur IA enregistre les sites web et les applications web dans un navigateur cloud. Il n'enregistre pas les logiciels de bureau ou les applications mobiles natives. Pour les flux de bureau, utilisez l'application de bureau Clevera (macOS ou Windows) ; pour les flux web que vous préférez cliquer vous-même, utilisez l'extension Chrome.
• Applications accessibles uniquement. Pas de localhost, de staging accessible uniquement par VPN ou d'outils avec liste blanche IP.

Commencez par un flux que votre équipe de support explique chaque semaine, sur un compte de démonstration, avec une instruction numérotée qui nomme chaque bouton. Regardez le premier essai, notez où vous avez dû intervenir, et intégrez ces notes dans l'instruction pour le suivant.