Aller au contenu principal

Sortie de Test

info

Ce site de démonstration WebdriverIO a été utilisé pour l'exemple de sortie d'image.

enableLayoutTesting​

Cela peut être défini dans les Options du Service ainsi qu'au niveau de la Méthode.

// wdio.conf.(js|ts)
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            'visual',
            {
                enableLayoutTesting: true
            }
        ]
    ]
    // ...
}

La sortie d'image pour les Options du Service est identique à celle de la Méthode, voir ci-dessous.

Sortie d'Image​

await browser.saveElement(".features_vqN4", "example-element-tag", {enableLayoutTesting: true})
// Or
await browser.checkElement(".features_vqN4", "example-element-tag", {enableLayoutTesting: true})

saveElement Desktop

save(Screen/Element/FullPageScreen)​

Sortie Console​

Les méthodes save(Screen/Element/FullPageScreen) fourniront les informations suivantes après l'exécution de la méthode :

const saveResult = await browser.saveFullPageScreen({ ... })
console.log(saveResults)
/**
 * {
 *   // The device pixel ratio of the instance that has run
 *   devicePixelRatio: 1,
 *   // The formatted filename, this depends on the options `formatImageName`
 *   fileName: "examplePage-chrome-latest-1366x768.png",
 *   // The path where the actual screenshot file can be found
 *   path: "/path/to/project/.tmp/actual/desktop_chrome",
 * };
 */

Sortie d'Image​

await browser.saveElement(".hero__title-logo", "example-element-tag")

saveElement Desktop

check(Screen/Element/FullPageScreen)​

Sortie Console​

Par défaut, les méthodes check(Screen/Element/FullPageScreen) ne fourniront qu'un pourcentage de différence comme 1.23, mais lorsque le plugin a l'option returnAllCompareData: true, les informations suivantes sont fournies après l'exécution de la méthode :

const checkResult = await browser.checkFullPageScreen({ ... })
console.log(checkResult)
/**
 * {
 *     // The formatted filename, this depends on the options `formatImageName`
 *     fileName: "examplePage-chrome-headless-latest-1366x768.png",
 *     folders: {
 *         // The actual folder and the file name
 *         actual: "/path/to/project/.tmp/actual/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *         // The baseline folder and the file name
 *         baseline:
 *             "/path/to/project/localBaseline/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *         // This following folder is optional and only if there is a mismatch
 *         // The folder that holds the diffs and the file name
 *         diff: "/path/to/project/.tmp/diff/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *     },
 *     // The mismatch percentage
 *     misMatchPercentage: 2.34,
 * };
 */

Sortie d'Image​

info

Les images ci-dessous ne montreront que les différences résultant de l'exécution des commandes de vérification. Seule la différence dans un navigateur est montrée, mais la sortie pour Android et iOS est la même.

await browser.checkElement("#__docusaurus_skipToContent_fallback > header > div > div.buttons_pzbO > a:nth-child(1)", "example-element-tag")
info

Le texte du bouton a été changé de Get Started à Getting Started! et détecté comme un changement.

Button Check Result

Block-Outs​

Voici un exemple de sortie pour les block-outs dans Android NativeWebScreenshot et iOS où le statut+adresse et la barre d'outils sont bloqués.

Blockouts Android

Welcome! How can I help?

WebdriverIO AI Copilot