टेस्ट आउटपुट

जानकारी

इस WebdriverIO डेमो साइट का उपयोग उदाहरण इमेज आउटपुट के लिए किया गया है।

enableLayoutTesting

इसे सर्विस ऑप्शंस के साथ-साथ मेथड लेवल पर भी सेट किया जा सकता है।

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

सर्विस ऑप्शंस के लिए इमेज आउटपुट मेथड के समान है, नीचे देखें।

इमेज आउटपुट

saveElement | checkElement

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

saveScreen | checkScreen

await browser.saveScreen("example-page-tag")

saveFullPageScreen | checkFullPageScreen

await browser.saveFullPageScreen("full-page-tag")
// Or
await browser.checkFullPageScreen("full-page-tag", {enableLayoutTesting: true})

saveTabbablePage | checkTabbablePage

await browser.saveTabbablePage("tabbable-page-tag")
// Or
await browser.checkTabbablePage("tabbable-page-tag", {enableLayoutTesting: true})

save(Screen/Element/FullPageScreen)

कंसोल आउटपुट

save(Screen/Element/FullPageScreen) मेथड्स निम्नलिखित जानकारी प्रदान करेंगे मेथड निष्पादित होने के बाद:

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",
 * };
 */

इमेज आउटपुट

saveElement

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

Desktop

Android

iOS

saveScreen

await browser.saveScreen("example-page-tag")

Desktop

Android ChromeDriver

Android nativeWebScreenshot

iOS

TIP

iOS saveScreen क्रियान्वयन डिफ़ॉल्ट रूप से डिवाइस बेज़ेल कॉर्नर्स के साथ नहीं होते हैं। इसे प्राप्त करने के लिए सर्विस को इंस्टेंटिएट करते समय addIOSBezelCorners:true विकल्प जोड़ें, यहाँ देखें

saveFullPageScreen

await browser.saveFullPageScreen("full-page-tag")

Desktop

Android

iOS

check(Screen/Element/FullPageScreen)

कंसोल आउटपुट

डिफ़ॉल्ट रूप से, check(Screen/Element/FullPageScreen) मेथड्स केवल एक मिसमैच प्रतिशत जैसे 1.23 प्रदान करेंगे, लेकिन जब प्लगइन में returnAllCompareData: true विकल्प होता है, तो मेथड निष्पादित होने के बाद निम्नलिखित जानकारी प्रदान की जाती है:

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,
 * };
 */

इमेज आउटपुट

जानकारी

नीचे दिए गए चित्र केवल चेक कमांड चलाने के परिणामस्वरूप अंतरों को दिखाएंगे। केवल ब्राउज़र में अंतर दिखाया गया है, लेकिन Android और iOS के लिए आउटपुट समान है।

checkElement

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

जानकारी

बटन टेक्स्ट Get Started से बदलकर Getting Started! कर दिया गया है और इसे परिवर्तन के रूप में पहचाना गया है।

checkScreen

await browser.checkScreen("example-page-tag")

जानकारी

बटन टेक्स्ट Get Started से बदलकर Getting Started! कर दिया गया है और इसे परिवर्तन के रूप में पहचाना गया है।

checkFullPageScreen

await browser.checkFullPageScreen("full-page-tag")

जानकारी

बटन टेक्स्ट Get Started से बदलकर Getting Started! कर दिया गया है और इसे परिवर्तन के रूप में पहचाना गया है।

ब्लॉक-आउट्स

यहां आप Android NativeWebScreenshot और iOS में ब्लॉक-आउट्स के लिए एक उदाहरण आउटपुट पाएंगे जहां स्टेटस+एड्रेस और टूलबार ब्लॉक आउट हैं।

Android nativeWebScreenshot

iOS