OCR परीक्षण सेवा
@wdio/ocr-service एक तीसरे पक्ष का पैकेज है, अधिक जानकारी के लिए कृपया GitHub | npm देखें
WebdriverIO के साथ दृश्य परीक्षण के लिए दस्तावेज़ीकरण के लिए, कृपया डॉक्स देखें। इस प्रोजेक्ट में WebdriverIO के साथ दृश्य परीक्षण चलाने के लिए सभी प्रासंगिक मॉड्यूल शामिल हैं। ./packages
निर्देशिका के अंदर आपको मिलेंगे:
@wdio/visual-testing
: दृश्य परीक्षण को एकीकृत करने के लिए WebdriverIO सेवाwebdriver-image-comparison
: एक छवि तुलना मॉड्यूल जिसका उपयोग विभिन्न NodeJS टेस्ट ऑटोमेशन फ्रेमवर्क के लिए किया जा सकता है जो WebDriver प्रोटोकॉल का समर्थन करते हैं
स्टोरीबुक रनर (बीटा)
स्टोरीबुक रनर बीटा के बारे में अधिक जानकारी प्राप्त करने के लिए क्लिक करें
स्टोरीबुक रनर अभी भी बीटा में है, डॉक्स बाद में WebdriverIO दस्तावेज़ीकरण पृष्ठों पर स्थानांतरित हो जाएंगे।
यह मॉड्यूल अब एक नए विजुअल रनर के साथ स्टोरीबुक का समर्थन करता है। यह रनर स्वचालित रूप से एक स्थानीय/रिमोट स्टोरीबुक इंस्टेंस के लिए स्कैन करता है और प्रत्येक कंपोनेंट के तत्व स्क्रीनशॉट बनाएगा। यह निम्न को जोड़कर किया जा सकता है
export const config: WebdriverIO.Config = {
// ...
services: ["visual"],
// ....
};
अपनी services
में और npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook
को कमांड लाइन के माध्यम से चलाकर।
यह डिफ़ॉल्ट ब्राउज़र के रूप में हेडलेस मोड में Chrome का उपयोग करेगा।
[!NOTE]
- अधिकांश विजुअल टेस्टिंग विकल्प स्टोरीबुक रनर के लिए भी काम करेंगे, देखें WebdriverIO दस्तावेज़ीकरण।
- स्टोरीबुक रनर आपकी सभी क्षमताओं को ओवरराइट करेगा और केवल उन ब्राउज़रों पर चल सकता है जिनका वह समर्थन करता है, देखें
--browsers
।- स्टोरीबुक रनर मल्टीरिमोट क्षमताओं का उपयोग करने वाले मौजूदा कॉन्फिग का समर्थन नहीं करता है और एक त्रुटि फेंकेगा।
- स्टोरीबुक रनर केवल डेस्कटॉप वेब का समर्थन करता है, मोबाइल वेब का नहीं।
स्टोरीबुक रनर सेवा विकल्प
सेवा विकल्प इस प्रकार प्रदान किए जा सकते हैं
export const config: WebdriverIO.Config = {
// ...
services: [
[
'visual',
{
// Some default options
baselineFolder: join(process.cwd(), './__snapshots__/'),
debug: true,
// The storybook options, see cli options for the description
storybook: {
additionalSearchParams: new URLSearchParams({foo: 'bar', abc: 'def'}),
clip: false,
clipSelector: ''#some-id,
numShards: 4,
// `skipStories` can be a string ('example-button--secondary'),
// an array (['example-button--secondary', 'example-button--small'])
// or a regex which needs to be provided as as string ("/.*button.*/gm")
skipStories: ['example-button--secondary', 'example-button--small'],
url: 'https://www.bbc.co.uk/iplayer/storybook/',
version: 6,
// Optional - Allows overriding the baselines path. By default it will group the baselines by category and component (e.g. forms/input/baseline.png)
getStoriesBaselinePath: (category, component) => `path__${category}__${component}`,
},
},
],
],
// ....
}
स्टोरीबुक रनर CLI विकल्प
--additionalSearchParams
- प्रकार:
string
- अनिवार्य: नहीं
- डिफ़ॉल्ट: ''
- उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --additionalSearchParams="foo=bar&abc=def"
यह स्टोरीबुक URL में अतिरिक्त खोज पैरामीटर जोड़ेगा। अधिक जानकारी के लिए URLSearchParams दस्तावेज़ीकरण देखें। स्ट्रिंग एक वैध URLSearchParams स्ट्रिंग होनी चाहिए।
[!NOTE] डबल कोट्स की आवश्यकता है ताकि
&
को कमांड सेपरेटर के रूप में व्याख्या करने से रोका जा सके। उदाहरण के लिए--additionalSearchParams="foo=bar&abc=def"
के साथ यह स्टोरी टेस्ट के लिए निम्न स्टोरीबुक URL जनरेट करेगा:http://storybook.url/iframe.html?id=story-id&foo=bar&abc=def
।
--browsers
- प्रकार:
string
- अनिवार्य: नहीं
- डिफ़ॉल्ट:
chrome
, आपchrome|firefox|edge|safari
से चुन सकते हैं - उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --browsers=chrome,firefox,edge,safari
- नोट: केवल CLI के माध्यम से उपलब्ध है
यह कंपोनेंट स्क्रीनशॉट लेने के लिए प्रदान किए गए ब्राउज़रों का उपयोग करेगा
[!NOTE] सुनिश्चित करें कि आपने अपने स्थानीय मशीन पर उन ब्राउज़रों को इंस्टॉल किया है जिन पर आप चलाना चाहते हैं
--clip
- प्रकार:
boolean
- अनिवार्य: नहीं
- डिफ़ॉल्ट:
true
- उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clip=false
जब अक्षम किया जाता है तो यह व्यूपोर्ट स्क्रीनशॉट बनाएगा। जब सक्षम किया जाता है तो यह --clipSelector
के आधार पर तत्व स्क्रीनशॉट बनाएगा जो कंपोनेंट स्क्रीनशॉट के चारों ओर खाली स्थान की मात्रा को कम करेगा और स्क्रीनशॉट आकार को कम करेगा।
--clipSelector
- प्रकार:
string
- अनिवार्य: नहीं
- डिफ़ॉल्ट: स्टोरीबुक V7 के लिए
#storybook-root > :first-child
और स्टोरीबुक V6 के लिए#root > :first-child:not(script):not(style)
, देखें--version
- उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --clipSelector="#some-id"
यह वह सेलेक्टर है जिसका उपयोग किया जाएगा:
- स्क्रीनशॉट लेने के लिए तत्व का चयन करने के लिए
- स्क्रीनशॉट लेने से पहले दृश्यमान होने के लिए तत्व की प्रतीक्षा करने के लिए
--devices
- प्रकार:
string
- अन िवार्य: नहीं
- डिफ़ॉल्ट: आप
deviceDescriptors.ts
से चुन सकते हैं - उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --devices="iPhone 14 Pro Max","Pixel 3 XL"
- नोट: केवल CLI के माध्यम से उपलब्ध है
यह कंपोनेंट स्क्रीनशॉट लेने के लिए deviceDescriptors.ts
से मेल खाने वाले प्रदान किए गए उपकरणों का उपयोग करेगा
[!NOTE]
- यदि आपको एक डिवाइस कॉन्फिग की कमी है, तो फीचर अनुरोध सबमिट करने के लिए स्वतंत्र महसूस करें
- यह केवल Chrome के साथ काम करेगा:
- यदि आप
--devices
प्रदान करते हैं तो सभी Chrome इंस्टेंस मोबाइल एमुलेशन मोड में चलेंगे- यदि आप Chrome के अलावा अन्य ब्राउज़र भी प्रदान करते हैं, जैसे
--devices --browsers=firefox,safari,edge
तो यह स्वचालित रूप से मोबाइल एमुलेशन मोड में Chrome जोड़ देगा- स्टोरीबुक रनर डिफ़ॉल्ट रूप से तत्व स्नैपशॉट बनाएगा, यदि आप पूरा मोबाइल एमुलेटेड स्क्रीनशॉट देखना चाहते हैं तो कमांड लाइन के माध्यम से
--clip=false
प्रदान करें- फ़ाइल नाम उदाहरण के लिए
__snapshots__/example/button/desktop_chrome/example-button--large-local-chrome-iPhone-14-Pro-Max-430x932-dpr-3.png
जैसा दिखेगा- SRC: मोबाइल एमुलेशन का उपयोग करके डेस्कटॉप पर मोबाइल वेबसाइट का परीक्षण करना उपयोगी हो सकता है, लेकिन परीक्षकों को पता होना चाहिए कि कई सूक्ष्म अंतर हैं जैसे:
- पूरी तरह से अलग GPU, जो बड़े प्रदर्शन परिवर्तनों की ओर ले जा सकता है;
- मोबाइल UI का अनुकरण नहीं किया जाता है (विशेष रूप से, छिपाने वाला url बार पृष्ठ ऊंचाई को प्रभावित करता है);
- विभेदन पॉपअप (जहां आप कुछ टच लक्ष्यों में से एक का चयन करते हैं) समर् थित नहीं है;
- कई हार्डवेयर API (उदाहरण के लिए, orientationchange इवेंट) अनुपलब्ध हैं।
--headless
- प्रकार:
boolean
- अनिवार्य: नहीं
- डिफ़ॉल्ट:
true
- उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --headless=false
- नोट: केवल CLI के माध्यम से उपलब्ध है
यह टेस्ट को डिफ़ॉल्ट रूप से हेडलेस मोड में चलाएगा (जब ब्राउज़र इसका समर्थन करता है) या अक्षम किया जा सकता है
--numShards
- प्रकार:
number
- अनिवार्य: नहीं
- डिफ़ॉल्ट:
true
- उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --numShards=10
यह उन समानांतर इंस्टेंस की संख्या होगी जिनका उपयोग स्टोरी चला ने के लिए किया जाएगा। यह आपके wdio.conf
-फ़ाइल में maxInstances
द्वारा सीमित होगा।
[!IMPORTANT]
headless
-मोड में चलाते समय संख्या को 20 से अधिक न बढ़ाएं ताकि संसाधन प्रतिबंधों के कारण अस्थिरता को रोका जा सके
--skipStories
- प्रकार:
string|regex
- अनिवार्य: नहीं
- डिफ़ॉल्ट: null
- उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --skipStories="/.*button.*/gm"
यह हो सकता है:
- एक स्ट्रिंग (
example-button--secondary,example-button--small
) - या एक रेगेक्स (
"/.*button.*/gm"
)
कुछ स्टोरी को छोड़ने के लिए। स्टोरी की id
का उपयोग करें जो स्टोरी के URL में पाई जा सकती है। उदाहरण के लिए, इस URL http://localhost:6006/?path=/story/example-page--logged-out
में id
example-page--logged-out
है
--url
- प्रकार:
string
- अनिवार्य: नहीं
- डिफ़ॉल्ट:
http://127.0.0.1:6006
- उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --url="https://example.com"
वह URL जहां आपका स्टोरीबुक इंस्टेंस होस्ट किया गया है।
--version
- प्रकार:
number
- अनिवार्य: नहीं
- डिफ़ॉल्ट: 7
- उदाहरण:
npx wdio tests/configs/wdio.local.desktop.storybook.conf.ts --storybook --version=6
यह स्टोरीबुक का वर्शन है, यह डिफ़ॉल्ट रूप से 7
है। यह जानने के लिए आवश्यक है कि क्या V6 clipSelector
का उपयोग किया जाना चाहिए।