Chrome DevTools Recorder ছাড়িয়ে ব্যবহারকারীর প্রবাহকে কাস্টমাইজ এবং স্বয়ংক্রিয় করুন

Ergün Erdogmus

Jecelyn Yeen

আসুন স্বীকার করি, স্বয়ংক্রিয় পরীক্ষা লেখা একজন বিকাশকারীর জীবনে সবচেয়ে মজার জিনিস নয়। বিকাশকারী হিসাবে, আমরা বৈশিষ্ট্য লিখতে, বাগগুলি ঠিক করতে এবং বিশ্বের উন্নতি করতে চাই! যাইহোক, যখন আমাদের ওয়ার্কফ্লোতে স্বয়ংক্রিয় পরীক্ষা না থাকে, দীর্ঘ মেয়াদে, জিনিসগুলি বেশ "বাগি" হতে পারে। সুতরাং, আমরাও মনে করি যে স্বয়ংক্রিয় পরীক্ষা লেখা গুরুত্বপূর্ণ।

Chrome DevTools-এ রেকর্ডার প্যানেলের সাহায্যে, আপনি ব্যবহারকারীর প্রবাহ রেকর্ড করতে এবং রিপ্লে করতে পারেন, বিভিন্ন ফর্ম্যাটে (উদাহরণস্বরূপ, টেস্ট স্ক্রিপ্ট) বিভিন্ন থার্ড-পার্টি এক্সটেনশন এবং লাইব্রেরির মাধ্যমে রপ্তানি করতে পারেন, পাপেটিয়ার রিপ্লে লাইব্রেরির সাথে ব্যবহারকারীর প্রবাহকে কাস্টমাইজ করতে পারেন এবং তাদের সাথে একীভূত করতে পারেন। আপনার বিদ্যমান কর্মপ্রবাহ।

এই ব্লগ পোস্টে, আমরা আলোচনা করতে যাচ্ছি:

• কিভাবে রপ্তানি করা যায় এবং ব্যবহারকারীর প্রবাহকে প্রোগ্রামগতভাবে রিপ্লে করা যায়।
• Puppeteer Replay এর সাহায্যে কিভাবে আপনার ব্যবহারকারীর প্রবাহ কাস্টমাইজ করবেন।
• আপনার সিআই/সিডি ওয়ার্কফ্লোগুলির সাথে কীভাবে একীভূত করবেন।

এই ব্লগ পোস্টটি অনুমান করে আপনি ইতিমধ্যেই রেকর্ডারের মূল বিষয়গুলি জানেন৷ আপনি যদি রেকর্ডারে নতুন হন, শুরু করতে এই সংক্ষিপ্ত পরিচায়ক টিউটোরিয়াল এবং ভিডিও নির্দেশিকা অনুসরণ করুন।

ব্যবহারকারীর প্রবাহ রপ্তানি করুন এবং প্রোগ্রামগতভাবে রিপ্লে করুন

ডিফল্টরূপে, রেকর্ডার আপনাকে এই রেকর্ডিংগুলিকে একটি Puppeteer বা Puppeteer রিপ্লে স্ক্রিপ্ট বা একটি সাধারণ JSON ফাইল হিসাবে রপ্তানি করার ক্ষমতা দেয়৷

একবার আপনি JSON ফাইল হিসাবে ব্যবহারকারীর প্রবাহ রপ্তানি করলে, আপনার কাছে এটিকে আবার রেকর্ডার প্যানেলে আমদানি করার এবং এটিকে পুনরায় চালানোর বা এটিকে পুনরায় চালানোর জন্য বহিরাগত লাইব্রেরি ব্যবহার করার বিকল্প রয়েছে। পাপেটিয়ার রিপ্লে লাইব্রেরিটি উপলব্ধ লাইব্রেরির মধ্যে একটি।

Puppeteer রিপ্লে দিয়ে রিপ্লে করুন

পাপেটিয়ার রিপ্লে ইনস্টল করতে সংগ্রহস্থলের নির্দেশাবলী অনুসরণ করুন ।

ধরা যাক আপনি 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

ঐচ্ছিকভাবে, আপনি রেকর্ডিং চালানোর জন্য একটি npm স্ক্রিপ্ট যোগ করতে পারেন; package.json এর scripts ক্ষেত্রে এই লাইনটি যোগ করুন:

"replay-all": "replay recordings"

এর সাথে, আপনি সমস্ত রেকর্ডিং পুনরায় প্লে করতে কমান্ড লাইনে npm run replay-all চালাতে পারেন।

ডিফল্টরূপে UI ছাড়াই ব্যবহারকারী ফ্লো রিপ্লে করে (এছাড়াও হেডলেস মোড নামেও পরিচিত)। আপনি যদি UI দেখতে চান, কমান্ড চালানোর আগে PUPPETEER_HEADLESS এনভায়রনমেন্ট ভেরিয়েবলটিকে মিথ্যাতে সেট করুন।

PUPPETEER_HEADLESS=false npm run replay-all

তৃতীয় পক্ষের লাইব্রেরির সাথে রিপ্লে করুন

কিছু থার্ড-পার্টি লাইব্রেরি আছে যা আপনি Chrome ব্রাউজারের বাইরে রিপ্লে করতে ব্যবহার করতে পারেন। এখানে লাইব্রেরির সম্পূর্ণ তালিকা রয়েছে।

উদাহরণস্বরূপ, TestCafe একটি এন্ড-টু-এন্ড টেস্টিং ফ্রেমওয়ার্ক। এটি সাফারি এবং আরও অনেক কিছুর সাথে 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 কাস্টম স্ক্রিপ্ট হিসাবে ব্যবহারকারীর প্রবাহ রেকর্ড এবং রপ্তানি করতে পারেন। স্ক্রিপ্টের সাহায্যে, আপনি আপনার অ্যাপ্লিকেশনের মাধ্যমে বহু-পদক্ষেপ ব্যবহারকারী প্রবাহের কার্যক্ষমতা পরীক্ষা করতে পারেন। এই স্ক্রিপ্টগুলি লেখা, যাইহোক, কখনও কখনও চ্যালেঞ্জিং হতে পারে।

উপরন্তু, যদি আপনার কাছে ইতিমধ্যেই টেস্টিং টুল থাকে, তাহলে সাইপ্রেস, নাইটওয়াচ, ওয়েবড্রাইভারআইও, টেস্টিং লাইব্রেরি এবং আরও অনেক কিছুর মতো বিভিন্ন টেস্ট স্ক্রিপ্টে ব্যবহারকারীর প্রবাহ রপ্তানি করার জন্য এক্সটেনশন রয়েছে। এখানে সম্পূর্ণ তালিকা আছে. এটি আপনাকে এবং আপনার দলকে দ্রুত পরীক্ষা লেখা শুরু করতে সাহায্য করতে পারে।

প্রোগ্রামগতভাবে বিভিন্ন পরীক্ষার স্ক্রিপ্টে রূপান্তর করুন

এক্সটেনশনগুলির উপরে, এই পরীক্ষা প্রদানকারীর বেশিরভাগই আপনাকে একাধিক JSON ব্যবহারকারীর প্রবাহকে প্রোগ্রামে রূপান্তর করতে সাহায্য করার জন্য লাইব্রেরি প্রকাশ করে ।

উদাহরণস্বরূপ, সাইপ্রেস পরীক্ষায় ব্যবহারকারীর প্রবাহ রপ্তানি করতে @cypress/chrome-recorder লাইব্রেরি ব্যবহার করুন।

npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json

এক্সটেনশন সহ ব্যবহারকারীর প্রবাহ রিপ্লে করুন

Chrome 112 থেকে শুরু করে, আপনি এখন রেকর্ডিং রিপ্লে করার জন্য এক্সটেনশন ব্যবহার করে আপনার অভিজ্ঞতা বাড়াতে পারেন। এই এক্সটেনশনগুলি আপনাকে DevTools ছেড়ে না গিয়ে রেকর্ডিং পুনরায় প্লে করার জন্য তৃতীয় পক্ষের পরিষেবা এবং পরিকাঠামোকে নির্বিঘ্নে সংহত করতে দেয়৷

শুরু করতে, উপলব্ধ এক্সটেনশনগুলির তালিকা অন্বেষণ করুন বা কীভাবে আপনার নিজস্ব কাস্টম এক্সটেনশন তৈরি করবেন তা শিখুন৷

আপনার নিজস্ব এক্সটেনশন বা লাইব্রেরি তৈরি করুন

পর্দার পিছনে, সমস্ত এক্সটেনশন এবং লাইব্রেরি পাপেটিয়ার রিপ্লে লাইব্রেরির উপরে নির্মিত। আপনাকে ব্যবহারকারীর ফ্লো রিপ্লে করার অনুমতি দেওয়া ছাড়াও, Puppeteer Replay আপনাকে ব্যবহারকারীর প্রবাহের রিপ্লে কাস্টমাইজ বা রূপান্তর করতে দিয়ে API গুলি অফার করে।

ব্যবহারকারীর প্রবাহ রিপ্লে কাস্টমাইজ করুন

আসুন একটি স্ক্রিনশট প্লাগইন তৈরি করি। প্রতিটি ব্যবহারকারী প্রবাহের জন্য, আমরা চাই:

• প্রতিটি ধাপের শেষে একটি স্ক্রিনশট নিতে এবং _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.

ব্যবহারকারী প্রবাহ রূপান্তর

ব্যবহারকারীর প্রবাহকে কাস্টমাইজ করার আরেকটি উপায় হল একে বিভিন্ন ফরম্যাটে রূপান্তর করা (উদাহরণস্বরূপ, সাইপ্রেস, বা নাইটওয়াচ টেস্ট স্ক্রিপ্ট)।

উদাহরণস্বরূপ, আপনার ব্যবহারকারী প্রবাহে একটি url নেভিগেট করার একটি ধাপ রয়েছে। JSON ফাইলটি দেখতে কেমন তা এখানে:

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

ধাপটিকে জাভাস্ক্রিপ্টে রূপান্তর করতে আপনি একটি স্ট্রিংফাই প্লাগইন তৈরি করতে পারেন। তারা এটি কিভাবে করে তা দেখতে আপনি অন্যান্য বিদ্যমান লাইব্রেরিগুলিও দেখতে পারেন।

উদাহরণস্বরূপ, নিম্নলিখিত কোড স্নিপেট দেখায় কিভাবে 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 ওয়েব দোকানে প্রকাশ করতে পারেন৷

কিভাবে স্থানীয়ভাবে ডিবাগ করতে হয় এবং একটি Chrome এক্সটেনশন প্রকাশ করতে হয় তা জানতে এই ডেমো এবং নির্দেশাবলী দেখুন।

আপনার CI/CD পাইপলাইনের সাথে একীভূত করুন

এটি করার একাধিক উপায় রয়েছে এবং সেখানে অনেকগুলি সরঞ্জাম রয়েছে। এখানে 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:30pm এ

GitHub অ্যাকশনগুলি ছাড়াও, আপনি আপনার প্রিয় ক্লাউড সরবরাহকারীদের সাথেও সংহত করতে পারেন। সমান্তরালভাবে 10,000 ইউজার ফ্লো চালানোর জন্য আপনি কীভাবে Google Cloud Run Job ব্যবহার করতে পারেন তা দেখতে এই ডেমোতে যান!

উপসংহার

এই ব্লগ পোস্টে, আমরা JSON ফাইল হিসাবে ব্যবহারকারীর প্রবাহ রপ্তানি করার বিভিন্ন বিকল্প নিয়ে আলোচনা করেছি, PuppeteerReplayExtension এর সাথে রিপ্লেগুলি কাস্টমাইজ করতে, PuppeteerStringifyExtension এর সাথে ব্যবহারকারীর প্রবাহকে রূপান্তরিত করতে এবং সেগুলিকে আপনার CI ওয়ার্কফ্লোতে একীভূত করতে।

আমি আশা করি এই ব্লগ পোস্টটি আপনাকে কিভাবে রেকর্ডার প্যানেল ব্যবহার করতে পারেন এবং আপনার প্রজেক্টে একটি টেস্টিং ওয়ার্কফ্লোকে একীভূত করার জন্য প্রদত্ত টুলগুলি সম্পর্কে কিছু ধারণা দিয়েছে। আপনি কি নির্মাণ করবেন তা দেখার জন্য অপেক্ষা করতে পারি না!

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসাবে Chrome Canary , Dev , বা Beta ব্যবহার করার কথা বিবেচনা করুন৷ এই প্রিভিউ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, আপনাকে অত্যাধুনিক ওয়েব প্ল্যাটফর্ম APIগুলি পরীক্ষা করতে দেয় এবং আপনার ব্যবহারকারীদের করার আগে আপনার সাইটে সমস্যাগুলি খুঁজে পেতে সহায়তা করে!

Chrome DevTools টিমের সাথে যোগাযোগ করুন

নতুন বৈশিষ্ট্য, আপডেট বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

• crbug.com এ আমাদের কাছে প্রতিক্রিয়া এবং বৈশিষ্ট্যের অনুরোধ জমা দিন।
• more_vert আরও বিকল্প > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন।
• @ ChromeDevTools-এ টুইট করুন।
• DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷