Zum Hauptinhalt springen

Testausgabe

info

Für die Beispielbildausgabe wurde diese WebdriverIO Demo-Seite verwendet.

enableLayoutTesting​

Dies kann sowohl in den Service-Optionen als auch auf der Methoden-Ebene eingestellt werden.

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

Die Bildausgabe für die Service-Optionen ist identisch mit der Methoden-Ebene, siehe unten.

Bildausgabe​

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

saveElement Desktop

save(Screen/Element/FullPageScreen)​

Konsolenausgabe​

Die save(Screen/Element/FullPageScreen)-Methoden liefern die folgenden Informationen, nachdem die Methode ausgeführt wurde:

const saveResult = await browser.saveFullPageScreen({ ... })
console.log(saveResults)
/**
 * {
 *   // Das Gerätepixelverhältnis der ausgeführten Instanz
 *   devicePixelRatio: 1,
 *   // Der formatierte Dateiname, abhängig von der Option `formatImageName`
 *   fileName: "examplePage-chrome-latest-1366x768.png",
 *   // Der Pfad, unter dem die tatsächliche Screenshot-Datei zu finden ist
 *   path: "/path/to/project/.tmp/actual/desktop_chrome",
 * };
 */

Bildausgabe​

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

saveElement Desktop

check(Screen/Element/FullPageScreen)​

Konsolenausgabe​

Standardmäßig liefern die check(Screen/Element/FullPageScreen)-Methoden nur einen Abweichungsprozentsatz wie 1.23, aber wenn das Plugin die Option returnAllCompareData: true hat, werden folgende Informationen nach der Ausführung der Methode bereitgestellt:

const checkResult = await browser.checkFullPageScreen({ ... })
console.log(checkResult)
/**
 * {
 *     // Der formatierte Dateiname, abhängig von der Option `formatImageName`
 *     fileName: "examplePage-chrome-headless-latest-1366x768.png",
 *     folders: {
 *         // Der Ordner für die tatsächlichen Bilder und der Dateiname
 *         actual: "/path/to/project/.tmp/actual/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *         // Der Baseline-Ordner und der Dateiname
 *         baseline:
 *             "/path/to/project/localBaseline/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *         // Dieser folgende Ordner ist optional und nur vorhanden, wenn es eine Abweichung gibt
 *         // Der Ordner, der die Unterschiede und den Dateinamen enthält
 *         diff: "/path/to/project/.tmp/diff/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png",
 *     },
 *     // Der Abweichungsprozentsatz
 *     misMatchPercentage: 2.34,
 * };
 */

Bildausgabe​

info

Die folgenden Bilder zeigen nur Unterschiede als Ergebnis der Ausführung der Check-Befehle. Es wird nur die Differenz in einem Browser angezeigt, aber die Ausgabe für Android und iOS ist die gleiche.

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

Der Button-Text wurde von Get Started zu Getting Started! geändert und als Änderung erkannt.

Button Check Result

Ausblendungen​

Hier finden Sie ein Beispiel für Ausblendungen in Android NativeWebScreenshot und iOS, bei denen der Status+Adressbereich und die Symbolleiste ausgeblendet sind.

Blockouts Android

Welcome! How can I help?

WebdriverIO AI Copilot