मान लीजिए, किसी भी डेवलपर के लिए ऑटोमेटेड टेस्ट लिखना सबसे मज़ेदार काम नहीं है. डेवलपर के तौर पर, हम सुविधाएं लिखना चाहते हैं, गड़बड़ियां ठीक करना चाहते हैं, और दुनिया को बेहतर बनाना चाहते हैं! हालांकि, अगर हमारे वर्कफ़्लो में ऑटोमेटेड टेस्टिंग की सुविधा नहीं है, तो आने वाले समय में स्थिति काफ़ी “समस्या” हो सकती है. इसलिए, हम यह भी सोचते हैं कि ऑटोमेटेड टेस्ट लिखना ज़रूरी है.
Chrome DevTools में Recorder पैनल की मदद से, यूज़र फ़्लो को रिकॉर्ड और फिर से चलाया जा सकता है. साथ ही, तीसरे पक्ष के अलग-अलग एक्सटेंशन और लाइब्रेरी के ज़रिए उन्हें अलग-अलग फ़ॉर्मैट (उदाहरण के लिए, टेस्ट स्क्रिप्ट) में एक्सपोर्ट किया जा सकता है और Puppeteer Replay लाइब्रेरी की मदद से यूज़र फ़्लो को पसंद के मुताबिक बनाया जा सकता है और उन्हें अपने मौजूदा वर्कफ़्लो के साथ इंटिग्रेट किया जा सकता है.
इस ब्लॉग पोस्ट में, हम चर्चा करेंगे:
- प्रोग्राम के हिसाब से यूज़र फ़्लो को एक्सपोर्ट करने और उसे फिर से चलाने का तरीका.
- Puppeteer Replay की मदद से, अपने यूज़र फ़्लो को पसंद के मुताबिक कैसे बनाएं.
- सीआई/सीडी वर्कफ़्लो को इंटिग्रेट करने का तरीका.
यह ब्लॉग पोस्ट मानती है कि आपको रिकॉर्डर की बुनियादी बातें पता हैं. अगर आपने Recorder का इस्तेमाल पहले कभी नहीं किया है, तो इसे इस्तेमाल करने के लिए शुरुआती जानकारी देने वाले इस छोटे से ट्यूटोरियल और वीडियो गाइड को पढ़ें.
यूज़र फ़्लो एक्सपोर्ट करें और प्रोग्राम के हिसाब से, अपने-आप चलने वाला रीप्ले
रिकॉर्डर में, डिफ़ॉल्ट रूप से इन रिकॉर्डिंग को Puppeteer या Puppeteer Replay स्क्रिप्ट या सामान्य JSON फ़ाइल के तौर पर एक्सपोर्ट करने की सुविधा मिलती है.
यूज़र फ़्लो को JSON फ़ाइलों के तौर पर एक्सपोर्ट करने के बाद, आपके पास इसे रिकॉर्डर पैनल में वापस इंपोर्ट करने और इसे फिर से चलाने का विकल्प होता है. इसके अलावा, इन्हें फिर से चलाने के लिए बाहरी लाइब्रेरी का इस्तेमाल भी किया जा सकता है. Puppeteer Replay लाइब्रेरी, उपलब्ध लाइब्रेरी में से एक है.
Puppeteer Replay की मदद से फिर से खेलें
Puppeteer Replay को इंस्टॉल करने के लिए, डेटा स्टोर करने की जगह पर दिए गए निर्देशों का पालन करें.
मान लें कि आपने recordings फ़ोल्डर में अपने JSON यूज़र फ़्लो को सेव किया है (उदाहरण के लिए, डेमो प्रोजेक्ट), तो एक या ज़्यादा यूज़र फ़्लो चलाने के लिए, नीचे दिए गए कमांड का इस्तेमाल करें:
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
इसके अलावा, रिकॉर्डिंग चलाने के लिए एनपीएम स्क्रिप्ट भी जोड़ी जा सकती है. इस लाइन को package.json के scripts फ़ील्ड में जोड़ें:
"replay-all": "replay recordings"
इससे, सभी रिकॉर्डिंग फिर से चलाने के लिए, कमांड लाइन में npm run replay-all को चलाया जा सकता है.
यूज़र फ़्लो के लिए, डिफ़ॉल्ट रूप से यूज़र इंटरफ़ेस (यूआई) के बिना फिर से चलने की सुविधा. इसे बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला मोड भी कहा जाता है. अगर आपको यूज़र इंटरफ़ेस (यूआई) देखना है, तो कमांड चलाने से पहले, PUPPETEER_HEADLESS के एनवायरमेंट वैरिएबल को 'गलत है' पर सेट करें.
PUPPETEER_HEADLESS=false npm run replay-all
तीसरे पक्ष की लाइब्रेरी की मदद से फिर से चलाएं
कुछ तीसरे पक्ष की लाइब्रेरी हैं जिन्हें Chrome ब्राउज़र के अलावा, फिर से चलाने के लिए इस्तेमाल किया जा सकता है. यहां लाइब्रेरी की पूरी सूची दी गई है.
उदाहरण के लिए, TestCafe, एंड-टू-एंड टेस्टिंग का फ़्रेमवर्क है. यह Safari और दूसरी सुविधाओं के साथ JSON यूज़र फ़्लो को फिर से चलाने की सुविधा देता है!
npm install -g testcafe
# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json
# replay with all browsers
testcafe all ./recordings/order-one-coffee.json
वहीं दूसरी ओर, Saucelabs एक क्लाउड-आधारित जांच प्लैटफ़ॉर्म है. इससे, क्लाउड पर अलग-अलग ब्राउज़र और वर्शन के साथ, JSON यूज़र फ़्लो को फिर से देखा जा सकता है.
यहां Saucelabs में कॉन्फ़िगरेशन फ़ाइल का एक उदाहरण दिया गया है. डेमो डेटा स्टोर करने की जगह देखें.
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
अलग-अलग एक्सटेंशन की मदद से यूज़र फ़्लो एक्सपोर्ट करना
डिफ़ॉल्ट विकल्पों के अलावा, यूज़र फ़्लो को अलग-अलग फ़ॉर्मैट में एक्सपोर्ट करने के लिए, एक्सटेंशन इंस्टॉल किए जा सकते हैं.
उदाहरण के लिए, आपके पास यूज़र फ़्लो को WebPageTest कस्टम स्क्रिप्ट के तौर पर रिकॉर्ड और एक्सपोर्ट करने का विकल्प है. स्क्रिप्ट की मदद से, अपने ऐप्लिकेशन से कई चरणों वाले यूज़र फ़्लो की परफ़ॉर्मेंस की जांच की जा सकती है. हालांकि, कभी-कभी स्क्रिप्ट को लिखना मुश्किल होता है.
इसके अलावा, अगर आपके पास पहले से ही टेस्टिंग टूल मौजूद हैं, तो अलग-अलग टेस्ट स्क्रिप्ट में यूज़र फ़्लो एक्सपोर्ट करने के लिए एक्सटेंशन मौजूद हैं. जैसे, Cypress, Nightwatch, WebdriverIO, Testing Library वगैरह. यहां पूरी सूची दी गई है. इससे आप और आपकी टीम तेज़ी से टेस्ट लिखना शुरू कर सकती है.
प्रोग्राम के हिसाब से, अलग-अलग टेस्ट स्क्रिप्ट में बदलना
एक्सटेंशन के साथ ही, जांच करने वाली इनमें से ज़्यादातर कंपनियां लाइब्रेरी भी पब्लिश करती हैं, ताकि आप कई JSON यूज़र फ़्लो को प्रोग्राम के हिसाब से बदल सकें.
उदाहरण के लिए, साइप्रस टेस्ट में यूज़र फ़्लो को एक्सपोर्ट करने के लिए, @cypress/chrome-recorder लाइब्रेरी का इस्तेमाल करें.
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
एक्सटेंशन की मदद से यूज़र फ़्लो फिर से चलाएं
Chrome 112 की शुरुआत से, अब रिकॉर्डिंग को फिर से चलाने के लिए एक्सटेंशन का इस्तेमाल करके, अपने अनुभव को बेहतर बनाया जा सकता है. इन एक्सटेंशन की मदद से, तीसरे पक्ष की सेवाओं और इन्फ़्रास्ट्रक्चर को आसानी से इंटिग्रेट किया जा सकता है. इनकी मदद से, DevTools को छोड़े बिना ही रिकॉर्डिंग को फिर से चलाया जा सकता है.
शुरू करने के लिए, उपलब्ध एक्सटेंशन की सूची देखें या अपना कस्टम एक्सटेंशन बनाने का तरीका जानें.
अपने एक्सटेंशन या लाइब्रेरी बनाएं
पर्दे के पीछे, सभी एक्सटेंशन और लाइब्रेरी, Puppeteer Replay लाइब्रेरी के ऊपर बनाई गई हैं. Puppeteer Replay आपको यूज़र फ़्लो को फिर से चलाने की अनुमति देने के साथ-साथ, एपीआई की सुविधा भी देते हैं. इसकी मदद से, यूज़र फ़्लो को पसंद के मुताबिक या बदलाव किया जा सकता है.
यूज़र फ़्लो को पसंद के मुताबिक बनाएं
चलिए, स्क्रीनशॉट प्लगिन बनाएं. हर यूज़र फ़्लो के लिए, हम चाहते हैं कि:
- हर चरण के आखिर में स्क्रीनशॉट लेने और उसे
_screenshotsफ़ोल्डर में सेव करने के लिए. - यूज़र फ़्लो का निष्पादन पूरा होने के बाद, एक मैसेज आउटपुट करने के लिए.
यहां कोड स्निपेट दिया गया है. आप इस डेमो को डाउनलोड कर सकते हैं और इसके साथ खेल भी सकते हैं.
/* screenshot-plugin.mjs */
import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";
// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });
export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
count = 0;
async afterEachStep(step, flow) {
await super.afterEachStep(step, flow);
this.count = this.count + 1;
const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
await this.page.screenshot({ path });
console.log(`Saved screenshot as ${path}`);
}
async afterAllSteps(step, flow) {
await super.afterAllSteps(step, flow);
console.log("Operation completed successfully.");
}
}
यह कोड खुद में ही अच्छा व्यवहार करता है. हर चरण के बाद, स्क्रीनशॉट सेव करने और सभी चरणों के बाद मैसेज को लॉग करने के लिए, हम PuppeteerRunnerExtension API को बढ़ाते हैं.
फ़ाइल सेव करें, ताकि हम नीचे दिए गए निर्देश का इस्तेमाल करके, इस एक्सटेंशन के साथ यूज़र फ़्लो चला सकें:
# replay one user flow with plugin
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/order-a-coffee.json
# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json
आउटपुट यह रहा:
Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…
Operation completed successfully.
यूज़र फ़्लो को बदलना
यूज़र फ़्लो को पसंद के मुताबिक बनाने का एक और तरीका है,उसे अलग-अलग फ़ॉर्मैट में बदलना (उदाहरण के लिए, साइप्रस या नाइटवॉच टेस्ट स्क्रिप्ट).
उदाहरण के लिए, आपके यूज़र फ़्लो में, यूआरएल पर जाने का कोई चरण शामिल है. यहां बताया गया है कि JSON फ़ाइल कैसी दिखती है:
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
इस चरण को JavaScript में बदलने के लिए,stringify प्लगिन बनाया जा सकता है. आप अन्य मौजूदा लाइब्रेरी भी देख सकते हैं कि वे ऐसा कैसे करते हैं.
उदाहरण के लिए, यह कोड स्निपेट दिखाता है कि WebdriverIO नेविगेशन चरण को कैसे बदलता है:
export class StringifyPlugin extends PuppeteerStringifyExtension {
#appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
switch (step.type) {
case 'navigate':
return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
…
}
यूज़र फ़्लो के साथ प्लगिन को चलाने पर, नेविगेशन लाइन await browser.url(‘https://coffee-cart.netlify.app/’) में बदल जाती है.
DevTools को फिर से चलाने की सुविधा को पसंद के मुताबिक बनाएं
'फिर से चलाएं' एक्सटेंशन की मदद से, DevTools रिकॉर्डर को छोड़े बिना तीसरे पक्ष की सेवाओं और इन्फ़्रास्ट्रक्चर का इस्तेमाल करके, रिकॉर्डिंग को फिर से चलाया जा सकता है.
अपना रीप्ले एक्सटेंशन बनाने के लिए, रीप्ले एक्सटेंशन का दस्तावेज़ देखें. साथ ही, मदद पाने के लिए उदाहरण के तौर पर दिया गया एक्सटेंशन देखें.
Chrome एक्सटेंशन पब्लिश करें
यूज़र फ़्लो को पसंद के मुताबिक बनाने और पूरी तरह बदलने के बाद, उन्हें Chrome एक्सटेंशन के तौर पर पैकेज किया जा सकता है और Chrome Web Store पर पब्लिश किया जा सकता है.
स्थानीय तौर पर डीबग करने और Chrome एक्सटेंशन को पब्लिश करने का तरीका जानने के लिए, यह डेमो और निर्देश देखें.
अपनी सीआई/सीडी पाइपलाइन के साथ इंटिग्रेट करें
ऐसा करने के कई तरीके हैं और कई टूल मौजूद हैं. GitHub की कार्रवाइयों की मदद से, इस प्रोसेस को ऑटोमेट करने का एक उदाहरण यहां दिया गया है:
# .github/node.js.yml
name: Replay recordings
on:
push:
branches: [ "main" ]
schedule:
- cron: '30 12 * * *' # daily 12:30pm
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install puppeteer
- run: npm run replay-all
- run: npm run start
इस उदाहरण में, हम यूज़र फ़्लो को फिर से तब चलाएंगे, जब:
- नए बदलाव,
mainब्रांच में भेजे जाएंगे - हर दिन दोपहर 12:30 बजे
GitHub की कार्रवाइयों के अलावा, क्लाउड सेवा देने वाली अपनी पसंदीदा कंपनियों के साथ भी इंटिग्रेट किया जा सकता है. इस डेमो पर जाकर देखें कि Google Cloud Run जॉब का इस्तेमाल करके, कैसे एक साथ 10,000 यूज़र फ़्लो चलाए जा सकते हैं!
नतीजा
इस ब्लॉग पोस्ट में, हमने उपयोगकर्ता फ़्लो को JSON फ़ाइलों के तौर पर एक्सपोर्ट करने, PuppeteerReplayExtension की मदद से रीप्ले को पसंद के मुताबिक बनाने, PuppeteerStringifyExtension की मदद से यूज़र फ़्लो को बदलने, और उन्हें अपने सीआई वर्कफ़्लो में इंटिग्रेट करने के अलग-अलग तरीकों के बारे में बताया है.
हमें उम्मीद है कि इस ब्लॉग पोस्ट से, आपको रिकॉर्डर पैनल इस्तेमाल करने के तरीके और टूल के बारे में कुछ आइडिया मिल गए होंगे. इनकी मदद से, अपने प्रोजेक्ट में टेस्टिंग वर्कफ़्लो को आसानी से इंटिग्रेट किया जा सकता है. हमें बेसब्री से इंतज़ार है कि आप और क्या-क्या बनाएंगे!
झलक दिखाने वाले चैनलों को डाउनलोड करना
अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर, Chrome Canary, Dev या बीटा का इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, आपको DevTools की नई सुविधाओं का ऐक्सेस मिलता है. साथ ही, सबसे नए वेब प्लैटफ़ॉर्म एपीआई को टेस्ट किया जा सकता है और उपयोगकर्ताओं के आने से पहले ही अपनी साइट पर समस्याओं का पता लगाया जा सकता है!
Chrome DevTools टीम से संपर्क करना
पोस्ट में हुई नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी चीज़ के बारे में, नीचे दिए गए विकल्पों का इस्तेमाल करें.
- crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
- DevTools में ज़्यादा विकल्प
> सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें. - @ChromeDevTool पर ट्वीट करें.
- हमारे DevTools YouTube वीडियो या DevTools सलाह YouTube वीडियो में नया क्या है पर टिप्पणी करें.