Parce que les yeux ne mentent pas - Tests visuels avec Applitools Eyes

Publié: 2021-08-17

Les tests de régression garantissent que tout changement introduit dans le logiciel ne casse rien qui fonctionnait bien auparavant. Les tests de régression visuelle garantissent qu'aucun problème d'interface graphique n'a surgi en raison des modifications apportées. L'application doit toujours ressembler à ce qu'elle avait avant l'introduction des modifications. Un outil de test de régression visuelle capture des captures d'écran de l'interface utilisateur actuelle et les compare avec les captures d'écran d'origine. Il examine les polarités historiques et confirme que les pages Web s'affichent toujours comme prévu sur différents navigateurs, même après les modifications. Applitools Eyes est l'un des outils de test visuel les plus populaires disponibles sur le marché, alimenté par sa technologie exclusive de vision cognitive.

Applitools a développé un outil de test logiciel basé sur le cloud, Applitools Eyes, qui valide automatiquement tous les aspects visuels de toute application Web, mobile et native. Ces validations sont similaires à celles effectuées par un testeur manuel. La technologie Applitools valide automatiquement l'exactitude de la mise en page, du contenu et de l'apparence de l'interface utilisateur, et vous permet d'automatiser les tests qui ne peuvent être effectués que manuellement sans elle. Il peut tester des applications sur n'importe quel navigateur, appareil, système d'exploitation et langage de programmation, sur n'importe quelle résolution d'écran et facteur de forme.

Un aperçu du système Applitools Eyes

Divers environnements de test interagissent avec les différents composants Eyes d'Applitools pour implémenter des tests d'interface utilisateur visuels. Le système se compose des composants suivants :

L'application sous test (AUT).
Une suite de tests qui s'exécute pour l'AUT et vérifie sa précision.
Les SDK sont appelés dans le code de la suite de tests pour déclencher la capture d'écran et la vérification visuelle.
Des pilotes d'application comme Selenium ou Appium qui fournissent un cadre pour créer des combinaisons de tests qui peuvent être envoyées à l'AUT. Il les utilise également pour capturer des captures d'écran.
Le serveur reçoit et stocke la capture d'écran envoyée par les SDK. Il les compare aux images de référence stockées et signale toute différence.
Eyes Test Manager fournit à l'utilisateur les résultats des tests qu'il peut examiner et aide l'utilisateur à signaler les bogues et à gérer les images de référence.

Vous trouverez ci-dessous un exemple de la manière dont les composants interagissent pour exécuter un test, permettant à l'équipe de test de visualiser et de gérer les résultats du test.

Crédit : Applitools

ÉTAPE 1 : L'équipe de test exécute la suite de tests. Le code répète généralement les étapes suivantes pour différents états d'application.

ÉTAPE 2.1 : À l'aide d'un pilote tel que Selenium ou Appium, les actions de l'utilisateur telles que le clic de la souris, la saisie au clavier, etc. sont simulées.

ÉTAPE 2.2 : Parallèlement à cela, l'API Eyes SDK est appelée pour effectuer simultanément un point de contrôle visuel.

ÉTAPE 2.2.a : Le SDK Eyes utilise le pilote pour collecter la capture d'écran.

ÉTAPE 2.2.b : Après quoi le SDK Eyes envoie l'image collectée au serveur Eyes. Ici, les images et les autres images de point de contrôle sont comparées aux images de référence qui étaient précédemment stockées sur le serveur.

ÉTAPE 3 : Une fois les images du test traitées, Eyes Server fournit des informations sur les différences observées. Parallèlement à cela, un lien vers le site Eyes est fourni où les résultats peuvent être consultés.

ÉTAPE 4 : L'équipe de test utilise Eyes Test Manager pour afficher les résultats du test, mettre à jour les lignes de base, signaler les bogues et annoter les régions qui nécessitent un traitement spécial. Après avoir visualisé tous les résultats, l'équipe de test enregistre la ligne de base. Cela devient la base de comparaison lors du prochain test.

Applitools dispose de SDK qui prennent en charge une large gamme de frameworks d'automatisation de tests populaires - Web, mobiles et de bureau, diverses infrastructures de pilotes d'application, langages de programmation et toutes les plates-formes, navigateurs et systèmes d'exploitation courants. Ces SDK n'interagissent pas directement avec l'AUT, Eyes est donc totalement indépendant de la manière dont l'application est implémentée et déployée.

Compatibilité Applitools Eyes

Applitools propose des SDK pour tous les langages de programmation courants et des exécuteurs de tests offrant une couverture complète des tests pour le Web, les mobiles, les ordinateurs de bureau, les PDF, les systèmes d'exploitation TV, l'IoT, les images, etc.

SDK WEB

Les SDK WEB prennent en charge tous les principaux outils et programmes de test Web :

Sélénium pour -Java, JavaScript, C#, Ruby, PHP, Python
WebdriverIO4, WebdriverIO5, WebdriverIO6
IDE au sélénium
Cyprès
Dramaturge (Nouvel ajout)
Marionnettiste (Nouvel ajout)
TestCafé
Storybook CSF React (Nouvel ajout), Storybook -React, Angular, Vue
Watir
Capybara
Rapporteur (Nouvel ajout)
UFT/QTP
Lean CFT#, Lean JavaScript
Interface utilisateur codée

SDK mobiles

Les SDK mobiles prennent en charge tous les principaux outils et programmes de test mobile :

Appium natif –C#, Java, JavaScript, PHP, Python, Ruby
Appium Web - C#, Java, JavaScript, PHP, Python, Ruby
XCUI Objective-C, XCUI Swift
Expresso
Calebasse iOS et Android

SDK de capture d'écran

CLI, C#, Java, JavaScript, PHP, Ruby, XCTest Objective-C, XCTest Swift

SDK de bureau

Windows UFT, interface utilisateur codée Windows

Outils sans code

Formulaires PDF, IDE sans code

Le gestionnaire de tests dans les yeux d'Applitools

Eyes Test Manager est un outil basé sur un navigateur qui permet d'accéder aux données de test de l'interface utilisateur visuelle. Il permet aux utilisateurs de gérer les résultats des tests, les lignes de base et d'autres métadonnées.

Eyes Test Manager fournit les fonctionnalités suivantes :

Accéder aux résultats des tests de l'interface utilisateur visuelle
Accepter ou rejeter les différences enregistrées
Annoter les étapes avec des commentaires
Ajouter un niveau de correspondance et ignorer les régions
Mettre à jour la ligne de base
Afficher et gérer l'application et les noms des tests
Visualiser et gérer les baselines et les branches
Visualiser et gérer les environnements d'exécution
Comparez et fusionnez les branches de base
Gérez votre compte, vos équipes et vos utilisateurs

Il existe divers autres outils et concepts intégrés dans Eyes qui aident l'utilisateur à organiser les tests et les cas de test. L'un de ces outils est la ligne de base. Le protocole d'inspection visuelle compare les images capturées à celles qui ont été stockées dans la ligne de base du test précédent. Chaque test peut avoir une apparence différente. Les yeux ont de nombreuses lignes de base par test, où chaque ligne de base représente un environnement sélectionné. Chacune de ces lignes de base peut stocker des séries de références d'images.

Lorsque le test visuel s'exécute, l'application est conduite à travers une séquence d'états d'application, et pour chaque état, un point de contrôle est exécuté qui capture une image de l'application pour cet état. Les yeux comparent la série d'images capturées à la série d'images de référence stockées dans la ligne de base de ce test et signalent toute différence significative. L'image dans la ligne de base dépend des exécutions de test, mais elle peut également dépendre d'autres facteurs, tels que les systèmes d'exploitation, le type de navigateur et la taille de la fenêtre d'affichage. Ces facteurs sont appelés l'environnement d'exécution.

La fenêtre d'affichage est la zone visuelle de toute application dans la fenêtre d'application. La taille de la fenêtre d'affichage peut également avoir un impact sur la mise en page de n'importe quelle page. Par exemple, la modification de la dimension du navigateur peut modifier l'apparence du texte rendu. Les pages réactives avec des éléments tels que des menus peuvent apparaître différentes pour différentes dimensions. La police et la taille de l'image peuvent changer. Remarque : la fenêtre d'affichage est spécifique à la plate-forme.