Comment nous avons livré une capture d'écran sans captures d'écran

Aug 11, 2026, 6:00 PM · Équipe Oiva

La carte Élément sélectionné dans le détail d'une réponse

Certains retours sont plus faciles à montrer qu'à décrire. Activez la sélection d'élément pour une enquête, et un visiteur pourra pointer une partie précise de votre page — un bouton, un titre, un champ de formulaire — plutôt que d'écrire « le bouton bleu en haut ». Dans le détail de la réponse, vous obtenez une image nette et entièrement stylée de cet élément précis, à côté d'une capture de page entière où il est mis en évidence.

Un schéma montrant le frontend, le backend et un service Node avec un moteur de rendu Chrome headless, et comment une page capturée transite à travers eux jusqu'à une capture d'écran dans le stockage d'objets

Pour y parvenir, il fallait rendre des pages qui ne nous appartiennent pas, sur des domaines que nous ne contrôlons pas, à l'intérieur d'un vrai moteur de navigateur — et renvoyer un recadrage correctement stylé d'un élément de ces pages. La première version a tenté l'approche évidente : capturer le balisage propre de l'élément cliqué et ne rendre que ce fragment, isolément. Cela semblait correct dans tous les tests que nous avions écrits, parce que chacun d'eux utilisait un élément stylé en ligne. Dès qu'un bouton d'une vraie page tenait son apparence d'une classe issue d'une feuille de style externe, le recadrage revenait plat et sans style. Un fragment isolé n'a pas d'en-tête de page auquel lier une feuille de style, pas de bloc style, pas de variables CSS sur lesquelles cette classe pourrait s'appuyer — rien n'était cassé, il n'y avait simplement rien là pour que les styles s'appliquent.

La solution a consisté à rendre la page entière plutôt que l'élément seul. Le sélecteur marque déjà l'élément cliqué à l'instant où il est choisi, donc nous rendons toute la page capturée du visiteur en une fois, avec ses vraies feuilles de style et sa vraie mise en page, et nous prenons deux captures de cette même page chargée : la page entière, et un recadrage serré du seul élément marqué. Un seul chargement de page dans le navigateur produit désormais les deux images, ce qui représente aussi moins de travail que les deux rendus séparés qu'exigeait l'ancienne approche.

Rien de tout cela ne change ce que vivent les visiteurs — ils continuent simplement à cliquer sur la partie de la page qu'ils veulent désigner. Ce qui change, c'est ce qui se passe ensuite : une image réelle et correctement stylée de cette partie précise, et non une supposition reconstruite à partir d'une description écrite.