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

Ergün Erdogmus
Ergün Erdogmus
X
Jecelyn Yeen

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

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

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

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

इस ब्लॉग पोस्ट में यह माना गया है कि आपको रिकॉर्डर के बारे में बुनियादी जानकारी पहले से ही है. अगर आपने 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 से बाहर निकले बिना ही रिकॉर्डिंग को फिर से चलाया जा सके.

एक्सटेंशन को फिर से चलाने की सुविधा से, एक्सटेंशन को 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 Actions की मदद से, इस प्रोसेस को ऑटोमेट करने का उदाहरण यहां दिया गया है: 

# .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 से जुड़ी किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, नीचे दिए गए विकल्पों का इस्तेमाल करें.