Penpot

Défi

Penpot a fait appel à QAwerk pour s’assurer de pouvoir lancer son produit auprès du grand public dans les délais impartis. L’entreprise souhaitait que son équipe interne se concentre pleinement sur le développement de fonctionnalités à valeur ajoutée et l’amélioration du produit, plutôt que sur la correction des bugs et leur détection.

Voici un bref aperçu des éléments que nous devions livrer :

• Élaboration d’une stratégie et d’un plan de test. Avant de collaborer avec QAwerk, l’équipe Penpot signalait les bugs grâce à ses membres internes et à sa large communauté d’utilisateurs de la version bêta. Face à la popularité croissante de Penpot et à sa volonté de sortir de la phase bêta, cette approche n’était plus viable. C’est pourquoi nous avons été chargés de planifier l’ensemble des tests et de mettre en place des processus d’assurance qualité adaptés, afin de garantir des tests professionnels continus.
• Passer de la version bêta à la version officielle. Pour Penpot, il était primordial d’éliminer les bugs et d’améliorer les performances avant de commercialiser le produit auprès du grand public. Notre mission consistait à examiner méthodiquement toutes les fonctionnalités existantes et à identifier un maximum de problèmes afin de garantir l’absence de bugs critiques dans la version de production et le fonctionnement fluide de l’application, sans ralentissements ni problèmes de sauvegarde des données.
• Amélioration des nouvelles fonctionnalités. La version finale incluait des fonctionnalités phares très attendues, telles que des interfaces flexibles, l’accès au code directement depuis l’espace de travail et des améliorations d’accessibilité. Notre mission consistait à garantir une intégration fluide de ces mises à jour, sans interruption de service, et à susciter un véritable enthousiasme chez les utilisateurs de Penpot.

Par ailleurs, nous souhaitions aider Penpot à obtenir une meilleure couverture et à publier des mises à jour en toute sérénité. Nous leur avons donc proposé d’automatiser leurs tests manuels.

Solution

Lors de nos premiers tests, nous avons rencontré de nombreuses erreurs internes au serveur, qui apparaissaient de manière aléatoire, sans que l’on puisse en identifier la cause. Ces bugs nécessitaient une correction immédiate, car les utilisateurs qui les rencontraient risquaient de perdre leur travail.

Nous enregistrions donc des vidéos pour reproduire précisément ce type de bug, afin d’identifier un schéma commun à ces occurrences et de déterminer quelles actions utilisateur pouvaient déclencher les erreurs, ainsi que les zones de l’application les plus vulnérables. Nous partagions ensuite nos conclusions avec les développeurs de Penpot, qui ont finalement réussi à éradiquer complètement ce problème.

Nos tests ont inclus plusieurs types de tests, tels que :

• Tests fonctionnels. Nous avons vérifié le bon déroulement de l’authentification des utilisateurs. Nous avons testé en profondeur les modules de profil utilisateur, de tableau de bord et d’espace de travail. Nous nous sommes assurés que toutes les modifications apportées à la conception étaient appliquées instantanément, notamment lors de l’édition collaborative.
• Tests de régression. L’équipe Penpot déploie régulièrement de nouvelles fonctionnalités et des mises à jour des fonctionnalités existantes, ce qui nécessite des tests de régression réguliers. Nous combinons tests de régression manuels et automatisés afin d’obtenir une couverture optimale et des résultats cohérents.
• Tests d’interface utilisateur. L’esthétique de l’interface est primordiale pour toute application moderne, et plus particulièrement pour un outil de conception comme Penpot, utilisé par les professionnels de l’UI/UX et du développement produit dans les grandes entreprises. Nous avons vérifié le positionnement et l’alignement des éléments sur chaque interface et nous nous sommes assurés de la cohérence des modèles d’interface dans toute l’application.
• Tests de compatibilité. Nos ingénieurs QA ont testé Penpot sur trois navigateurs majeurs : Firefox, Chrome et Safari. Nous avons testé Penpot sur plusieurs versions de Safari, car certains bugs n’apparaissaient que dans les versions plus anciennes. Nous avons également utilisé trois systèmes d’exploitation différents : Windows, macOS et Linux, afin de garantir que tous les utilisateurs puissent profiter de Penpot quel que soit leur appareil.

ure all users can benefit from Penpot regardless of their devices.

En ce qui concerne l’automatisation des tests, nous nous sommes principalement concentrés sur les cas de tests de régression.

Automatisation des tests

L’automatisation des tests a été réalisée à l’aide du framework Playwright. Conçu pour simplifier l’automatisation multiplateforme et multi-navigateurs, Playwright répond parfaitement à nos besoins.

Lors de la sélection des cas de test à automatiser, nous avons suivi deux règles : les cas de test doivent avoir un impact important et leur préparation ne doit pas être trop chronophage. De cette façon, on obtient un retour sur investissement positif.

Par exemple, nous n’avons pas automatisé les cas d’inscription ou de réinitialisation de mot de passe, car cela implique l’utilisation d’API tierces comme Gmail, et l’automatisation de ce processus ne justifie pas les efforts déployés. De même, nous n’avons pas automatisé les cas de glisser-déposer ou de copier-coller, car Playwright ne les gère pas toujours correctement et les tests peuvent s’avérer instables.

Nous avons automatisé des cas de test tels que la connexion, la création et la suppression de fichiers, l’ouverture et le renommage de fichiers, la création et la suppression de tableaux, l’ajout d’un flou aux tableaux, la modification de la couleur d’arrière-plan, et bien d’autres. Ils sont disponibles dans le dépôt public de Penpot.

Nous avons également utilisé les comparaisons visuelles de Playwright pour les tests d’instantanés. Afin de minimiser le nombre de tests échoués suite à des modifications de l’interface utilisateur, nous avons utilisé des captures d’écran ne montrant qu’un seul élément ou une seule section, comme une forme créée. Ainsi, l’ajout de nouvelles sections au panneau de conception n’affectait pas la stabilité des tests.

Environ 10 % de nos tests nécessitent la capture de l’écran entier, par exemple pour vérifier non seulement les calques mais aussi la barre d’outils. Dans ce cas, nous utilisons le masquage pour ignorer les éléments à contenu dynamique, comme les horodatages ou les noms d’utilisateur. Bien qu’il soit impossible d’éliminer complètement les faux positifs, la mise à jour de ces tests est simple et rapide.