Chrome DevTools रिकॉर्डर के अलावा, यूज़र फ़्लो को पसंद के मुताबिक बनाना और ऑटोमेट करना

Ergün Erdogmus

Jecelyn Yeen

मान लेते हैं कि डेवलपर के लिए, ऑटोमेटेड टेस्ट लिखना सबसे मज़ेदार चीज़ नहीं है. डेवलपर होने के नाते, हम सुविधाएं लिखना चाहते हैं, गड़बड़ियां ठीक करना चाहते हैं, और दुनिया को बेहतर बनाना चाहते हैं! हालांकि, अगर हमारे वर्कफ़्लो में ऑटोमेटेड टेस्टिंग की सुविधा नहीं है, तो आने वाले समय में इसकी स्थिति “मुश्किल” हो सकती है. इसलिए, हमें यह भी लगता है कि ऑटोमेटेड टेस्ट को लिखना बहुत ज़रूरी है.

Chrome DevTools में Recorder पैनल की मदद से, यूज़र फ़्लो को रिकॉर्ड किया जा सकता है और फिर से चलाया जा सकता है. साथ ही, उन्हें तीसरे पक्ष के एक्सटेंशन और लाइब्रेरी के ज़रिए अलग-अलग फ़ॉर्मैट (उदाहरण के लिए, टेस्ट स्क्रिप्ट) में एक्सपोर्ट किया जा सकता है. Puppeteer Replay लाइब्रेरी की मदद से यूज़र फ़्लो को पसंद के मुताबिक बनाया जा सकता है और उन्हें अपने मौजूदा वर्कफ़्लो के साथ इंटिग्रेट किया जा सकता है.

इस ब्लॉग पोस्ट में, हम इन विषयों के बारे में चर्चा करेंगे:

• प्रोग्राम बनाकर यूज़र फ़्लो को एक्सपोर्ट करने और फिर से चलाने का तरीका.
• Puppeteer Replay की मदद से, अपने यूज़र फ़्लो को पसंद के मुताबिक बनाने का तरीका.
• अपने सीआई/सीडी वर्कफ़्लो के साथ इंटिग्रेट करने का तरीका.

इस ब्लॉग पोस्ट के हिसाब से, आपको Recorder के बारे में बुनियादी जानकारी पहले से ही मिलेगी. अगर आपने Recorder का इस्तेमाल पहले कभी नहीं किया है, तो इसका इस्तेमाल शुरू करने के लिए, शुरुआती जानकारी के लिए यह छोटा ट्यूटोरियल और वीडियो गाइड देखें.

यूज़र फ़्लो को एक्सपोर्ट करें और प्रोग्राम के हिसाब से फिर से चलाएं

रिकॉर्डर, डिफ़ॉल्ट रूप से आपको इन रिकॉर्डिंग को Puppeteer या Puppeteer Replay स्क्रिप्ट या सामान्य JSON फ़ाइल के तौर पर एक्सपोर्ट करने की सुविधा देता है.

यूज़र फ़्लो को JSON फ़ाइलों के तौर पर एक्सपोर्ट करने के बाद, आपके पास उसे रिकॉर्डर पैनल में वापस इंपोर्ट करने और उसे फिर से चलाने का विकल्प होता है. इसके अलावा, उसे फिर से चलाने के लिए बाहरी लाइब्रेरी का इस्तेमाल भी किया जा सकता है. Puppeteer Replay लाइब्रेरी यहां उपलब्ध लाइब्रेरी में से एक है.

Puppeteer रीप्ले की मदद से फिर से खेलें

Puppeteer Replay इंस्टॉल करने के लिए, डेटा स्टोर करने की जगह पर निर्देशों का पालन करें.

मान लें कि आपने JSON यूज़र फ़्लो को recordings फ़ोल्डर (उदाहरण के लिए, डेमो प्रोजेक्ट) में सेव किया है. एक या उससे ज़्यादा यूज़र फ़्लो लागू करने के लिए, यहां दिए गए निर्देश का इस्तेमाल किया जा सकता है:

# 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 एपीआई को बढ़ाते हैं.

फ़ाइल सेव करें. इसके बाद, हम नीचे दिए गए निर्देश का इस्तेमाल करके, इस एक्सटेंशन के साथ यूज़र फ़्लो चला सकते हैं:

# 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.

यूज़र फ़्लो को बदलें

यूज़र फ़्लो को पसंद के मुताबिक बनाने का दूसरा तरीका यह है कि आप उसे अलग-अलग फ़ॉर्मैट में बदलें. उदाहरण के लिए, Cypress या Nightwatch टेस्ट स्क्रिप्ट.

उदाहरण के लिए, आपके यूज़र फ़्लो में, यूआरएल पर जाने का तरीका शामिल होता है. JSON फ़ाइल इस तरह दिखती है:

{
  "title": "order-a-coffee",
  "steps": [
    {
      "type": "navigate",
      "url": "https://coffee-cart.netlify.app/"
    },
    …
  ]
}

इस स्टेप को JavaScript में बदलने के लिए, स्ट्रिंग का प्लगिन बनाया जा सकता है. यह जानने के लिए कि वे लाइब्रेरी कैसे काम करती हैं, आपके पास दूसरी मौजूदा लाइब्रेरी देखने का भी विकल्प है.

उदाहरण के लिए, नीचे दिया गया कोड स्निपेट दिखाता है कि 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 Recorder की कोई ज़रूरत ही नहीं होती.

अपना रीप्ले एक्सटेंशन बनाने के लिए, रीप्ले एक्सटेंशन से जुड़े दस्तावेज़ देखें. साथ ही, निर्देश पाने के लिए एक्सटेंशन का एक उदाहरण देखें.

Chrome एक्सटेंशन पब्लिश करना

यूज़र फ़्लो को पसंद के मुताबिक बनाने और उसे पूरी तरह बदलने के बाद, आपके पास उन्हें Chrome एक्सटेंशन के तौर पर पैकेज करने और Chrome वेब स्टोर पर पब्लिश करने का विकल्प होता है.

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 Actions के अलावा, आप अपनी पसंदीदा क्लाउड सेवा देने वाली कंपनियों के साथ भी इंटिग्रेट कर सकते हैं. Google Cloud Run जॉब का इस्तेमाल करके, एक साथ 10,000 यूज़र फ़्लो लागू करने का तरीका जानने के लिए, इस डेमो पर जाएं!

नतीजा

इस ब्लॉग पोस्ट में, हमने यूज़र फ़्लो को JSON फ़ाइलों के तौर पर एक्सपोर्ट करने, PuppeteerReplayExtension की मदद से रीप्ले को पसंद के मुताबिक बनाने, PuppeteerStringifyExtension की मदद से यूज़र फ़्लो को बदलने, और उन्हें अपने सीआई वर्कफ़्लो में इंटिग्रेट करने के अलग-अलग विकल्पों के बारे में बताया है.

हमें उम्मीद है कि इस ब्लॉग पोस्ट से आपको इस बारे में कुछ आइडिया मिलेगा कि Recorder पैनल का इस्तेमाल कैसे किया जा सकता है. साथ ही, आपने अपने प्रोजेक्ट में टेस्टिंग वर्कफ़्लो को आसानी से इंटिग्रेट करने के लिए दिए गए टूल के बारे में भी बताया होगा. हमें बेसब्री से यह देखने का बेसब्री से इंतज़ार है कि आपके पास कैसा टूल है!

झलक दिखाने वाले चैनलों को डाउनलोड करें

Chrome Canary, Dev या बीटा को अपने डिफ़ॉल्ट डेवलपमेंट ब्राउज़र के तौर पर इस्तेमाल करें. झलक दिखाने वाले इन चैनलों की मदद से, DevTools की नई सुविधाओं को ऐक्सेस किया जा सकता है और वेब प्लैटफ़ॉर्म के बेहतरीन एपीआई की जांच की जा सकती है. साथ ही, उपयोगकर्ताओं से पहले ही अपनी साइट की समस्याओं का पता लगाया जा सकता है!

Chrome DevTools की टीम से संपर्क करना

पोस्ट में नई सुविधाओं और बदलावों या DevTools से जुड़ी किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.

• crbug.com के ज़रिए हमें कोई सुझाव या फ़ीडबैक सबमिट करें.
• DevTools में ज़्यादा विकल्प     > सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें का इस्तेमाल करके DevTools से जुड़ी समस्या की शिकायत करें.
• @ChromeDevTools पर ट्वीट करें.
• DevTools YouTube वीडियो या DevTools के बारे में सलाह YouTube वीडियो में नया क्या है, इस पर टिप्पणी करें.