Saltar al contenido principal

Salida de Prueba

información

Este sitio de demostración de WebdriverIO ha sido utilizado para el ejemplo de salida de imagen.

enableLayoutTesting​

Esto se puede configurar tanto en las Opciones del Servicio como a nivel del Método.

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

La salida de imagen para las Opciones del Servicio es igual a la del Método, ver a continuación.

Salida de Imagen​

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)​

Salida de Consola​

Los métodos save(Screen/Element/FullPageScreen) proporcionarán la siguiente información después de que el método haya sido ejecutado:

const saveResult = await browser.saveFullPageScreen({ ... })
console.log(saveResults)
/**
 * {
 *   // La relación de píxeles del dispositivo de la instancia que se ha ejecutado
 *   devicePixelRatio: 1,
 *   // El nombre de archivo formateado, esto depende de las opciones `formatImageName`
 *   fileName: "examplePage-chrome-latest-1366x768.png",
 *   // La ruta donde se puede encontrar el archivo de captura de pantalla real
 *   path: "/path/to/project/.tmp/actual/desktop_chrome",
 * };
 */

Salida de Imagen​

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

saveElement Desktop

check(Screen/Element/FullPageScreen)​

Salida de Consola​

Por defecto, los métodos check(Screen/Element/FullPageScreen) solo proporcionarán un porcentaje de discrepancia como 1.23, pero cuando el plugin tiene la opción returnAllCompareData: true, se proporciona la siguiente información después de que el método haya sido ejecutado:

const checkResult = await browser.checkFullPageScreen({ ... })
console.log(checkResult)
/**
 * {
 *     // El nombre de archivo formateado, esto depende de las opciones `formatImageName`
 *     fileName: "examplePage-chrome-headless-latest-1366x768.png",
 *     folders: {
 *         // La carpeta actual y el nombre del archivo
 *         actual: "/path/to/project/.tmp/actual/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *         // La carpeta de referencia y el nombre del archivo
 *         baseline:
 *             "/path/to/project/localBaseline/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *         // La siguiente carpeta es opcional y solo si hay una discrepancia
 *         // La carpeta que contiene las diferencias y el nombre del archivo
 *         diff: "/path/to/project/.tmp/diff/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *     },
 *     // El porcentaje de discrepancia
 *     misMatchPercentage: 2.34,
 * };
 */

Salida de Imagen​

información

Las imágenes a continuación solo mostrarán diferencias como resultado de ejecutar los comandos de verificación. Solo se muestra la diferencia en un navegador, pero la salida para Android e iOS es la misma.

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

El texto del botón ha cambiado de Get Started a Getting Started! y se ha detectado como un cambio.

Button Check Result

Block-Outs​

Aquí encontrará un ejemplo de salida para bloqueos en Android NativeWebScreenshot e iOS donde se bloquean el estado+dirección y la barra de herramientas.

Blockouts Android

Welcome! How can I help?

WebdriverIO AI Copilot