visualtesting percy

Description :

Effectue un test visuel avec Percy. L'action prend une capture d'écran de la page actuelle et compare le rendu avec une capture de référence. Si cette dernière n'existe pas, Percy créera une capture de référence pour les futures comparaisons.

Définition :

Variable
Valeur
Description

Name

Nom de la capture (obligatoire)

Identifiant unique pour la capture d'écran.

width

Liste des largeurs (option)

Permet de définir les largeurs d'écran à tester.

minHeight

Hauteur minimum (option)

Définit la hauteur minimale de la page à capturer.

enableJavaScript

true/false (option)

Indique si JavaScript doit être activé pour la capture.

percyCSS

Code CSS personnalisé (option)

Permet d'appliquer des styles CSS spécifiques pour la capture.

scope

Sélecteur d’un élément (option)

Limite la capture à une partie spécifique de la page.

Paramètre :

Les paramètres suivants peuvent être utilisés dans un test visuel Percy :

  1. Name (obligatoire) :

    • Le nom unique de la capture d'écran. Cela permet d'identifier la capture dans Percy.io.

  2. Options (facultatif) :

    • width : Définir les largeurs d'écran à capturer.

    • minHeight : Spécifier une hauteur minimale pour la page.

    • enableJavaScript : Indiquer si JavaScript doit être activé pendant la capture.

    • percyCSS : Injecter du CSS personnalisé pour la capture d'écran.

    • scope : Limiter la capture à un élément HTML spécifique.

Test sans option :

Un test visuel basique avec uniquement le nom de la capture.

visualtesting ("login")

Test avec option(s) :

Un test avec des options supplémentaires pour personnaliser la capture.

visualtesting ("login" | width="100" | minHeight="200")

L'utilisateur peut ajouter jusqu'à cinq options à la commande.

Exemple avec deux options :

visualtesting ("login" | width="100" | minHeight="200" | enableJavaScript="true")

Test avec option(s) en utilisant les variables :

Vous pouvez utiliser des variables définies dans un fichier variables.ini. Par exemple, pour ajouter du CSS personnalisé défini dans ce fichier sous la section percy, vous pouvez écrire :

visualtesting ("login" | width="100" | minHeight="200" | $percyCSS)

Le fichier variables.ini doit être situé dans le répertoire scripts\additional_files et être structuré comme suit :

[percy]
percyCSS = "body { background-color: blue; }"

Remarque :

Le Token Percy doit être défini dans le fichier des variables sous la section [percy] comme suit :

[percy]
cle=<votre_token_percy>

Exemples :

  • L'action effectuera un test visuel sur la page de connexion en capturant une vue pour une largeur d'écran de 100 pixels et une hauteur minimale de 200 pixels :

    visualtesting ("login" | width="100" | minHeight="200")

  • Si une différence est détectée, Percy renverra un avertissement. Pour une analyse détaillée, consultez Percy.io.

Previousvisualtesting applitoolsNextcomparescreenshot

Last updated