Options de Service

Les options de service sont les options qui peuvent être définies lors de l'instanciation du service et qui seront utilisées pour chaque appel de méthode.

// wdio.conf.(js|ts)
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // The options
            },
        ],
    ],
    // ...
};

Options par défaut

`addressBarShadowPadding`

Type: number
Obligatoire: Non
Défaut: 6
Contextes d'application supportés: Web

Le rembourrage qui doit être ajouté à la barre d'adresse sur iOS et Android pour effectuer une découpe appropriée de la fenêtre d'affichage.

`autoElementScroll`

Type: boolean
Obligatoire: Non
Défaut: true
Contextes d'application supportés: Web, Application hybride (Webview)

Cette option vous permet de désactiver le défilement automatique de l'élément dans la vue lorsqu'une capture d'écran d'élément est créée.

`addIOSBezelCorners`

Type: boolean
Obligatoire: Non
Défaut: false
Contextes d'application supportés: Web, Application hybride (Webview), Application native

Ajouter des coins de lunette et une encoche/île dynamique à la capture d'écran pour les appareils iOS.

REMARQUE

Cela ne peut être fait que lorsque le nom de l'appareil PEUT être automatiquement déterminé et correspond à la liste suivante de noms d'appareils normalisés. La normalisation sera effectuée par ce module. iPhone:

iPhone X: iphonex
iPhone XS: iphonexs
iPhone XS Max: iphonexsmax
iPhone XR: iphonexr
iPhone 11: iphone11
iPhone 11 Pro: iphone11pro
iPhone 11 Pro Max: iphone11promax
iPhone 12: iphone12
iPhone 12 Mini: iphone12mini
iPhone 12 Pro: iphone12pro
iPhone 12 Pro Max: iphone12promax
iPhone 13: iphone13
iPhone 13 Mini: iphone13mini
iPhone 13 Pro: iphone13pro
iPhone 13 Pro Max: iphone13promax
iPhone 14: iphone14
iPhone 14 Plus: iphone14plus
iPhone 14 Pro: iphone14pro
iPhone 14 Pro Max: iphone14promax iPads:
iPad Mini 6e génération: ipadmini
iPad Air 4e génération: ipadair
iPad Air 5e génération: ipadair
iPad Pro (11 pouces) 1ère génération: ipadpro11
iPad Pro (11 pouces) 2e génération: ipadpro11
iPad Pro (11 pouces) 3e génération: ipadpro11
iPad Pro (12,9 pouces) 3e génération: ipadpro129
iPad Pro (12,9 pouces) 4e génération: ipadpro129
iPad Pro (12,9 pouces) 5e génération: ipadpro129

`autoSaveBaseline`

Type: boolean
Obligatoire: Non
Défaut: true
Contextes d'application supportés: Web, Application hybride (Webview), Application native

Si aucune image de référence n'est trouvée lors de la comparaison, l'image est automatiquement copiée dans le dossier de référence.

`alwaysSaveActualImage`

Type: boolean
Obligatoire: Non
Défaut: true
Contextes d'application supportés: Tous

Lorsque cette option est définie sur false, elle :

ne sauvegarde pas l'image réelle lorsqu'il n'y a pas de différence
ne stocke pas le fichier jsonreport lorsque createJsonReportFiles est défini sur true. Elle affichera également un avertissement dans les journaux indiquant que createJsonReportFiles est désactivé

Cela devrait créer une meilleure performance car aucun fichier n'est écrit dans le système et devrait s'assurer qu'il n'y a pas beaucoup de bruit dans le dossier actual.

`baselineFolder`

Type: string|()=> string
Obligatoire: Non
Défaut: .path/to/testfile/__snapshots__/
Contextes d'application supportés: Web, Application hybride (Webview), Application native

Le répertoire qui contiendra toutes les images de référence utilisées lors de la comparaison. Si non défini, la valeur par défaut sera utilisée, ce qui stockera les fichiers dans un dossier __snapshots__/ à côté de la spécification qui exécute les tests visuels. Une fonction qui renvoie une string peut également être utilisée pour définir la valeur baselineFolder :

{
    baselineFolder: path.join(process.cwd(), 'foo', 'bar', 'baseline')
},
// OU
{
    baselineFolder: () => {
        // Faire de la magie ici
        return path.join(process.cwd(), 'foo', 'bar', 'baseline');
    }
}

`clearRuntimeFolder`

Type: boolean
Obligatoire: Non
Défaut: false
Contextes d'application supportés: Web, Application hybride (Webview), Application native

Supprimer le dossier d'exécution (actual & diff) lors de l'initialisation

REMARQUE

Cela ne fonctionnera que lorsque le screenshotPath est défini via les options du plugin, et NE FONCTIONNERA PAS lorsque vous définissez les dossiers dans les méthodes

`createJsonReportFiles` (NOUVEAU)

Type: boolean
Obligatoire: Non
Défaut: false

Vous avez maintenant la possibilité d'exporter les résultats de comparaison dans un fichier de rapport JSON. En fournissant l'option createJsonReportFiles: true, chaque image qui est comparée créera un rapport stocké dans le dossier actual, à côté de chaque résultat d'image actual. La sortie ressemblera à ceci :

{
    "parent": "check methods",
    "test": "should fail comparing with a baseline",
    "tag": "examplePageFail",
    "instanceData": {
        "browser": {
            "name": "chrome-headless-shell",
            "version": "126.0.6478.183"
        },
        "platform": {
            "name": "mac",
            "version": "not-known"
        }
    },
    "commandName": "checkScreen",
    "boundingBoxes": {
        "diffBoundingBoxes": [
            {
                "left": 1088,
                "top": 717,
                "right": 1186,
                "bottom": 730
            }
            //....
        ],
        "ignoredBoxes": [
            {
                "left": 159,
                "top": 652,
                "right": 356,
                "bottom": 703
            }
            //...
        ]
    },
    "fileData": {
        "actualFilePath": "/Users/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
        "baselineFilePath": "/Users/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
        "diffFilePath": "/Users/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
        "fileName": "examplePageFail-local-chrome-latest-1366x768.png",
        "size": {
            "actual": {
                "height": 768,
                "width": 1366
            },
            "baseline": {
                "height": 768,
                "width": 1366
            },
            "diff": {
                "height": 768,
                "width": 1366
            }
        }
    },
    "misMatchPercentage": "12.90",
    "rawMisMatchPercentage": 12.900729014153246
}

Lorsque tous les tests sont exécutés, un nouveau fichier JSON avec la collection des comparaisons sera généré et pourra être trouvé à la racine de votre dossier actual. Les données sont regroupées par :

describe pour Jasmine/Mocha ou Feature pour CucumberJS
it pour Jasmine/Mocha ou Scenario pour CucumberJS puis triées par :
commandName, qui sont les noms des méthodes de comparaison utilisées pour comparer les images
instanceData, navigateur d'abord, puis appareil, puis plateforme cela ressemblera à ceci

[
    {
        "description": "check methods",
        "data": [
            {
                "test": "should fail comparing with a baseline",
                "data": [
                    {
                        "tag": "examplePageFail",
                        "instanceData": {},
                        "commandName": "checkScreen",
                        "framework": "mocha",
                        "boundingBoxes": {
                            "diffBoundingBoxes": [],
                            "ignoredBoxes": []
                        },
                        "fileData": {},
                        "misMatchPercentage": "14.34",
                        "rawMisMatchPercentage": 14.335403703025868
                    },
                    {
                        "tag": "exampleElementFail",
                        "instanceData": {},
                        "commandName": "checkElement",
                        "framework": "mocha",
                        "boundingBoxes": {
                            "diffBoundingBoxes": [],
                            "ignoredBoxes": []
                        },
                        "fileData": {},
                        "misMatchPercentage": "1.34",
                        "rawMisMatchPercentage": 1.335403703025868
                    }
                ]
            }
        ]
    }
]

Les données du rapport vous donneront l'opportunité de construire votre propre rapport visuel sans faire toute la magie et la collecte de données vous-même.

REMARQUE

Vous devez utiliser @wdio/visual-testing version 5.2.0 ou supérieure

`disableBlinkingCursor`

Type: boolean
Obligatoire: Non
Défaut: false
Contextes d'application supportés: Web, Application hybride (Webview)

Activer/Désactiver tous les carets "clignotants" des input, textarea, [contenteditable] dans l'application. Si défini sur true, le caret sera défini sur transparent avant de prendre une capture d'écran et réinitialisé une fois terminé

`disableCSSAnimation`

Type: boolean
Obligatoire: Non
Défaut: false
Contextes d'application supportés: Web, Application hybride (Webview)

Activer/Désactiver toutes les animations CSS dans l'application. Si défini sur true, toutes les animations seront désactivées avant de prendre une capture d'écran et réinitialisées une fois terminé

`enableLayoutTesting`

Type: boolean
Obligatoire: Non
Défaut: false
Contextes d'application supportés: Web

Cela masquera tout le texte sur une page afin que seule la mise en page soit utilisée pour la comparaison. Le masquage sera effectué en ajoutant le style 'color': 'transparent !important' à chaque élément.

Pour la sortie, voir Test Output

info

En utilisant ce drapeau, chaque élément contenant du texte (donc pas seulement p, h1, h2, h3, h4, h5, h6, span, a, li, mais aussi div|button|..) recevra cette propriété. Il n'y a pas d'option pour adapter cela.

`formatImageName`

Type: string
Obligatoire: Non
Défaut: {tag}-{browserName}-{width}x{height}-dpr-{dpr}
Contextes d'application supportés: Web, Application hybride (Webview), Application native

Le nom des images sauvegardées peut être personnalisé en passant le paramètre formatImageName avec une chaîne de format comme :

{tag}-{browserName}-{width}x{height}-dpr-{dpr}

Les variables suivantes peuvent être passées pour formater la chaîne et seront automatiquement lues à partir des capacités de l'instance. Si elles ne peuvent pas être déterminées, les valeurs par défaut seront utilisées.

browserName: Le nom du navigateur dans les capacités fournies
browserVersion: La version du navigateur fournie dans les capacités
deviceName: Le nom de l'appareil des capacités
dpr: Le rapport de pixels de l'appareil
height: La hauteur de l'écran
logName: Le logName des capacités
mobile: Cela ajoutera _app, ou le nom du navigateur après le deviceName pour distinguer les captures d'écran d'applications des captures d'écran de navigateurs
platformName: Le nom de la plateforme dans les capacités fournies
platformVersion: La version de la plateforme fournie dans les capacités
tag: Le tag qui est fourni dans les méthodes qui sont appelées
width: La largeur de l'écran

info

Vous ne pouvez pas fournir des chemins/dossiers personnalisés dans le formatImageName. Si vous voulez changer le chemin, veuillez vérifier la modification des options suivantes :

`fullPageScrollTimeout`

Type: number
Obligatoire: Non
Défaut: 1500
Contextes d'application supportés: Web

Le délai d'attente en millisecondes après un défilement. Cela peut aider à identifier les pages avec chargement paresseux.

info

Cela ne fonctionnera que lorsque l'option de service/méthode userBasedFullPageScreenshot est définie sur true, voir aussi userBasedFullPageScreenshot

`hideScrollBars`

Type: boolean
Obligatoire: Non
Défaut: true
Contextes d'application supportés: Web, Application hybride (Webview)

Masquer les barres de défilement dans l'application. Si défini sur true, toutes les barres de défilement seront désactivées avant de prendre une capture d'écran. Ceci est défini par défaut à true pour éviter des problèmes supplémentaires.

`logLevel`

Type: string
Obligatoire: Non
Défaut: info
Contextes d'application supportés: Web, Application hybride (Webview), Application native

Ajoute des journaux supplémentaires, les options sont debug | info | warn | silent

Les erreurs sont toujours enregistrées dans la console.

`savePerInstance`

Type: boolean
Défaut: false
Obligatoire: Non
Contextes d'application supportés: Web, Application hybride (Webview), Application native

Enregistrer les images par instance dans un dossier séparé, ainsi par exemple toutes les captures d'écran Chrome seront enregistrées dans un dossier Chrome comme desktop_chrome.

`screenshotPath`

Type: string | () => string
Défaut: .tmp/
Obligatoire: Non
Contextes d'application supportés: Web, Application hybride (Webview), Application native

Le répertoire qui contiendra toutes les captures d'écran réelles/différentes. Si non défini, la valeur par défaut sera utilisée. Une fonction qui renvoie une chaîne peut également être utilisée pour définir la valeur screenshotPath :

{
    screenshotPath: path.join(process.cwd(), 'foo', 'bar', 'screenshotPath')
},
// OU
{
    screenshotPath: () => {
        // Faire de la magie ici
        return path.join(process.cwd(), 'foo', 'bar', 'screenshotPath');
    }
}

`toolBarShadowPadding`

Type: number
Obligatoire: Non
Défaut: 6 pour Android et 15 pour iOS (6 par défaut et 9 seront ajoutés automatiquement pour la barre d'accueil possible sur les iPhones avec une encoche ou les iPads qui ont une barre d'accueil)
Contextes d'application supportés: Web

Le rembourrage qui doit être ajouté à la barre d'outils sur iOS et Android pour effectuer une découpe appropriée de la fenêtre d'affichage.

`userBasedFullPageScreenshot`

Type: boolean
Obligatoire: Non
Défaut: false
Contextes d'application supportés: Web, Application hybride (Webview) Introduit dans visual-service@7.0.0

Par défaut, les captures d'écran pleine page sur le web de bureau sont capturées à l'aide du protocole WebDriver BiDi, qui permet des captures d'écran rapides, stables et cohérentes sans défilement. Lorsque userBasedFullPageScreenshot est défini sur true, le processus de capture d'écran simule un utilisateur réel : défilement à travers la page, capture de captures d'écran de taille viewport et assemblage. Cette méthode est utile pour les pages avec contenu à chargement paresseux ou rendu dynamique qui dépend de la position de défilement.

Utilisez cette option si votre page dépend du chargement de contenu pendant le défilement ou si vous souhaitez conserver le comportement des anciennes méthodes de capture d'écran.

`waitForFontsLoaded`

Type: boolean
Obligatoire: Non
Défaut: true
Contextes d'application supportés: Web, Application hybride (Webview)

Les polices, y compris les polices tierces, peuvent être chargées de manière synchrone ou asynchrone. Le chargement asynchrone signifie que les polices peuvent se charger après que WebdriverIO a déterminé qu'une page est complètement chargée. Pour éviter les problèmes de rendu des polices, ce module attendra, par défaut, que toutes les polices soient chargées avant de prendre une capture d'écran.

Options tabulables

REMARQUE

Ce module prend également en charge le dessin de la façon dont un utilisateur utiliserait son clavier pour tabulation à travers le site Web en dessinant des lignes et des points d'un élément tabulable à un autre.
Le travail est inspiré par le billet de blog de Viv Richards sur "AUTOMATISER LA TABULABILITÉ DE LA PAGE (EST-CE UN MOT ?) AVEC LES TESTS VISUELS".
La façon dont les éléments tabulables sont sélectionnés est basée sur le module tabbable. S'il y a des problèmes concernant la tabulation, veuillez consulter le README.md et en particulier la section Plus de détails.

`tabbableOptions`

Type: object
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

Les options qui peuvent être modifiées pour les lignes et les points si vous utilisez les méthodes {save|check}Tabbable. Les options sont expliquées ci-dessous.

`tabbableOptions.circle`

Type: object
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

Les options pour changer le cercle.

`tabbableOptions.circle.backgroundColor`

Type: string
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La couleur de fond du cercle.

`tabbableOptions.circle.borderColor`

Type: string
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La couleur de la bordure du cercle.

`tabbableOptions.circle.borderWidth`

Type: number
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La largeur de la bordure du cercle.

`tabbableOptions.circle.fontColor`

Type: string
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La couleur de la police du texte dans le cercle. Cela ne sera affiché que si showNumber est défini sur true.

`tabbableOptions.circle.fontFamily`

Type: string
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La famille de la police du texte dans le cercle. Cela ne sera affiché que si showNumber est défini sur true.

Assurez-vous de définir des polices qui sont prises en charge par les navigateurs.

`tabbableOptions.circle.fontSize`

Type: number
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La taille de la police du texte dans le cercle. Cela ne sera affiché que si showNumber est défini sur true.

`tabbableOptions.circle.size`

Type: number
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La taille du cercle.

`tabbableOptions.circle.showNumber`

Type: showNumber
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

Afficher le numéro de séquence de tabulation dans le cercle.

`tabbableOptions.line`

Type: object
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

Les options pour changer la ligne.

`tabbableOptions.line.color`

Type: string
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La couleur de la ligne.

`tabbableOptions.line.width`

Type: number
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web

La largeur de la ligne.

Options de comparaison

`compareOptions`

Type: object
Obligatoire: Non
Défaut: Voir ici pour toutes les valeurs par défaut
Contextes d'application supportés: Web, Application hybride (Webview), Application native (Voir Options de méthode de comparaison pour plus d'informations)

Les options de comparaison peuvent également être définies comme options de service, elles sont décrites dans les Options de méthode de comparaison

Options par défaut​

addressBarShadowPadding​

autoElementScroll​

addIOSBezelCorners​

autoSaveBaseline​

alwaysSaveActualImage​

baselineFolder​

clearRuntimeFolder​

createJsonReportFiles (NOUVEAU)​

disableBlinkingCursor​

disableCSSAnimation​

enableLayoutTesting​

formatImageName​

fullPageScrollTimeout​

hideScrollBars​

logLevel​

savePerInstance​

screenshotPath​

toolBarShadowPadding​

userBasedFullPageScreenshot​

waitForFontsLoaded​

Options tabulables​

tabbableOptions​

tabbableOptions.circle​

tabbableOptions.circle.backgroundColor​

tabbableOptions.circle.borderColor​

tabbableOptions.circle.borderWidth​

tabbableOptions.circle.fontColor​

tabbableOptions.circle.fontFamily​

tabbableOptions.circle.fontSize​

tabbableOptions.circle.size​

tabbableOptions.circle.showNumber​

tabbableOptions.line​

tabbableOptions.line.color​

tabbableOptions.line.width​

Options de comparaison​

compareOptions​

Options par défaut

`addressBarShadowPadding`

`autoElementScroll`

`addIOSBezelCorners`

`autoSaveBaseline`

`alwaysSaveActualImage`

`baselineFolder`

`clearRuntimeFolder`

`createJsonReportFiles` (NOUVEAU)

`disableBlinkingCursor`

`disableCSSAnimation`

`enableLayoutTesting`

`formatImageName`

`fullPageScrollTimeout`

`hideScrollBars`

`logLevel`

`savePerInstance`

`screenshotPath`

`toolBarShadowPadding`

`userBasedFullPageScreenshot`

`waitForFontsLoaded`

Options tabulables

`tabbableOptions`

`tabbableOptions.circle`

`tabbableOptions.circle.backgroundColor`

`tabbableOptions.circle.borderColor`

`tabbableOptions.circle.borderWidth`

`tabbableOptions.circle.fontColor`

`tabbableOptions.circle.fontFamily`

`tabbableOptions.circle.fontSize`

`tabbableOptions.circle.size`

`tabbableOptions.circle.showNumber`

`tabbableOptions.line`

`tabbableOptions.line.color`

`tabbableOptions.line.width`

Options de comparaison

`compareOptions`