विजुअल टेस्टिंग
यह क्या कर सकता है?
WebdriverIO निम्नलिखित के लिए स्क्रीन, एलिमेंट्स या पूरे पेज पर इमेज कंपैरिज़न प्रदान करता है
- 🖥️ डेस्कटॉप ब्राउज़र (Chrome / Firefox / Safari / Microsoft Edge)
- 📱 मोबाइल / टैबलेट ब्राउज़र (Android एमुलेटर पर Chrome / iOS सिम्युलेटर पर Safari / सिम्युलेटर / वास्तविक डिवाइस) Appium के माध्यम से
- 📱 नेटिव ऐप्स (Android एमुलेटर / iOS सिम्युलेटर / वास्तविक डिवाइस) Appium के माध्यम से (🌟 नया 🌟)
- 📳 हाइब्रिड ऐप्स Appium के माध्यम से
@wdio/visual-service
के माध्यम से जो एक लाइटवेट WebdriverIO सर्विस है।
इससे आप निम्न कार्य कर सकते हैं:
- स्क्रीन/एलिमेंट्स/पूरे-पेज स्क्रीन को बेसलाइन के खिलाफ सेव या तुलना करें
- जब कोई बेसलाइन नहीं है तो स्वचालित रूप से बेसलाइन बनाएं
- कस्टम क्षेत्रों को ब्लॉक करें और यहां तक कि तुलना के दौरान स्टेटस और टूलबार (केवल मोबाइल) को स्वचालित रूप से बाहर रखें
- एलिमेंट डायमेंशन स्क्रीनशॉट बढ़ाएं
- वेबसाइट कंपैरिज़न के दौरान टेक्स्ट छिपाएं:
- स्थिरता बढ़ाएं और फॉन्ट रेंडरिंग की अस्थिरता को रोकें
- केवल वेबसाइट के लेआउट पर ध्यान केंद्रित करें
- बेहतर पठनीय परीक्षणों के लिए विभिन्न तुलना विधियों और अतिरिक्त मैचर्स का सेट उपयोग करें
- सत्यापित करें कि आपकी वेबसाइट कीबोर्ड के साथ टैबिंग का समर्थन कैसे करेगी, देखें वेबसाइट पर टैबिंग
- और बहुत कुछ, देखें सर्विस और मेथड विकल्प
यह सर्विस सभी ब्राउज़र/डिवाइसेस के लिए आवश्यक डेटा और स्क्रीनशॉट प्राप्त करने के लिए एक लाइटवेट मॉड्यूल है। तुलना शक्ति ResembleJS से आती है। यदि आप ऑनलाइन छवियों की तुलना करना चाहते हैं तो आप ऑनलाइन टूल देख सकते हैं।
saveScreen
, saveElement
, checkScreen
, checkElement
मेथड्स और toMatchScreenSnapshot
और toMatchElementSnapshot
मैचर्स का उपयोग नेटिव ऐप्स/कॉन्टेक्स्ट के लिए किया जा सकता है।
कृपया हाइब्रिड ऐप्स के लिए उपयोग करते समय अपनी सर्विस सेटिंग्स में isHybridApp:true
प्रॉपर्टी का उपयोग करें।
इंस्टॉलेशन
सबसे आसान तरीका है @wdio/visual-service
को अपने package.json
में एक डेव-डिपेंडेंसी के रूप में रखना, इस प्रकार:
npm install --save-dev @wdio/visual-service
उपयोग
@wdio/visual-service
का उपयोग एक सामान्य सर्विस के रूप में किया जा सकता है। आप इसे अपनी कॉन्फिगरेशन फाइल में निम्न प्रकार से सेट कर सकते हैं:
import path from "node:path";
// wdio.conf.ts
export const config = {
// ...
// =====
// Setup
// =====
services: [
[
"visual",
{
// कुछ विकल्प, अधिक जानकारी के लिए डॉक्स देखें
baselineFolder: path.join(process.cwd(), "tests", "baseline"),
formatImageName: "{tag}-{logName}-{width}x{height}",
screenshotPath: path.join(process.cwd(), "tmp"),
savePerInstance: true,
// ... अधिक विकल्प
},
],
],
// ...
};
अधिक सर्विस विकल्प यहां पाए जा सकते हैं।
एक बार आपके WebdriverIO कॉन्फिगरेशन में सेट होने के बाद, आप आगे बढ़ सकते हैं और अपने टेस्ट में विजुअल असर्शन जोड़ सकते हैं।
कैपेबिलिटीज
विजुअल टेस्टिंग मॉड्यूल का उपयोग करने के लिए, आपको अपनी कैपेबिलिटीज में कोई अतिरिक्त विकल्प जोड़ने की आवश्यकता नहीं है। हालांकि, कुछ मामलों में, आप अपने विजुअल टेस्ट में अतिरिक्त मेटाडेटा जोड़ना चाह सकते हैं, जैसे logName
।
logName
आपको प्रत्येक कैपेबिलिटी को एक कस्टम नाम असाइन करने की अनुमति देता है, जिसे फिर इमेज फाइलनेम में शामिल किया जा सकता है। यह विशेष रूप से विभिन्न ब्राउज़रों, डिवाइसों, या कॉन्फिगरेशन पर लिए गए स्क्रीनशॉट को अलग करने के लिए उपयोगी है।
इसे सक्षम करने के लिए, आप capabilities
सेक्शन में logName
को परिभाषित कर सकते हैं और यह सुनिश्चित कर सकते हैं कि विजुअल टेस्टिंग सर्विस में formatImageName
विकल्प इसका संदर्भ देता है। यहां बताया गया है कि आप इसे कैसे सेट कर सकते हैं:
import path from "node:path";
// wdio.conf.ts
export const config = {
// ...
// =====
// Setup
// =====
capabilities: [
{
browserName: 'chrome',
'wdio-ics:options': {
logName: 'chrome-mac-15', // Chrome के लिए कस्टम लॉग नाम
},
}
{
browserName: 'firefox',
'wdio-ics:options': {
logName: 'firefox-mac-15', // Firefox के लिए कस्टम लॉग नाम
},
}
],
services: [
[
"visual",
{
// कुछ विकल्प, अधिक जानकारी के लिए डॉक्स देखें
baselineFolder: path.join(process.cwd(), "tests", "baseline"),
screenshotPath: path.join(process.cwd(), "tmp"),
// नीचे दिया गया फॉर्मेट कैपेबिलिटीज से `logName` का उपयोग करेगा
formatImageName: "{tag}-{logName}-{width}x{height}",
// ... अधिक विकल्प
},
],
],
// ...
};
यह कैसे काम करता है
-
logName
सेट करना:capabilities
सेक्शन में, प्रत्येक ब्राउज़र या डिवाइस को एक अद्वितीयlogName
असाइन करें। उदाहरण के लिए,chrome-mac-15
macOS संस्करण 15 पर Chrome पर चलने वाले टेस्ट की पहचान करता है।
-
कस्टम इमेज नामिंग:
-
formatImageName
विकल्प स्क्रीनशॉट फाइलनेम मेंlogName
को एकीकृत करता है। उदाहरण के लिए, यदिtag
होमपेज है और रेज़ोल्यूशन1920x1080
है, तो परिणामी फाइलनेम इस प्रकार दिख सकता है:homepage-chrome-mac-15-1920x1080.png
-
-
कस्टम नामिंग के लाभ:
- विभिन्न ब्राउज़रों या डिवाइसों से स्क्रीनशॉट के बीच अंतर करना बहुत आसान हो जाता है, विशेष रूप से बेसलाइन को प्रबंधित करते समय और विसंगतियों को डीबग करते समय।
-
डिफ़ॉल्ट पर नोट:
- यदि
logName
क्षमताओं में सेट नहीं है, तोformatImageName
विकल्प इसे फाइलनेम में एक खाली स्ट्रिंग के रूप में दिखाएगा (homepage--15-1920x1080.png
)
- यदि
WebdriverIO MultiRemote
हम MultiRemote का भी समर्थन करते हैं। इसे ठीक से काम करने के लिए सुनिश्चित करें कि आप अपनी
क्षमताओं में wdio-ics:options
जोड़ें जैसा कि आप नीचे देख सकते हैं। यह सुनिश्चित करेगा कि प्रत्येक स्क्रीनशॉट का अपना अद्वितीय नाम होगा।
अपने टेस्ट लिखना टेस्टरनर का उपयोग करने की तुलना में अलग नहीं होगा।
// wdio.conf.js
export const config = {
capabilities: {
chromeBrowserOne: {
capabilities: {
browserName: "chrome",
"goog:chromeOptions": {
args: ["disable-infobars"],
},
// THIS!!!
"wdio-ics:options": {
logName: "chrome-latest-one",
},
},
},
chromeBrowserTwo: {
capabilities: {
browserName: "chrome",
"goog:chromeOptions": {
args: ["disable-infobars"],
},
// THIS!!!
"wdio-ics:options": {
logName: "chrome-latest-two",
},
},
},
},
};
प्रोग्रामेटिक रूप से चलाना
यहां remote
विकल्पों के माध्यम से @wdio/visual-service
का उपयोग करने का एक न्यूनतम उदाहरण है:
import { remote } from "webdriverio";
import VisualService from "@wdio/visual-service";
let visualService = new VisualService({
autoSaveBaseline: true,
});
const browser = await remote({
logLevel: "silent",
capabilities: {
browserName: "chrome",
},
});
// `browser` में कस्टम कमांड जोड़ने के लिए सर्विस को "शुरू" करें
visualService.remoteSetup(browser);
await browser.url("https://webdriver.io/");
// या केवल स्क्रीनशॉट सेव करने के लिए इसका उपयोग करें
await browser.saveFullPageScreen("examplePaged", {});
// या वैलिडेशन के लिए इसका उपयोग करें। दोनों मेथड्स को संयोजित करने की आवश्यकता नहीं है, FAQ देखें
await browser.checkFullPageScreen("examplePaged", {});
await browser.deleteSession();
वेबसाइट पर टैबिंग
आप कीबोर्ड TAB-की का उपयोग करके यह जांच सकते हैं कि क्या वेबसाइट एक्सेसिबल है। एक्सेसिबिलिटी के इस भाग का परीक्षण हमेशा समय लेने वाला (मैनुअल) काम रहा है और ऑटोमेशन के माध्यम से करना काफी कठिन है।
saveTabbablePage
और checkTabbablePage
विधियों के साथ, आप अब अपनी वेबसाइट पर लाइनें और डॉट्स ड्रा कर सकते हैं ताकि टैबिंग क्रम को सत्यापित कर सकें।
इस बात का ध्यान रखें कि यह केवल डेस्कटॉप ब्राउज़रों के लिए उपयोगी है और मोबाइल डिवाइसों के लिए नहीं है। सभी डेस्कटॉप ब्राउज़र इस सुविधा का समर्थन करते हैं।
यह काम Viv Richards के ब्लॉग पोस्ट "AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING" से प्रेरित है।
तरीका जिससे टैबेबल एलिमेंट्स का चयन किया जाता है, वह tabbable मॉड्यूल पर आधारित है। यदि टैबिंग के संबंध में कोई समस्या है, तो कृपया README.md और विशेष रूप से अधिक विवरण सेक्शन देखें।
यह कैसे काम करता है
दोनों मेथड्स आपकी वेबसाइट पर एक canvas
एलिमेंट बनाएंगे और लाइनें और बिंदु खींचेंगे ताकि आपको दिखाएं कि अगर एक अंतिम उपयोगकर्ता इसका उपयोग करेगा तो आपका TAB कहां जाएगा। इसके बाद, यह फ्लो का अच्छा अवलोकन देने के लिए एक पूर्ण-पृष्ठ स्क्रीनशॉट बनाएगा।
**saveTabbablePage
का उपयोग केवल तब करें जब आपको स्क्रीनशॉट बनाने की आवश्यकता हो और उसे बेसलाइन इमेज के साथ तुलना नहीं करनी हो।
जब आप टैबिंग फ्लो की तुलना बेसलाइन से करना चाहते हैं, तो आप checkTabbablePage
-मेथड का उपयोग कर सकते हैं। आपको दो विधियों का एक साथ उपयोग करने की आवश्यकता नहीं है। यदि पहले से ही एक बेसलाइन इमेज बनाई गई है, जो स्वचालित रूप से सर्विस को इंस्टेंशिएट करते समय autoSaveBaseline: true
प्रदान करके किया जा सकता है,
checkTabbablePage
पहले एक्चुअल इमेज बनाएगा और फिर उसकी तुलना बेसलाइन से करेगा।
विकल्प
दोनों मेथड्स saveFullPageScreen
या
compareFullPageScreen
के समान विकल्पों का उपयोग करते हैं।
उदाहरण
यह एक उदाहरण है कि हमारी गिनी पिग वेबसाइट पर टैबिंग कैसे काम करती है:
विजुअल स्नैपशॉट को स्वचालित रूप से अपडेट करें
कमांड लाइन में --update-visual-baseline
आर्गुमेंट जोड़कर बेसलाइन इमेज अपडेट करें। यह
- स्वचालित रूप से वास्तविक स्क्रीनशॉट को कॉपी करेगा और इसे बेसलाइन फोल्डर में रखेगा
- यदि अंतर हैं तो यह परीक्षण को पास कर देगा क्योंकि बेसलाइन अपडेट किया गया है
उपयोग:
npm run test.local.desktop --update-visual-baseline
लॉग्स इन्फो/डीबग मोड चलाते समय आप निम्न लॉग्स देखेंगे
[0-0] ..............
[0-0] #####################################################################################
[0-0] INFO:
[0-0] Updated the actual image to
[0-0] /Users/wswebcreation/Git/wdio/visual-testing/localBaseline/chromel/demo-chrome-1366x768.png
[0-0] #####################################################################################
[0-0] ..........
टाइपस्क्रिप्ट सपोर्ट
इस मॉड्यूल में टाइपस्क्रिप्ट सपोर्ट शामिल है, जो आपको विजुअल टेस्टिंग सर्विस का उपयोग करते समय ऑटो-कंप्लीशन, टाइप सेफ्टी और बेहतर डेवलपर अनुभव का लाभ उठाने की अनुमति देता है।
चरण 1: टाइप डेफिनिशन जोड़ें
यह सुनिश्चित करने के लिए कि टाइपस्क्रिप्ट मॉड्यूल टाइप्स को पहचानता है, अपने tsconfig.json में types फील्ड में निम्न एंट्री जोड़ें:
{
"compilerOptions": {
"types": ["@wdio/visual-service"]
}
}