Conseils sur l’automatisation avancée des PDF avec Test Studio

Consultez ces conseils plus avancés pour vérifier les images de votre PDF avec Test Studio.

Que ce soit pour la compatibilité des plateformes, l’intégrité des documents, la sécurité, la taille, la compression, la prise en charge des médias riches, la normalisation ISO, l’accessibilité, l’archivage ou simplement la facilité de création et d’utilisation, Portable Document FormatLe format PDF est l’un des formats de documents les plus utilisés, tant dans le cadre personnel que professionnel. Un de mes collègues va encore plus loin en le décrivant comme « l’alpha et l’oméga du traitement documentaire pour toute entreprise » dans un article de blog.

Progrès Studio de test Telerik est un outil d’automatisation facile à utiliser pour les tests fonctionnels de l’interface utilisateur, de charge/performance et d’API pour toutes les applications Web et de bureau. Que vous optiez pour le sans code ou que vous choisissiez ses fonctionnalités basées sur le code, Test Studio fournit des solutions à toute l’équipe, permettant à chacun (des testeurs juniors aux développeurs seniors, des PM aux responsables de l’assurance qualité) d’atteindre une productivité maximale dans des environnements de livraison de logiciels agiles. Je pourrais aussi aller encore plus loin et le décrire comme «des tests automatisés qui fonctionnent tout simplement.

En tant que bon guide du débutant sur la façon de démarrer avec les tests d’automatisation PDF avec Telerik Test Studio, je recommanderais ce qui précède publication. Ceci et bien sûr le fonctionnaire Documentation. Cependant, le but de l’article de blog actuel est de vous amener un peu plus loin et de dévoiler quelques conseils, astuces et même des expériences amusantes (ou peut-être pas tellement). Le sujet principal portera sur la vérification d’image dans un fichier PDF de votre choix.

Comprendre la structure du PDF

Les PDF sont composés de divers éléments tels que du texte, des images et des graphiques organisés de manière structurée. Leur structure de fichiers peut être divisée en plusieurs sections :

• Catalogue de documents: La racine de la structure du document
• Pages: Représentations de pages individuelles dans le PDF
• Flux de contenu: Séquences d’instructions qui décrivent l’apparence d’une page
• Ressources: Collections d’objets comme les polices et les images utilisées par les flux de contenu

En intégrant des images comme éléments d’arrière-plan dans le flux de contenu et en assurant une gestion correcte des couches et des ressources, les PDF peuvent conserver une mise en page cohérente et visuellement attrayante sur différentes plates-formes et appareils. Si cette image est un bitmap (par exemple JPEG ou PNG), elle est intégrée directement dans le PDF en tant qu’objet image. Pour utiliser un SVG comme arrière-plan, le SVG doit être converti dans un format que le PDF peut interpréter de manière native.

Compter les défis

Disons qu’il existe exactement un PDF tel que décrit ci-dessus. Des scénarios réels d’assurance qualité nécessiteraient de répondre à des questions telles que :

« Comment puis-je valider les propriétés d’en-tête/pied de page ? »

« Comment puis-je vérifier si l’intégralité du texte d’une zone de saisie est visible ou non ? »

« Comment puis-je réaliser une comparaison de deux images en % de correspondance ? »

« Le filigrane est-il présent sur toutes les pages du fichier PDF ?

La liste de toutes ces questions rendrait l’article de blog TL;DR, passons donc rapidement à l’explication de la raison pour laquelle essayer d’automatiser une image intégrée en arrière-plan dans un fichier PDF peut transformer même les testeurs d’automatisation les plus chevronnés en testeurs d’automatisation chevronnés perplexes. En d’autres termes, l’élément image n’est pas disponible dans le modèle objet de document, le puissant DOM.

Résoudre les défis

Lorsqu’un fichier PDF est ouvert pour validation avec Test Studio, vous avez l’impression de travailler dans une page Web avec les mêmes fonctionnalités d’enregistrement des éléments et d’exécution. Techniquement, Test Studio démarre son serveur de visualisation PDF intégré et affiche le fichier à l’intérieur, analysé dans une page HTML. Tout cela se déroule de manière transparente, vous n’avez donc pas à vous soucier du démarrage et de la maintenance du serveur de visualisation PDF.

À partir de là, vous pouvez valider n’importe quel élément du fichier PDF comme vous en avez l’habitude pour l’automatisation des pages Web : survolez et choisissez l’action souhaitée dans le menu contextuel. Habituellement, dans de tels cas, il est crucial d’utiliser les outils de Test Studio. pixel par pixel fonction de vérification d’image avec le élément par image.

Cependant, lorsqu’un élément de l’image n’est pas reconnu dans le DOM, essayez de rester calme puis de vous adapter : le surmonter et l’améliorer sont encore plus cruciaux.

Avant de créer un script de test avec Telerik Test Studio, assurez-vous que la mise à l’échelle de votre moniteur est définie sur 100 %. Rappel que cela n’est pas lié à la résolution de l’écran, mais plutôt aux paramètres système du système d’exploitation Windows :

J’ai créé un exemple de test Web appelé « Vrai », en ouvrant un fichier PDF (appelé Report.html.pdf) créé à partir de l’exportation HTML de la section Rapports de Test Studio. Lorsque vous attachez un enregistreur avec la surbrillance des éléments activée au fichier PDF, il ressemblera à ceci :

L’exploration du DOM (via l’option « Localiser dans le DOM ») devrait apporter le résultat suivant, affichant uniquement un 1056 x 816px canvasWrapper div, qui contient le logo Progress Telerik Test Studio dans l’en-tête, le graphique des résultats et la grille de données des résultats.

Afin de vérifier que le logo Progress Telerik Test Studio est visible, j’ai suivi les étapes suivantes :

Adapter

1. Pendant que l’enregistreur était allumé et que canvasWrapper mis en évidence, j’ai créé un élément factice et je l’ai appelé « FooElement ».

2. J’ai trouvé le nouvel élément du Éléments dépôt >> cliqué sur Générateur d’étapes >> Vérifications et sélectionné Visible. (Si vous avez besoin de détails supplémentaires sur la façon de procéder exactement, consultez la documents sur les étapes de vérification.)

3. L’étape suivante a été créée : Verify element ‘FooElement’ ‘is’ visibleavec son SearchByImageFirst propriété définie sur True.

Surmonter

4. J’ai modifié les attributs de l’élément (c’est-à-dire, tagname = foo) en leur attribuant des valeurs factices, afin qu’elles ne puissent pas être trouvées par la logique de recherche intelligente par défaut de Test Studio.

5. je modifié l’image de l’élément avec celui dont j’ai besoin uniquement pour la vérification du logo.

Lors de l’exécution du test, le résultat est positif, car la nouvelle image du logo se trouve dans le fichier PDF. Notez qu’une telle vérification vérifie la propriété de visibilité de l’élément. Si un élément est marqué comme visible mais défile hors de la fenêtre actuelle, la vérification réussira toujours mais il n’est pas réellement visible sur l’écran actuel ou à l’intérieur de la fenêtre de défilement.

Améliorer

Je voulais m’assurer que la validation n’est pas un faux positif, j’ai donc ajouté deux scénarios supplémentaires :

6. j’ai décoché la case IsVisible propriété pour s’assurer que l’étape échouera lors de l’exécution

7. J’ai copié le test original (IsVisible est coché) vers un nouveau, appelé Falsemais cette fois j’ai téléchargé un supplémentaire et légèrement différent logo pour l’image de l’élément. Notez que vous pouvez télécharger plusieurs images sur un élément et que différentes étapes utilisent différentes images.

Lors de l’exécution du nouveau test, le résultat échoue comme prévu, car le logo modifié n’est pas présent dans le fichier PDF.

En suivant le flux appliqué pour la validation du logo, vous pourriez faire de même pour l’image graphique ou toute autre et obtenir les mêmes résultats.

Improviser

La partie improvisation est toujours délicate, mais j’ai néanmoins décidé de l’ajouter. En utilisant du code C#, je pourrai peut-être calculer si un élément est visible ou non. Cela nécessiterait de demander au navigateur les coordonnées d’écran actuelles de la fenêtre d’affichage, qu’il s’agisse d’une fenêtre de défilement ou de la fenêtre du navigateur. Ensuite, je demanderais au navigateur les coordonnées d’écran actuelles de l’élément cible que je souhaite vérifier. Ensuite, je calculerais si les deux rectangles se croisent. Si les deux rectangles se croisent, alors l’élément est visible. S’ils ne se croisent pas, l’élément n’est pas visible. Mais c’est assez avancé et mérite peut-être un article de blog séparé.

Je pourrais aller encore plus loin et prendre un instantané de l’ensemble du navigateur ou seulement d’une partie via ActiveBrowser.Window.GetBitmap(). Ensuite, en utilisant System.Drawing espace de noms, recadrez une zone et enregistrez-la, et enfin comparez-la à une autre image que j’utilise comme standard de référence. J’ai fait ça pour expérimenter Erreur quadratique moyenne (MSE), qui est une métrique couramment utilisée dans la comparaison d’images pour mesurer la différence entre deux images.

MSE quantifie la moyenne des carrés des différences entre les valeurs de pixels correspondantes des deux images. MSE est une formule mathématique utilisée pour calculer la différence quadratique moyenne entre l’image originale (de référence) et l’image modifiée (test). Plus le MSE est bas, plus les deux images sont similaires. Un MSE plus élevé indique une plus grande dissemblance.

Juste pour vous donner un aperçu de ce qui doit être fait à l’avance avant que MSE ne soit pleinement utilisé, vous devez :

1. Alignez les images – Vérifiez que les deux images sont de mêmes dimensions. Sinon, redimensionnez-les de manière appropriée.
2. Soustraire les valeurs des pixels – Pour chaque pixel correspondant dans les deux images, calculez la différence.
3. Régler les différences – Mettez au carré chaque différence pour vous assurer que toutes les valeurs sont positives.
4. Additionner les carrés des différences – Additionnez toutes les différences au carré.
5. Faire la moyenne de la somme – Divisez le total par le nombre de paires de pixels pour obtenir l’erreur quadratique moyenne.

Même si cette approche offrirait des opportunités infinies, la maintenance du code finirait par devenir un fardeau, je préférerais donc m’en tenir à l’approche low/no code. Que feriez-vous dans un tel cas ? Faites le nous savoir dans la section « Commentaires ».

Et si vous ne l’avez pas encore fait, essayez Test Studio gratuitement :

Essayez Test Studio

Bons tests !