Chrome DevTools রেকর্ডার প্যানেলের এই ব্যাপক বৈশিষ্ট্যের রেফারেন্সে ব্যবহারকারীর প্রবাহ ভাগ করে নেওয়ার উপায়গুলি আবিষ্কার করুন, তাদের সম্পাদনা করুন এবং তাদের পদক্ষেপগুলি দেখুন৷
রেকর্ডার প্যানেলের সাথে কাজ করার মূল বিষয়গুলি শিখতে, রেকর্ড, রিপ্লে এবং ব্যবহারকারীর প্রবাহ পরিমাপ দেখুন।
শর্টকাট শিখুন এবং কাস্টমাইজ করুন
রেকর্ডারটি দ্রুত নেভিগেট করতে শর্টকাট ব্যবহার করুন। ডিফল্ট শর্টকাটগুলির একটি তালিকার জন্য, রেকর্ডার প্যানেল কীবোর্ড শর্টকাটগুলি দেখুন।
রেকর্ডারে ডানদিকে সমস্ত শর্টকাট তালিকাভুক্ত একটি ইঙ্গিত খুলতে, উপরের ডানদিকে কোণায় শর্টকাট দেখান ক্লিক করুন৷
রেকর্ডার শর্টকাট কাস্টমাইজ করতে:
- খোলা
সেটিংস > শর্টকাট । - রেকর্ডার বিভাগে নিচে স্ক্রোল করুন।
- কাস্টমাইজ শর্টকাটগুলিতে পদক্ষেপগুলি অনুসরণ করুন৷
ব্যবহারকারীর প্রবাহ সম্পাদনা করুন
রেকর্ডার প্যানেলের উপরে, আপনার জন্য বিকল্প রয়েছে:
- একটি নতুন রেকর্ডিং যোগ করুন
. একটি নতুন রেকর্ডিং যোগ করতে + আইকনে ক্লিক করুন। - সব রেকর্ডিং দেখুন
. ড্রপ-ডাউনটি সংরক্ষিত রেকর্ডিংয়ের তালিকা দেখায়। সংরক্ষিত রেকর্ডিংয়ের তালিকা প্রসারিত এবং পরিচালনা করতে N রেকর্ডিং(গুলি) বিকল্পটি নির্বাচন করুন। 
একটি রেকর্ডিং রপ্তানি করুন
. স্ক্রিপ্টটিকে আরও কাস্টমাইজ করতে বা বাগ রিপোর্টিংয়ের উদ্দেশ্যে এটি ভাগ করতে, আপনি নিম্নলিখিত ফর্ম্যাটে ব্যবহারকারীর প্রবাহকে রপ্তানি করতে পারেন:- JSON ফাইল।
- @পুপেটিয়ার/রিপ্লে স্ক্রিপ্ট।
- পুতুলের স্ক্রিপ্ট।
- পাপেটিয়ার (ফায়ারফক্সের জন্য) স্ক্রিপ্ট।
- পুতুল ( বাতিঘর বিশ্লেষণ সহ)।
বিন্যাস সম্পর্কে আরও তথ্যের জন্য, একটি ব্যবহারকারী প্রবাহ রপ্তানি দেখুন।
একটি রেকর্ডিং আমদানি করুন
. শুধুমাত্র JSON ফর্ম্যাটে।একটি রেকর্ডিং মুছুন
. নির্বাচিত রেকর্ডিং মুছুন।
আপনি সম্পাদনা বোতামে ক্লিক করে রেকর্ডিংয়ের নাম সম্পাদনা করতে পারেন 
এর পাশে
শেয়ার ব্যবহারকারী প্রবাহ
আপনি রেকর্ডারে ব্যবহারকারীর প্রবাহ রপ্তানি এবং আমদানি করতে পারেন। এটি বাগ রিপোর্টিংয়ের জন্য দরকারী কারণ আপনি একটি বাগ পুনরুত্পাদনকারী পদক্ষেপগুলির একটি সঠিক রেকর্ড ভাগ করতে পারেন৷ আপনি এক্সটার্নাল লাইব্রেরির সাথে এটি এক্সপোর্ট এবং রিপ্লে করতে পারেন।
একটি ব্যবহারকারী প্রবাহ রপ্তানি করুন
একটি ব্যবহারকারী প্রবাহ রপ্তানি করতে:
- আপনি রপ্তানি করতে চান ব্যবহারকারী প্রবাহ খুলুন.
রেকর্ডার প্যানেলের শীর্ষে রপ্তানি ক্লিক করুন।
ড্রপ-ডাউন তালিকা থেকে নিম্নলিখিত ফর্ম্যাটগুলির মধ্যে একটি নির্বাচন করুন:
- JSON ফাইল । একটি JSON ফাইল হিসাবে রেকর্ডিং ডাউনলোড করুন.
- @পুতুল/রিপ্লে । একটি Puppeteer রিপ্লে স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন.
- পুতুল একটি Puppeteer স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন.
- পুতুল (ফায়ারফক্সের জন্য) । ফায়ারফক্স স্ক্রিপ্টের জন্য একটি Puppeteer হিসাবে রেকর্ডিং ডাউনলোড করুন.
- পুতুল (বাতিঘর বিশ্লেষণ সহ) । একটি এমবেডেড লাইটহাউস বিশ্লেষণ সহ একটি Puppeteer স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন৷
- রেকর্ডারের এক্সপোর্ট এক্সটেনশন দ্বারা প্রদত্ত এক বা একাধিক বিকল্প।
ফাইলটি সংরক্ষণ করুন।
আপনি প্রতিটি ডিফল্ট রপ্তানি বিকল্পের সাথে নিম্নলিখিতগুলি করতে পারেন:
- JSON । মানব-পঠনযোগ্য JSON অবজেক্ট সম্পাদনা করুন এবং JSON ফাইলটি রেকর্ডারে আবার আমদানি করুন ।
- @পুতুল/রিপ্লে । পাপেটিয়ার রিপ্লে লাইব্রেরির সাথে স্ক্রিপ্টটি রিপ্লে করুন। একটি @puppeteer/রিপ্লে স্ক্রিপ্ট হিসাবে রপ্তানি করার সময়, পদক্ষেপগুলি একটি JSON অবজেক্ট থাকে। এই বিকল্পটি নিখুঁত যদি আপনি আপনার CI/CD পাইপলাইনের সাথে একীভূত করতে চান তবে এখনও JSON হিসাবে পদক্ষেপগুলি সম্পাদনা করার নমনীয়তা আছে, পরে রূপান্তর করুন এবং রেকর্ডারে আবার আমদানি করুন৷
- পুতুলের স্ক্রিপ্ট । পাপেটিয়ারের সাথে স্ক্রিপ্টটি রিপ্লে করুন। যেহেতু ধাপগুলি জাভাস্ক্রিপ্টে রূপান্তরিত হয়েছে, আপনি আরও সূক্ষ্ম কাস্টমাইজেশন করতে পারেন, উদাহরণস্বরূপ, ধাপগুলি লুপ করা। একটি সতর্কতা, আপনি এই স্ক্রিপ্টটি আবার রেকর্ডারে আমদানি করতে পারবেন না।
- পুতুল (ফায়ারফক্সের জন্য) । WebDriver BiDi সমর্থনের অংশ হিসাবে, আপনি Chrome এবং Firefox উভয়েই এই Puppeteer স্ক্রিপ্টটি চালাতে পারেন।
পুতুল (বাতিঘর বিশ্লেষণ সহ) । এই রপ্তানি বিকল্পটি আগেরটির মতই কিন্তু এতে এমন কোড রয়েছে যা একটি বাতিঘর বিশ্লেষণ তৈরি করে।
স্ক্রিপ্টটি চালান এবং একটি
flow.report.htmlফাইলে আউটপুট পরীক্ষা করুন:# npm i puppeteer lighthouse node your_export.js
একটি এক্সটেনশন ইনস্টল করে একটি কাস্টম বিন্যাসে রপ্তানি করুন৷
রেকর্ডার এক্সটেনশন দেখুন।
একটি ব্যবহারকারী প্রবাহ আমদানি করুন
একটি ব্যবহারকারী প্রবাহ আমদানি করতে:
- আমদানিতে ক্লিক করুন
রেকর্ডার প্যানেলের শীর্ষে বোতাম। 
- রেকর্ড করা ব্যবহারকারীর প্রবাহ সহ JSON ফাইলটি নির্বাচন করুন।
- ক্লিক করুন
আমদানিকৃত ব্যবহারকারী প্রবাহ চালানোর জন্য রিপ্লে বোতাম।
বাহ্যিক লাইব্রেরির সাথে রিপ্লে করুন
Puppeteer Replay হল একটি ওপেন সোর্স লাইব্রেরি যা Chrome DevTools টিম দ্বারা রক্ষণাবেক্ষণ করে৷ এটি পাপেটিয়ারের উপরে নির্মিত। এটি একটি কমান্ড লাইন টুল, আপনি এটি দিয়ে JSON ফাইল রিপ্লে করতে পারেন।
তা ছাড়াও, আপনি নিম্নলিখিত 3য় পক্ষের লাইব্রেরিগুলির সাথে JSON ফাইলগুলিকে রূপান্তর এবং পুনরায় প্লে করতে পারেন৷
রূপান্তর JSON ব্যবহারকারী কাস্টম স্ক্রিপ্টে প্রবাহ:
- সাইপ্রেস ক্রোম রেকর্ডার । আপনি ব্যবহারকারীর প্রবাহ JSON ফাইলগুলিকে সাইপ্রেস টেস্ট স্ক্রিপ্টে রূপান্তর করতে এটি ব্যবহার করতে পারেন। এটি কর্মে দেখতে এই ডেমো দেখুন।
- নাইটওয়াচ ক্রোম রেকর্ডার । আপনি ব্যবহারকারীর প্রবাহ JSON ফাইলকে নাইটওয়াচ টেস্ট স্ক্রিপ্টে রূপান্তর করতে এটি ব্যবহার করতে পারেন।
- কোডসেপ্টজেএস ক্রোম রেকর্ডার । আপনি ব্যবহারকারীর প্রবাহ JSON ফাইলগুলিকে CodeceptJS পরীক্ষার স্ক্রিপ্টে রূপান্তর করতে এটি ব্যবহার করতে পারেন।
JSON ব্যবহারকারীর প্রবাহ পুনরায় চালান:
- টেস্টক্যাফের সাথে রিপ্লে করুন । আপনি ব্যবহারকারীর প্রবাহ JSON ফাইলগুলি পুনরায় প্লে করতে এবং এই রেকর্ডিংয়ের জন্য পরীক্ষার প্রতিবেদন তৈরি করতে TestCafe ব্যবহার করতে পারেন।
- সস ল্যাবসের সাথে রিপ্লে করুন । আপনি saucectl ব্যবহার করে সস ল্যাবগুলিতে JSON ফাইলগুলি পুনরায় প্লে করতে পারেন।
ডিবাগ ব্যবহারকারী প্রবাহ
যেকোনো কোডের মতো, কখনও কখনও আপনাকে রেকর্ড করা ব্যবহারকারীর প্রবাহ ডিবাগ করতে হবে।
আপনাকে ডিবাগ করতে সাহায্য করতে, রেকর্ডার প্যানেল আপনাকে রিপ্লে ধীর করতে, ব্রেকপয়েন্ট সেট করতে, এক্সিকিউশনের মধ্য দিয়ে ধাপে ধাপে ধাপে সমান্তরালভাবে বিভিন্ন ফর্ম্যাটে কোড পরিদর্শন করতে দেয়।
রিপ্লে স্লো ডাউন
ডিফল্টরূপে, রেকর্ডার ব্যবহারকারীর প্রবাহকে যত দ্রুত সম্ভব রিপ্লে করে। রেকর্ডিংয়ে কী ঘটে তা বোঝার জন্য, আপনি রিপ্লে গতি কমিয়ে দিতে পারেন:
- খুলুন
ড্রপ-ডাউন মেনু রিপ্লে করুন । - রিপ্লে গতির বিকল্পগুলির মধ্যে একটি বেছে নিন:
- সাধারণ (ডিফল্ট)
- ধীর
- খুব ধীর
- অত্যন্ত ধীর
কোড পরিদর্শন করুন
বিভিন্ন বিন্যাসে একটি ব্যবহারকারী প্রবাহের কোড পরিদর্শন করতে:
- রেকর্ডার প্যানেলে একটি রেকর্ডিং খুলুন।
- ধাপ তালিকার উপরের ডানদিকে কোড দেখান ক্লিক করুন।
- রেকর্ডারটি ধাপ এবং তাদের কোডের পাশাপাশি একটি দৃশ্য দেখায়।
- আপনি যখন একটি ধাপের উপরে হোভার করেন, রেকর্ডারটি এক্সটেনশন দ্বারা প্রদত্ত কোডগুলি সহ যেকোনো বিন্যাসে তার নিজ নিজ কোড হাইলাইট করে।
আপনি ব্যবহারকারী প্রবাহ রপ্তানি করতে ব্যবহার করেন এমন একটি বিন্যাস নির্বাচন করতে বিন্যাস ড্রপ-ডাউন তালিকা প্রসারিত করুন।
এটি তিনটি ডিফল্ট ফরম্যাটের একটি হতে পারে (JSON, @puppeteer/replay , Puppeteer স্ক্রিপ্ট বা একটি এক্সটেনশন দ্বারা প্রদত্ত একটি বিন্যাস।
ধাপ প্যারামিটার এবং মান সম্পাদনা করে আপনার রেকর্ডিং ডিবাগ করতে এগিয়ে যান। কোড ভিউ সম্পাদনাযোগ্য নয় কিন্তু আপনি বাম দিকের ধাপে পরিবর্তন করার সাথে সাথে এটি আপডেট হয়।
ব্রেকপয়েন্ট সেট করুন এবং ধাপে ধাপে চালান
একটি ব্রেকপয়েন্ট সেট করতে এবং ধাপে ধাপে চালাতে:
- উপর হোভার
রেকর্ডিংয়ের যেকোনো ধাপের পাশে বৃত্ত। বৃত্তটি a এ পরিণত হয় 
ব্রেকপয়েন্ট আইকন। - ক্লিক করুন
ব্রেকপয়েন্ট আইকন এবং রেকর্ডিং রিপ্লে . ফাঁসি ব্রেকপয়েন্টে বিরতি দেয়। 
- সঞ্চালনের মাধ্যমে ধাপে ধাপে, ক্লিক করুন
রেকর্ডার প্যানেলের শীর্ষে অ্যাকশন বারে এক ধাপ বোতাম চালান । - রিপ্লে বন্ধ করতে, ক্লিক করুন
রিপ্লে বাতিল করুন ।
পদক্ষেপগুলি সম্পাদনা করুন
আপনি ক্লিক করে রেকর্ডিং যে কোনো ধাপ সম্পাদনা করতে পারেন 
এটির পাশের বোতাম, রেকর্ডিংয়ের সময় এবং পরে।
আপনি অনুপস্থিত পদক্ষেপগুলি যোগ করতে এবং দুর্ঘটনাক্রমে রেকর্ড করাগুলিকে সরাতে পারেন।
পদক্ষেপ যোগ করুন
কখনও কখনও, আপনাকে ম্যানুয়ালি পদক্ষেপগুলি যোগ করতে হতে পারে। উদাহরণস্বরূপ, রেকর্ডার স্বয়ংক্রিয়ভাবে hover ইভেন্টগুলি ক্যাপচার করে না কারণ এটি রেকর্ডিংকে দূষিত করে এবং এই ধরনের সমস্ত ইভেন্ট দরকারী নয়। যাইহোক, UI উপাদান যেমন ড্রপ-ডাউন মেনু শুধুমাত্র hover প্রদর্শিত হতে পারে। আপনি ম্যানুয়ালি ব্যবহারকারীর প্রবাহে hover পদক্ষেপগুলি যুক্ত করতে পারেন যা এই জাতীয় উপাদানগুলির উপর নির্ভর করে।
ম্যানুয়ালি একটি ধাপ যোগ করতে:
- এই ডেমো পৃষ্ঠাটি খুলুন এবং একটি নতুন রেকর্ডিং শুরু করুন।
- ভিউপোর্টের উপাদানটির উপর হভার করুন। একটি কর্ম মেনু পপ আপ.
- মেনু থেকে একটি অ্যাকশন বেছে নিন এবং রেকর্ডিং শেষ করুন। রেকর্ডার শুধুমাত্র ক্লিক ইভেন্ট ক্যাপচার.
- ক্লিক করে রেকর্ডিং পুনরায় চালানোর চেষ্টা করুন
রিপ্লে । রিপ্লে একটি সময় শেষ হওয়ার পরে ব্যর্থ হয় কারণ রেকর্ডার মেনুতে উপাদানটি অ্যাক্সেস করতে পারে না। 
- ক্লিক করুন
ক্লিকের ধাপের পাশে থ্রি-ডট বোতাম এবং আগে ধাপ যোগ করুন নির্বাচন করুন। 
- নতুন পদক্ষেপ প্রসারিত করুন। ডিফল্টরূপে, এতে
waitForElementটাইপ থাকে।typeপাশের মানটিতে ক্লিক করুন এবংhoverনির্বাচন করুন।
- পরবর্তী, নতুন ধাপের জন্য একটি উপযুক্ত নির্বাচক সেট করুন। ক্লিক করুন
নির্বাচন করুন , তারপর Hover over me!পপ-আপ মেনুর বাইরের উপাদান। নির্বাচক#clickableতে সেট করা হয়েছে।
- রেকর্ডিং আবার প্লে করার চেষ্টা করুন. যোগ করা হোভার ধাপের সাথে, রেকর্ডার সফলভাবে প্রবাহটি পুনরায় চালায়।
দাবী যোগ করুন
রেকর্ডিংয়ের সময়, আপনি জোর দিতে পারেন, উদাহরণস্বরূপ, HTML বৈশিষ্ট্য এবং জাভাস্ক্রিপ্ট বৈশিষ্ট্য। একটি দাবি যোগ করতে:
- একটি রেকর্ডিং শুরু করুন , উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় ।
দাবী যোগ করুন ক্লিক করুন।
রেকর্ডার একটি কনফিগারযোগ্য
waitForElementধাপ তৈরি করে।এই ধাপের জন্য নির্বাচকদের নির্দিষ্ট করুন ।
ধাপটি কনফিগার করুন কিন্তু তার
waitForElementপ্রকার পরিবর্তন করবেন না। উদাহরণস্বরূপ, আপনি নির্দিষ্ট করতে পারেন:- এইচটিএমএল অ্যাট্রিবিউট । বৈশিষ্ট্য যোগ করুন ক্লিক করুন এবং এই পৃষ্ঠার উপাদানগুলি ব্যবহার করে এমন বৈশিষ্ট্যের নাম এবং মান টাইপ করুন৷ উদাহরণস্বরূপ,
data-test: <value>। - জাভাস্ক্রিপ্ট সম্পত্তি । বৈশিষ্ট্য যোগ করুন ক্লিক করুন এবং JSON ফর্ম্যাটে সম্পত্তির নাম এবং মান টাইপ করুন। উদাহরণস্বরূপ,
{".innerText":"<text>"}। - অন্যান্য ধাপ বৈশিষ্ট্য . উদাহরণস্বরূপ,
visible: true।
- এইচটিএমএল অ্যাট্রিবিউট । বৈশিষ্ট্য যোগ করুন ক্লিক করুন এবং এই পৃষ্ঠার উপাদানগুলি ব্যবহার করে এমন বৈশিষ্ট্যের নাম এবং মান টাইপ করুন৷ উদাহরণস্বরূপ,
ব্যবহারকারীর বাকি প্রবাহ রেকর্ড করতে এগিয়ে যান এবং তারপর রেকর্ডিং বন্ধ করুন।
ক্লিক করুন
রিপ্লে । যদি একটি দাবী ব্যর্থ হয়, রেকর্ডার একটি সময় শেষ হওয়ার পরে একটি ত্রুটি প্রদর্শন করে।
এই কর্মপ্রবাহটি কার্যকরভাবে দেখতে নিম্নলিখিত ভিডিওটি দেখুন।
পদক্ষেপগুলি অনুলিপি করুন
সমগ্র ব্যবহারকারী প্রবাহ রপ্তানি করার পরিবর্তে, আপনি ক্লিপবোর্ডে একটি একক ধাপ অনুলিপি করতে পারেন:
- আপনি যে ধাপটি অনুলিপি করতে চান তাতে ডান-ক্লিক করুন বা ক্লিক করুন
এর পাশে তিন-বিন্দু আইকন। - ড্রপ-ডাউন মেনুতে, অনুলিপি হিসাবে ... বিকল্পগুলির মধ্যে একটি নির্বাচন করুন।
আপনি বিভিন্ন ফর্ম্যাটে পদক্ষেপগুলি অনুলিপি করতে পারেন: JSON, Puppeteer , @puppeteer/replay , এবং এক্সটেনশনগুলি দ্বারা সরবরাহ করা।
পদক্ষেপগুলি সরান
দুর্ঘটনাক্রমে রেকর্ড করা পদক্ষেপটি সরাতে, ধাপে ডান-ক্লিক করুন বা ক্লিক করুন 
এর পাশে তিন-বিন্দু আইকন এবং ধাপ সরান নির্বাচন করুন।
অতিরিক্তভাবে, রেকর্ডার স্বয়ংক্রিয়ভাবে প্রতিটি রেকর্ডিংয়ের শুরুতে দুটি পৃথক পদক্ষেপ যোগ করে:
- ভিউপোর্ট সেট করুন । আপনাকে ভিউপোর্টের মাত্রা, স্কেলিং এবং অন্যান্য বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করতে দেয়৷
- নেভিগেট করুন । URL সেট করে এবং প্রতিটি রিপ্লেতে স্বয়ংক্রিয়ভাবে পৃষ্ঠাটি রিফ্রেশ করে।
পৃষ্ঠাটি পুনরায় লোড না করে ইন-পেজ অটোমেশন সম্পাদন করতে, উপরে বর্ণিত নেভিগেশন ধাপটি সরান।
পদক্ষেপগুলি কনফিগার করুন
একটি ধাপ কনফিগার করতে:
এর ধরন নির্দিষ্ট করুন:
click,doubleClickকরুন,hover, (ইনপুট)change,keyUp,keyDown,scroll,close,navigate(একটি পৃষ্ঠায়),waitForElement,waitForExpressionবাsetViewport।অন্যান্য বৈশিষ্ট্য
typeমান উপর নির্ভর করে.typeনীচে প্রয়োজনীয় বৈশিষ্ট্যগুলি উল্লেখ করুন।
ঐচ্ছিক টাইপ-নির্দিষ্ট বৈশিষ্ট্য যোগ করতে এবং তাদের নির্দিষ্ট করতে সংশ্লিষ্ট বোতামগুলিতে ক্লিক করুন।
উপলব্ধ বৈশিষ্ট্যগুলির একটি তালিকার জন্য, ধাপ বৈশিষ্ট্য দেখুন।
একটি ঐচ্ছিক সম্পত্তি অপসারণ করতে, ক্লিক করুন 
এর পাশের বোতামটি সরান ।
একটি অ্যারের বৈশিষ্ট্যে বা থেকে একটি উপাদান যোগ করতে বা সরাতে, উপাদানটির পাশের + বা - বোতামে ক্লিক করুন।
ধাপ বৈশিষ্ট্য
প্রতিটি ধাপে নিম্নলিখিত ঐচ্ছিক বৈশিষ্ট্য থাকতে পারে:
-
target— Chrome DevTools প্রোটোকল (CDP) টার্গেটের জন্য একটি URL, ডিফল্টmainকীওয়ার্ড বর্তমান পৃষ্ঠাকে বোঝায়। -
assertedEventsযা শুধুমাত্র একটি এককnavigationইভেন্ট হতে পারে।
বেশিরভাগ ধাপের প্রকারের জন্য উপলব্ধ অন্যান্য সাধারণ বৈশিষ্ট্যগুলি হল:
-
frame— শূন্য-ভিত্তিক সূচীগুলির একটি অ্যারে যা একটি আইফ্রেম সনাক্ত করে যা নেস্ট করা যেতে পারে। উদাহরণস্বরূপ, আপনি একটি সেকেন্ডের (1) আইফ্রেমের মধ্যে প্রথম (0) আইফ্রেমটিকে[1, 0]হিসাবে চিহ্নিত করতে পারেন। -
timeout—একটি ধাপ চালানোর আগে অপেক্ষা করতে হবে অনেক মিলিসেকেন্ড। আরও তথ্যের জন্য, ধাপগুলির জন্য সময়সীমা সামঞ্জস্য করুন দেখুন। -
selectors- নির্বাচকদের একটি বিন্যাস। আরও তথ্যের জন্য, নির্বাচকদের বুঝুন দেখুন।
টাইপ-নির্দিষ্ট বৈশিষ্ট্য হল:
| টাইপ | সম্পত্তি | প্রয়োজন | বর্ণনা |
clickdoubleClick | offsetXoffsetY |  | উপাদান সামগ্রী বাক্সের উপরের-বাম দিকের সাথে সম্পর্কিত, পিক্সেলে |
clickdoubleClick | button | পয়েন্টার বোতাম: প্রাথমিক | সহায়ক | দ্বিতীয় | ফিরে | এগিয়ে | |
change | value |  | চূড়ান্ত মান |
keyDownkeyUp | key |  | মূল নাম |
scroll | xy | সম্পূর্ণ স্ক্রোল x এবং y পজিশনে পিক্সেল, ডিফল্ট 0 | |
navigate | url |  | লক্ষ্য URL |
waitForElement | operator | >= | == (ডিফল্ট) | <= | |
waitForElement | count | নির্বাচক দ্বারা চিহ্নিত উপাদানের সংখ্যা | |
waitForElement | attributes | HTML অ্যাট্রিবিউট এবং এর মান | |
waitForElement | properties | জাভাস্ক্রিপ্ট সম্পত্তি এবং JSON এর মান | |
waitForElement | visible | বুলিয়ান। উপাদানটি DOM-এ থাকলে এবং দৃশ্যমান হলে সত্য ( display: none বা visibility: hidden ) | |
waitForElementwaitForExpression | asserted events | বর্তমানে, শুধুমাত্র type: navigation কিন্তু আপনি শিরোনাম এবং URL নির্দিষ্ট করতে পারেন | |
waitForElementwaitForExpression | timeout | মিলিসেকেন্ডে অপেক্ষা করার জন্য সর্বোচ্চ সময় | |
waitForExpression | expression |  | জাভাস্ক্রিপ্ট এক্সপ্রেশন যা সত্যে সমাধান করে |
setViewport | widthheight |  | ভিউপোর্টের প্রস্থ এবং উচ্চতা পিক্সেলে |
setViewport | deviceScaleFactor |  | ডিভাইস পিক্সেল অনুপাত (DPR) এর মতো, ডিফল্ট 1 |
setViewport | isMobilehasTouchisLandscape |  | বুলিয়ান পতাকা যা নির্দিষ্ট করে কিনা: |
দুটি বৈশিষ্ট্য রয়েছে যা রিপ্লে বিরতি দেয়:
waitForElementপ্রপার্টি ধাপটিকে একটি নির্বাচক দ্বারা চিহ্নিত বেশ কয়েকটি উপাদানের উপস্থিতির (বা অনুপস্থিতি) জন্য অপেক্ষা করে। উদাহরণস্বরূপ, নিম্নলিখিত ধাপটি নির্বাচক.my-classসাথে মেলে এমন পৃষ্ঠায় তিনটি উপাদানের জন্য অপেক্ষা করে।"type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,waitForExpressionবৈশিষ্ট্যটি একটি জাভাস্ক্রিপ্ট এক্সপ্রেশনকে সত্যে সমাধান করার জন্য পদক্ষেপকে অপেক্ষা করে। উদাহরণস্বরূপ, নিম্নলিখিত ধাপটি দুই সেকেন্ডের জন্য বিরতি দেয় এবং তারপরে রিপ্লে চালিয়ে যাওয়ার অনুমতি দিয়ে সত্যে স্থির হয়।"type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
পদক্ষেপের জন্য সময়সীমা সামঞ্জস্য করুন
আপনার পৃষ্ঠায় ধীরগতির নেটওয়ার্ক অনুরোধ বা দীর্ঘ অ্যানিমেশন থাকলে, 5000 মিলিসেকেন্ডের ডিফল্ট টাইমআউট অতিক্রম করার পদক্ষেপগুলিতে রিপ্লে ব্যর্থ হতে পারে।
এই সমস্যা এড়াতে, আপনি একবারে প্রতিটি ধাপের জন্য ডিফল্ট টাইমআউট সামঞ্জস্য করতে পারেন বা নির্দিষ্ট পদক্ষেপের জন্য পৃথক সময়সীমা সেট করতে পারেন। নির্দিষ্ট ধাপে টাইমআউট ডিফল্ট ওভাররাইট করে।
একবারে প্রতিটি ধাপের জন্য ডিফল্ট সময়সীমা সামঞ্জস্য করতে:
টাইমআউট বক্স সম্পাদনাযোগ্য করতে রিপ্লে সেটিংসে ক্লিক করুন।
টাইমআউট বাক্সে, মিলিসেকেন্ডে টাইমআউট মান সেট করুন।
ক্লিক করুন
সামঞ্জস্যপূর্ণ ডিফল্ট টাইমআউট অ্যাকশনে দেখতে রিপ্লে করুন ।
একটি নির্দিষ্ট ধাপে ডিফল্ট টাইমআউট ওভাররাইট করতে:
ধাপটি প্রসারিত করুন এবং টাইমআউট যোগ করুন ক্লিক করুন।
timeout: <value>এবং মানটি মিলিসেকেন্ডে সেট করুন।
ক্লিক করুন
টাইমআউট অ্যাকশন সহ ধাপটি দেখতে রিপ্লে করুন ।
একটি ধাপে একটি টাইমআউট ওভাররাইট অপসারণ করতে, মুছুন ক্লিক করুন 
এর পাশে বোতাম।
নির্বাচকদের বোঝেন
আপনি যখন একটি নতুন রেকর্ডিং শুরু করেন, আপনি নিম্নলিখিতগুলি কনফিগার করতে পারেন:
- সিলেক্টর অ্যাট্রিবিউট টেক্সটবক্সে, একটি কাস্টম টেস্ট অ্যাট্রিবিউট লিখুন। রেকর্ডার সাধারণ পরীক্ষার বৈশিষ্ট্যের তালিকার পরিবর্তে নির্বাচকদের সনাক্ত করতে এই বৈশিষ্ট্যটি ব্যবহার করবে।
চেকবক্সের সেট রেকর্ড করার জন্য নির্বাচক প্রকারের মধ্যে, স্বয়ংক্রিয়ভাবে সনাক্ত করার জন্য নির্বাচকের প্রকারগুলি নির্বাচন করুন:
সিএসএস । সিনট্যাকটিক নির্বাচক। 
ARIA শব্দার্থিক নির্বাচক। 
পাঠ্য সংক্ষিপ্ততম অনন্য পাঠ্য উপলব্ধ থাকলে নির্বাচক। 
এক্সপাথ । নির্বাচক যারা XML পাথ ভাষা ব্যবহার করে। 
পিয়ার্স সিএসএসের মতো নির্বাচক কিন্তু এটি ছায়া DOM-কে বিদ্ধ করতে পারে ।
সাধারণ পরীক্ষা নির্বাচক
সাধারণ ওয়েবপেজের জন্য, id অ্যাট্রিবিউট এবং সিএসএস class অ্যাট্রিবিউট রেকর্ডারের জন্য নির্বাচকদের সনাক্ত করার জন্য যথেষ্ট। যাইহোক, এটি সবসময় ক্ষেত্রে নাও হতে পারে কারণ:
- আপনার ওয়েবপৃষ্ঠাগুলি পরিবর্তনশীল ক্লাস বা আইডি ব্যবহার করতে পারে।
- কোড বা ফ্রেমওয়ার্ক পরিবর্তনের কারণে আপনার নির্বাচকরা ভেঙে যেতে পারে।
উদাহরণস্বরূপ, আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক (উদাহরণস্বরূপ, প্রতিক্রিয়া , কৌণিক , Vue ) এবং CSS ফ্রেমওয়ার্কগুলির সাথে বিকাশিত অ্যাপ্লিকেশনগুলির জন্য CSS class মানগুলি স্বয়ংক্রিয়ভাবে তৈরি হতে পারে।
এই ক্ষেত্রে, আপনি আরও স্থিতিস্থাপক পরীক্ষা তৈরি করতে data-* বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। ইতিমধ্যেই কিছু সাধারণ data-* নির্বাচক যা বিকাশকারীরা অটোমেশনের জন্য ব্যবহার করে। রেকর্ডার তাদের পাশাপাশি সমর্থন করে।
আপনার ওয়েবসাইটে যদি নিম্নলিখিত সাধারণ পরীক্ষা নির্বাচকদের সংজ্ঞায়িত করা থাকে, রেকর্ডার স্বয়ংক্রিয়ভাবে সনাক্ত করে এবং প্রথমে সেগুলি ব্যবহার করে:
-
data-testid -
data-test -
data-qa -
data-cy -
data-test-id -
data-qa-id -
data-testing
উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় "ক্যাপুচিনো" উপাদানটি পরিদর্শন করুন এবং পরীক্ষার বৈশিষ্ট্যগুলি দেখুন:
"ক্যাপুচিনো" তে একটি ক্লিক রেকর্ড করুন, রেকর্ডিংয়ের সংশ্লিষ্ট ধাপটি প্রসারিত করুন এবং সনাক্ত করা নির্বাচকগুলি পরীক্ষা করুন:
রেকর্ডিং এর নির্বাচক কাস্টমাইজ করুন
সাধারণ পরীক্ষা নির্বাচকরা আপনার জন্য কাজ না করলে আপনি রেকর্ডিংয়ের নির্বাচককে কাস্টমাইজ করতে পারেন।
উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠাটি নির্বাচক হিসাবে data-automate অ্যাট্রিবিউট ব্যবহার করে। একটি নতুন রেকর্ডিং শুরু করুন এবং নির্বাচক বৈশিষ্ট্য হিসাবে data-automate প্রবেশ করুন৷
একটি ইমেল ঠিকানা পূরণ করুন এবং নির্বাচক মান পর্যবেক্ষণ করুন ( [data-automate=email-address] )।
নির্বাচক অগ্রাধিকার
আপনি একটি কাস্টম CSS নির্বাচক বৈশিষ্ট্য নির্দিষ্ট করেছেন কিনা তার উপর নির্ভর করে রেকর্ডার নিম্নলিখিত ক্রমে নির্বাচকদের সন্ধান করে:
- যদি নির্দিষ্ট করা হয়:
- আপনার কাস্টম CSS বৈশিষ্ট্য সহ CSS নির্বাচক।
- XPath নির্বাচক।
- ARIA নির্বাচক যদি পাওয়া যায়।
- যদি পাওয়া যায় তবে সবচেয়ে ছোট অনন্য পাঠ্য সহ একটি নির্বাচক৷
- যদি নির্দিষ্ট না করা হয়:
- ARIA নির্বাচক যদি পাওয়া যায়।
- নিম্নলিখিত অগ্রাধিকার সহ CSS নির্বাচক:
- পরীক্ষার জন্য ব্যবহৃত সবচেয়ে সাধারণ বৈশিষ্ট্য:
-
data-testid -
data-test -
data-qa -
data-cy -
data-test-id -
data-qa-id -
data-testing
-
- আইডি বৈশিষ্ট্য, উদাহরণস্বরূপ,
<div id="some_ID">। - নিয়মিত সিএসএস নির্বাচক।
- পরীক্ষার জন্য ব্যবহৃত সবচেয়ে সাধারণ বৈশিষ্ট্য:
- XPath নির্বাচক।
- পিয়ার্স নির্বাচকরা।
- যদি পাওয়া যায় তবে সবচেয়ে ছোট অনন্য পাঠ্য সহ একটি নির্বাচক৷
একাধিক নিয়মিত CSS, XPath, এবং Pierce নির্বাচক থাকতে পারে। রেকর্ডার ক্যাপচার করে:
- প্রতিটি রুট স্তরে নিয়মিত CSS এবং XPath নির্বাচক, অর্থাৎ নেস্টেড শ্যাডো হোস্ট , যদি থাকে।
- পিয়ার্স নির্বাচক যা সমস্ত ছায়া গোড়ার মধ্যে সমস্ত উপাদানের মধ্যে অনন্য।
Chrome DevTools রেকর্ডার প্যানেলের এই ব্যাপক বৈশিষ্ট্যের রেফারেন্সে ব্যবহারকারীর প্রবাহ ভাগ করে নেওয়ার উপায়গুলি আবিষ্কার করুন, তাদের সম্পাদনা করুন এবং তাদের পদক্ষেপগুলি দেখুন৷
রেকর্ডার প্যানেলের সাথে কাজ করার মূল বিষয়গুলি শিখতে, রেকর্ড, রিপ্লে এবং ব্যবহারকারীর প্রবাহ পরিমাপ দেখুন।
শর্টকাট শিখুন এবং কাস্টমাইজ করুন
রেকর্ডারটি দ্রুত নেভিগেট করতে শর্টকাট ব্যবহার করুন। ডিফল্ট শর্টকাটগুলির একটি তালিকার জন্য, রেকর্ডার প্যানেল কীবোর্ড শর্টকাটগুলি দেখুন।
রেকর্ডারে ডানদিকে সমস্ত শর্টকাট তালিকাভুক্ত একটি ইঙ্গিত খুলতে, উপরের ডানদিকে কোণায় শর্টকাট দেখান ক্লিক করুন৷
রেকর্ডার শর্টকাট কাস্টমাইজ করতে:
- খোলা সেটিংস > শর্টকাট ।
- রেকর্ডার বিভাগে নিচে স্ক্রোল করুন।
- কাস্টমাইজ শর্টকাটগুলিতে পদক্ষেপগুলি অনুসরণ করুন৷
ব্যবহারকারীর প্রবাহ সম্পাদনা করুন
রেকর্ডার প্যানেলের উপরে, আপনার জন্য বিকল্প রয়েছে:
- একটি নতুন রেকর্ডিং যোগ করুন . একটি নতুন রেকর্ডিং যোগ করতে + আইকনে ক্লিক করুন।
- সব রেকর্ডিং দেখুন . ড্রপ-ডাউনটি সংরক্ষিত রেকর্ডিংয়ের তালিকা দেখায়। সংরক্ষিত রেকর্ডিংয়ের তালিকা প্রসারিত এবং পরিচালনা করতে N রেকর্ডিং(গুলি) বিকল্পটি নির্বাচন করুন।
একটি রেকর্ডিং রপ্তানি করুন
. স্ক্রিপ্টটিকে আরও কাস্টমাইজ করতে বা বাগ রিপোর্টিংয়ের উদ্দেশ্যে এটি ভাগ করতে, আপনি নিম্নলিখিত ফর্ম্যাটে ব্যবহারকারীর প্রবাহকে রপ্তানি করতে পারেন:- JSON ফাইল।
- @পুপেটিয়ার/রিপ্লে স্ক্রিপ্ট।
- পুতুলের স্ক্রিপ্ট।
- পাপেটিয়ার (ফায়ারফক্সের জন্য) স্ক্রিপ্ট।
- পুতুল ( বাতিঘর বিশ্লেষণ সহ)।
বিন্যাস সম্পর্কে আরও তথ্যের জন্য, একটি ব্যবহারকারী প্রবাহ রপ্তানি দেখুন।
একটি রেকর্ডিং আমদানি করুন
. শুধুমাত্র JSON ফর্ম্যাটে।একটি রেকর্ডিং মুছুন
. নির্বাচিত রেকর্ডিং মুছুন।
আপনি সম্পাদনা বোতামে ক্লিক করে রেকর্ডিংয়ের নাম সম্পাদনা করতে পারেন এর পাশে
শেয়ার ব্যবহারকারী প্রবাহ
আপনি রেকর্ডারে ব্যবহারকারীর প্রবাহ রপ্তানি এবং আমদানি করতে পারেন। এটি বাগ রিপোর্টিংয়ের জন্য দরকারী কারণ আপনি একটি বাগ পুনরুত্পাদনকারী পদক্ষেপগুলির একটি সঠিক রেকর্ড ভাগ করতে পারেন৷ আপনি এক্সটার্নাল লাইব্রেরির সাথে এটি এক্সপোর্ট এবং রিপ্লে করতে পারেন।
একটি ব্যবহারকারী প্রবাহ রপ্তানি করুন
একটি ব্যবহারকারী প্রবাহ রপ্তানি করতে:
- আপনি রপ্তানি করতে চান ব্যবহারকারী প্রবাহ খুলুন.
রেকর্ডার প্যানেলের শীর্ষে রপ্তানি ক্লিক করুন।
ড্রপ-ডাউন তালিকা থেকে নিম্নলিখিত ফর্ম্যাটগুলির মধ্যে একটি নির্বাচন করুন:
- JSON ফাইল । একটি JSON ফাইল হিসাবে রেকর্ডিং ডাউনলোড করুন.
- @পুতুল/রিপ্লে । একটি Puppeteer রিপ্লে স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন.
- পুতুল একটি Puppeteer স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন.
- পুতুল (ফায়ারফক্সের জন্য) । ফায়ারফক্স স্ক্রিপ্টের জন্য একটি Puppeteer হিসাবে রেকর্ডিং ডাউনলোড করুন.
- পুতুল (বাতিঘর বিশ্লেষণ সহ) । একটি এমবেডেড লাইটহাউস বিশ্লেষণ সহ একটি Puppeteer স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন৷
- রেকর্ডারের এক্সপোর্ট এক্সটেনশন দ্বারা প্রদত্ত এক বা একাধিক বিকল্প।
ফাইলটি সংরক্ষণ করুন।
আপনি প্রতিটি ডিফল্ট রপ্তানি বিকল্পের সাথে নিম্নলিখিতগুলি করতে পারেন:
- JSON । মানব-পঠনযোগ্য JSON অবজেক্ট সম্পাদনা করুন এবং JSON ফাইলটি রেকর্ডারে আবার আমদানি করুন ।
- @পুতুল/রিপ্লে । পাপেটিয়ার রিপ্লে লাইব্রেরির সাথে স্ক্রিপ্টটি রিপ্লে করুন। একটি @puppeteer/রিপ্লে স্ক্রিপ্ট হিসাবে রপ্তানি করার সময়, পদক্ষেপগুলি একটি JSON অবজেক্ট থাকে। এই বিকল্পটি নিখুঁত যদি আপনি আপনার CI/CD পাইপলাইনের সাথে একীভূত করতে চান তবে এখনও JSON হিসাবে পদক্ষেপগুলি সম্পাদনা করার নমনীয়তা আছে, পরে রূপান্তর করুন এবং রেকর্ডারে আবার আমদানি করুন৷
- পুতুলের স্ক্রিপ্ট । পাপেটিয়ারের সাথে স্ক্রিপ্টটি রিপ্লে করুন। যেহেতু ধাপগুলি জাভাস্ক্রিপ্টে রূপান্তরিত হয়েছে, আপনি আরও সূক্ষ্ম কাস্টমাইজেশন করতে পারেন, উদাহরণস্বরূপ, ধাপগুলি লুপ করা। একটি সতর্কতা, আপনি এই স্ক্রিপ্টটি আবার রেকর্ডারে আমদানি করতে পারবেন না।
- পুতুল (ফায়ারফক্সের জন্য) । WebDriver BiDi সমর্থনের অংশ হিসাবে, আপনি Chrome এবং Firefox উভয়েই এই Puppeteer স্ক্রিপ্টটি চালাতে পারেন।
পুতুল (বাতিঘর বিশ্লেষণ সহ) । এই রপ্তানি বিকল্পটি আগেরটির মতই কিন্তু এতে এমন কোড রয়েছে যা একটি বাতিঘর বিশ্লেষণ তৈরি করে।
স্ক্রিপ্টটি চালান এবং একটি
flow.report.htmlফাইলে আউটপুট পরীক্ষা করুন:# npm i puppeteer lighthouse node your_export.js
একটি এক্সটেনশন ইনস্টল করে একটি কাস্টম বিন্যাসে রপ্তানি করুন৷
রেকর্ডার এক্সটেনশন দেখুন।
একটি ব্যবহারকারী প্রবাহ আমদানি করুন
একটি ব্যবহারকারী প্রবাহ আমদানি করতে:
- আমদানিতে ক্লিক করুন রেকর্ডার প্যানেলের শীর্ষে বোতাম।
- রেকর্ড করা ব্যবহারকারীর প্রবাহ সহ JSON ফাইলটি নির্বাচন করুন।
- ক্লিক করুন আমদানিকৃত ব্যবহারকারী প্রবাহ চালানোর জন্য রিপ্লে বোতাম।
বাহ্যিক লাইব্রেরির সাথে রিপ্লে করুন
Puppeteer Replay হল একটি ওপেন সোর্স লাইব্রেরি যা Chrome DevTools টিম দ্বারা রক্ষণাবেক্ষণ করে৷ এটি পাপেটিয়ারের উপরে নির্মিত। এটি একটি কমান্ড লাইন টুল, আপনি এটি দিয়ে JSON ফাইল রিপ্লে করতে পারেন।
তা ছাড়াও, আপনি নিম্নলিখিত 3য় পক্ষের লাইব্রেরিগুলির সাথে JSON ফাইলগুলিকে রূপান্তর এবং পুনরায় প্লে করতে পারেন৷
রূপান্তর JSON ব্যবহারকারী কাস্টম স্ক্রিপ্টে প্রবাহ:
- সাইপ্রেস ক্রোম রেকর্ডার । আপনি ব্যবহারকারীর প্রবাহ JSON ফাইলগুলিকে সাইপ্রেস টেস্ট স্ক্রিপ্টে রূপান্তর করতে এটি ব্যবহার করতে পারেন। এটি কর্মে দেখতে এই ডেমো দেখুন।
- নাইটওয়াচ ক্রোম রেকর্ডার । আপনি ব্যবহারকারীর প্রবাহ JSON ফাইলকে নাইটওয়াচ টেস্ট স্ক্রিপ্টে রূপান্তর করতে এটি ব্যবহার করতে পারেন।
- কোডসেপ্টজেএস ক্রোম রেকর্ডার । আপনি ব্যবহারকারীর প্রবাহ JSON ফাইলগুলিকে CodeceptJS পরীক্ষার স্ক্রিপ্টে রূপান্তর করতে এটি ব্যবহার করতে পারেন।
JSON ব্যবহারকারীর প্রবাহ পুনরায় চালান:
- টেস্টক্যাফের সাথে রিপ্লে করুন । আপনি ব্যবহারকারীর প্রবাহ JSON ফাইলগুলি পুনরায় প্লে করতে এবং এই রেকর্ডিংয়ের জন্য পরীক্ষার প্রতিবেদন তৈরি করতে TestCafe ব্যবহার করতে পারেন।
- সস ল্যাবসের সাথে রিপ্লে করুন । আপনি saucectl ব্যবহার করে সস ল্যাবগুলিতে JSON ফাইলগুলি পুনরায় প্লে করতে পারেন।
ডিবাগ ব্যবহারকারী প্রবাহ
যেকোনো কোডের মতো, কখনও কখনও আপনাকে রেকর্ড করা ব্যবহারকারীর প্রবাহ ডিবাগ করতে হবে।
আপনাকে ডিবাগ করতে সাহায্য করতে, রেকর্ডার প্যানেল আপনাকে রিপ্লে ধীর করতে, ব্রেকপয়েন্ট সেট করতে, এক্সিকিউশনের মধ্য দিয়ে ধাপে ধাপে ধাপে সমান্তরালভাবে বিভিন্ন ফর্ম্যাটে কোড পরিদর্শন করতে দেয়।
রিপ্লে স্লো ডাউন
ডিফল্টরূপে, রেকর্ডার ব্যবহারকারীর প্রবাহকে যত দ্রুত সম্ভব রিপ্লে করে। রেকর্ডিংয়ে কী ঘটে তা বোঝার জন্য, আপনি রিপ্লে গতি কমিয়ে দিতে পারেন:
- খুলুন ড্রপ-ডাউন মেনু রিপ্লে করুন ।
- রিপ্লে গতির বিকল্পগুলির মধ্যে একটি বেছে নিন:
- সাধারণ (ডিফল্ট)
- ধীর
- খুব ধীর
- অত্যন্ত ধীর
কোড পরিদর্শন করুন
বিভিন্ন বিন্যাসে একটি ব্যবহারকারী প্রবাহের কোড পরিদর্শন করতে:
- রেকর্ডার প্যানেলে একটি রেকর্ডিং খুলুন।
- ধাপ তালিকার উপরের ডানদিকে কোড দেখান ক্লিক করুন।
- রেকর্ডারটি ধাপ এবং তাদের কোডের পাশাপাশি একটি দৃশ্য দেখায়।
- আপনি যখন একটি ধাপের উপরে হোভার করেন, রেকর্ডারটি এক্সটেনশন দ্বারা প্রদত্ত কোডগুলি সহ যেকোনো বিন্যাসে তার নিজ নিজ কোড হাইলাইট করে।
আপনি ব্যবহারকারী প্রবাহ রপ্তানি করতে ব্যবহার করেন এমন একটি বিন্যাস নির্বাচন করতে বিন্যাস ড্রপ-ডাউন তালিকা প্রসারিত করুন।
এটি তিনটি ডিফল্ট ফরম্যাটের একটি হতে পারে (JSON, @puppeteer/replay , Puppeteer স্ক্রিপ্ট বা একটি এক্সটেনশন দ্বারা প্রদত্ত একটি বিন্যাস।
ধাপ প্যারামিটার এবং মান সম্পাদনা করে আপনার রেকর্ডিং ডিবাগ করতে এগিয়ে যান। কোড ভিউ সম্পাদনাযোগ্য নয় কিন্তু আপনি বাম দিকের ধাপে পরিবর্তন করার সাথে সাথে এটি আপডেট হয়।
ব্রেকপয়েন্ট সেট করুন এবং ধাপে ধাপে চালান
একটি ব্রেকপয়েন্ট সেট করতে এবং ধাপে ধাপে চালাতে:
- উপর হোভার রেকর্ডিংয়ের যেকোনো ধাপের পাশে বৃত্ত। বৃত্তটি a এ পরিণত হয় ব্রেকপয়েন্ট আইকন।
- ক্লিক করুন ব্রেকপয়েন্ট আইকন এবং রেকর্ডিং রিপ্লে . ফাঁসি ব্রেকপয়েন্টে বিরতি দেয়।
- সঞ্চালনের মাধ্যমে ধাপে ধাপে, ক্লিক করুন রেকর্ডার প্যানেলের শীর্ষে অ্যাকশন বারে এক ধাপ বোতাম চালান ।
- রিপ্লে বন্ধ করতে, ক্লিক করুন রিপ্লে বাতিল করুন ।
পদক্ষেপগুলি সম্পাদনা করুন
আপনি ক্লিক করে রেকর্ডিং যে কোনো ধাপ সম্পাদনা করতে পারেন এটির পাশের বোতাম, রেকর্ডিংয়ের সময় এবং পরে।
আপনি অনুপস্থিত পদক্ষেপগুলি যোগ করতে এবং দুর্ঘটনাক্রমে রেকর্ড করাগুলিকে সরাতে পারেন।
পদক্ষেপ যোগ করুন
কখনও কখনও, আপনাকে ম্যানুয়ালি পদক্ষেপগুলি যোগ করতে হতে পারে। উদাহরণস্বরূপ, রেকর্ডার স্বয়ংক্রিয়ভাবে hover ইভেন্টগুলি ক্যাপচার করে না কারণ এটি রেকর্ডিংকে দূষিত করে এবং এই ধরনের সমস্ত ইভেন্ট দরকারী নয়। যাইহোক, UI উপাদান যেমন ড্রপ-ডাউন মেনু শুধুমাত্র hover প্রদর্শিত হতে পারে। আপনি ম্যানুয়ালি ব্যবহারকারীর প্রবাহে hover পদক্ষেপগুলি যুক্ত করতে পারেন যা এই জাতীয় উপাদানগুলির উপর নির্ভর করে।
ম্যানুয়ালি একটি ধাপ যোগ করতে:
- এই ডেমো পৃষ্ঠাটি খুলুন এবং একটি নতুন রেকর্ডিং শুরু করুন।
- ভিউপোর্টের উপাদানটির উপর হভার করুন। একটি কর্ম মেনু পপ আপ.
- মেনু থেকে একটি অ্যাকশন বেছে নিন এবং রেকর্ডিং শেষ করুন। রেকর্ডার শুধুমাত্র ক্লিক ইভেন্ট ক্যাপচার.
- ক্লিক করে রেকর্ডিং পুনরায় চালানোর চেষ্টা করুন রিপ্লে । রিপ্লে একটি সময় শেষ হওয়ার পরে ব্যর্থ হয় কারণ রেকর্ডার মেনুতে উপাদানটি অ্যাক্সেস করতে পারে না।
- ক্লিক করুন ক্লিক ধাপের পাশে থ্রি-ডট বোতাম এবং এর আগে পদক্ষেপ যোগ করুন নির্বাচন করুন।
- নতুন পদক্ষেপ প্রসারিত করুন। ডিফল্টরূপে, এতে
waitForElementটাইপ থাকে।typeপাশের মানটিতে ক্লিক করুন এবংhoverনির্বাচন করুন। - পরবর্তী, নতুন ধাপের জন্য একটি উপযুক্ত নির্বাচক সেট করুন। ক্লিক করুন নির্বাচন করুন , তারপর
Hover over me!পপ-আপ মেনুর বাইরের উপাদান। নির্বাচক#clickableতে সেট করা হয়েছে। - রেকর্ডিং আবার প্লে করার চেষ্টা করুন. যোগ করা হোভার ধাপের সাথে, রেকর্ডার সফলভাবে প্রবাহটি পুনরায় চালায়।
দাবী যোগ করুন
রেকর্ডিংয়ের সময়, আপনি জোর দিতে পারেন, উদাহরণস্বরূপ, HTML বৈশিষ্ট্য এবং জাভাস্ক্রিপ্ট বৈশিষ্ট্য। একটি দাবি যোগ করতে:
- একটি রেকর্ডিং শুরু করুন , উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় ।
দাবী যোগ করুন ক্লিক করুন।
রেকর্ডার একটি কনফিগারযোগ্য
waitForElementধাপ তৈরি করে।এই ধাপের জন্য নির্বাচকদের নির্দিষ্ট করুন ।
ধাপটি কনফিগার করুন কিন্তু তার
waitForElementপ্রকার পরিবর্তন করবেন না। উদাহরণস্বরূপ, আপনি নির্দিষ্ট করতে পারেন:- এইচটিএমএল অ্যাট্রিবিউট । বৈশিষ্ট্য যোগ করুন ক্লিক করুন এবং এই পৃষ্ঠার উপাদানগুলি ব্যবহার করে এমন বৈশিষ্ট্যের নাম এবং মান টাইপ করুন৷ উদাহরণস্বরূপ,
data-test: <value>। - জাভাস্ক্রিপ্ট সম্পত্তি । বৈশিষ্ট্য যোগ করুন ক্লিক করুন এবং JSON ফর্ম্যাটে সম্পত্তির নাম এবং মান টাইপ করুন। উদাহরণস্বরূপ,
{".innerText":"<text>"}। - অন্যান্য ধাপ বৈশিষ্ট্য . উদাহরণস্বরূপ,
visible: true।
- এইচটিএমএল অ্যাট্রিবিউট । বৈশিষ্ট্য যোগ করুন ক্লিক করুন এবং এই পৃষ্ঠার উপাদানগুলি ব্যবহার করে এমন বৈশিষ্ট্যের নাম এবং মান টাইপ করুন৷ উদাহরণস্বরূপ,
ব্যবহারকারীর বাকি প্রবাহ রেকর্ড করতে এগিয়ে যান এবং তারপর রেকর্ডিং বন্ধ করুন।
ক্লিক করুন
রিপ্লে । যদি একটি দাবী ব্যর্থ হয়, রেকর্ডার একটি সময় শেষ হওয়ার পরে একটি ত্রুটি প্রদর্শন করে।
এই কর্মপ্রবাহটি কার্যকরভাবে দেখতে নিম্নলিখিত ভিডিওটি দেখুন।
পদক্ষেপগুলি অনুলিপি করুন
সমগ্র ব্যবহারকারী প্রবাহ রপ্তানি করার পরিবর্তে, আপনি ক্লিপবোর্ডে একটি একক ধাপ অনুলিপি করতে পারেন:
- আপনি যে ধাপটি অনুলিপি করতে চান তাতে ডান-ক্লিক করুন বা ক্লিক করুন এর পাশে তিন-বিন্দু আইকন।
- ড্রপ-ডাউন মেনুতে, অনুলিপি হিসাবে ... বিকল্পগুলির মধ্যে একটি নির্বাচন করুন।
আপনি বিভিন্ন ফর্ম্যাটে পদক্ষেপগুলি অনুলিপি করতে পারেন: JSON, Puppeteer , @puppeteer/replay , এবং এক্সটেনশনগুলি দ্বারা সরবরাহ করা।
পদক্ষেপগুলি সরান
দুর্ঘটনাক্রমে রেকর্ড করা পদক্ষেপটি সরাতে, ধাপে ডান-ক্লিক করুন বা ক্লিক করুন এর পাশে তিন-বিন্দু আইকন এবং ধাপ সরান নির্বাচন করুন।
অতিরিক্তভাবে, রেকর্ডার স্বয়ংক্রিয়ভাবে প্রতিটি রেকর্ডিংয়ের শুরুতে দুটি পৃথক পদক্ষেপ যোগ করে:
- ভিউপোর্ট সেট করুন । আপনাকে ভিউপোর্টের মাত্রা, স্কেলিং এবং অন্যান্য বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করতে দেয়৷
- নেভিগেট করুন । URL সেট করে এবং প্রতিটি রিপ্লেতে স্বয়ংক্রিয়ভাবে পৃষ্ঠাটি রিফ্রেশ করে।
পৃষ্ঠাটি পুনরায় লোড না করে ইন-পেজ অটোমেশন সম্পাদন করতে, উপরে বর্ণিত নেভিগেশন ধাপটি সরান।
পদক্ষেপগুলি কনফিগার করুন
একটি ধাপ কনফিগার করতে:
এর ধরন নির্দিষ্ট করুন:
click,doubleClickকরুন,hover, (ইনপুট)change,keyUp,keyDown,scroll,close,navigate(একটি পৃষ্ঠায়),waitForElement,waitForExpressionবাsetViewport।অন্যান্য বৈশিষ্ট্য
typeমান উপর নির্ভর করে.typeনীচে প্রয়োজনীয় বৈশিষ্ট্যগুলি উল্লেখ করুন।ঐচ্ছিক টাইপ-নির্দিষ্ট বৈশিষ্ট্য যোগ করতে এবং তাদের নির্দিষ্ট করতে সংশ্লিষ্ট বোতামগুলিতে ক্লিক করুন।
উপলব্ধ বৈশিষ্ট্যগুলির একটি তালিকার জন্য, ধাপ বৈশিষ্ট্য দেখুন।
একটি ঐচ্ছিক সম্পত্তি অপসারণ করতে, ক্লিক করুন এর পাশের বোতামটি সরান ।
একটি অ্যারের বৈশিষ্ট্যে বা থেকে একটি উপাদান যোগ করতে বা সরাতে, উপাদানটির পাশের + বা - বোতামে ক্লিক করুন।
ধাপ বৈশিষ্ট্য
প্রতিটি ধাপে নিম্নলিখিত ঐচ্ছিক বৈশিষ্ট্য থাকতে পারে:
-
target— Chrome DevTools প্রোটোকল (CDP) টার্গেটের জন্য একটি URL, ডিফল্টmainকীওয়ার্ড বর্তমান পৃষ্ঠাকে বোঝায়। -
assertedEventsযা শুধুমাত্র একটি এককnavigationইভেন্ট হতে পারে।
বেশিরভাগ ধাপের প্রকারের জন্য উপলব্ধ অন্যান্য সাধারণ বৈশিষ্ট্যগুলি হল:
-
frame— শূন্য-ভিত্তিক সূচীগুলির একটি অ্যারে যা একটি আইফ্রেম সনাক্ত করে যা নেস্ট করা যেতে পারে। উদাহরণস্বরূপ, আপনি একটি সেকেন্ডের (1) আইফ্রেমের মধ্যে প্রথম (0) আইফ্রেমটিকে[1, 0]হিসাবে চিহ্নিত করতে পারেন। -
timeout—একটি ধাপ চালানোর আগে অপেক্ষা করতে হবে অনেক মিলিসেকেন্ড। আরও তথ্যের জন্য, ধাপগুলির জন্য সময়সীমা সামঞ্জস্য করুন দেখুন। -
selectors- নির্বাচকদের একটি বিন্যাস। আরও তথ্যের জন্য, নির্বাচকদের বুঝুন দেখুন।
টাইপ-নির্দিষ্ট বৈশিষ্ট্য হল:
| টাইপ | সম্পত্তি | প্রয়োজন | বর্ণনা |
clickdoubleClick | offsetXoffsetY | | উপাদান সামগ্রী বাক্সের উপরের-বাম দিকের সাথে সম্পর্কিত, পিক্সেলে |
clickdoubleClick | button | পয়েন্টার বোতাম: প্রাথমিক | সহায়ক | দ্বিতীয় | ফিরে | এগিয়ে | |
change | value | | চূড়ান্ত মান |
keyDownkeyUp | key | | মূল নাম |
scroll | xy | সম্পূর্ণ স্ক্রোল x এবং y পজিশনে পিক্সেল, ডিফল্ট 0 | |
navigate | url | | লক্ষ্য URL |
waitForElement | operator | >= | == (ডিফল্ট) | <= | |
waitForElement | count | নির্বাচক দ্বারা চিহ্নিত উপাদানের সংখ্যা | |
waitForElement | attributes | HTML অ্যাট্রিবিউট এবং এর মান | |
waitForElement | properties | জাভাস্ক্রিপ্ট সম্পত্তি এবং JSON এর মান | |
waitForElement | visible | বুলিয়ান। উপাদানটি DOM-এ থাকলে এবং দৃশ্যমান হলে সত্য ( display: none বা visibility: hidden ) | |
waitForElementwaitForExpression | asserted events | বর্তমানে, শুধুমাত্র type: navigation কিন্তু আপনি শিরোনাম এবং URL নির্দিষ্ট করতে পারেন | |
waitForElementwaitForExpression | timeout | মিলিসেকেন্ডে অপেক্ষা করার জন্য সর্বোচ্চ সময় | |
waitForExpression | expression | | জাভাস্ক্রিপ্ট এক্সপ্রেশন যা সত্যে সমাধান করে |
setViewport | widthheight | | ভিউপোর্টের প্রস্থ এবং উচ্চতা পিক্সেলে |
setViewport | deviceScaleFactor | | ডিভাইস পিক্সেল অনুপাত (DPR) এর মতো, ডিফল্ট 1 |
setViewport | isMobilehasTouchisLandscape | | বুলিয়ান পতাকা যা নির্দিষ্ট করে কিনা: |
দুটি বৈশিষ্ট্য রয়েছে যা রিপ্লে বিরতি দেয়:
waitForElementপ্রপার্টি ধাপটিকে একটি নির্বাচক দ্বারা চিহ্নিত বেশ কয়েকটি উপাদানের উপস্থিতির (বা অনুপস্থিতি) জন্য অপেক্ষা করে। উদাহরণস্বরূপ, নিম্নলিখিত ধাপটি নির্বাচক.my-classসাথে মেলে এমন পৃষ্ঠায় তিনটি উপাদানের জন্য অপেক্ষা করে।"type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,waitForExpressionবৈশিষ্ট্যটি একটি জাভাস্ক্রিপ্ট এক্সপ্রেশনকে সত্যে সমাধান করার জন্য পদক্ষেপকে অপেক্ষা করে। উদাহরণস্বরূপ, নিম্নলিখিত ধাপটি দুই সেকেন্ডের জন্য বিরতি দেয় এবং তারপরে রিপ্লে চালিয়ে যাওয়ার অনুমতি দিয়ে সত্যে স্থির হয়।"type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
পদক্ষেপের জন্য সময়সীমা সামঞ্জস্য করুন
আপনার পৃষ্ঠায় ধীরগতির নেটওয়ার্ক অনুরোধ বা দীর্ঘ অ্যানিমেশন থাকলে, 5000 মিলিসেকেন্ডের ডিফল্ট টাইমআউট অতিক্রম করার পদক্ষেপগুলিতে রিপ্লে ব্যর্থ হতে পারে।
এই সমস্যা এড়াতে, আপনি একবারে প্রতিটি ধাপের জন্য ডিফল্ট টাইমআউট সামঞ্জস্য করতে পারেন বা নির্দিষ্ট পদক্ষেপের জন্য পৃথক সময়সীমা সেট করতে পারেন। নির্দিষ্ট ধাপে টাইমআউট ডিফল্ট ওভাররাইট করে।
প্রতিটি পদক্ষেপের জন্য ডিফল্ট সময়সীমাটি একবারে সামঞ্জস্য করতে:
টাইমআউট বক্সটি সম্পাদনযোগ্য করতে রিপ্লে সেটিংসে ক্লিক করুন।
টাইমআউট বাক্সে, মিলিসেকেন্ডে টাইমআউট মান সেট করুন।
ক্লিক করুন
ক্রিয়াকলাপে অ্যাডজাস্টেড ডিফল্ট সময়সীমা দেখতে পুনরায় খেলুন ।
একটি নির্দিষ্ট পদক্ষেপে ডিফল্ট সময়সীমা ওভাররাইট করতে:
পদক্ষেপটি প্রসারিত করুন এবং সময়সীমা যুক্ত করুন ক্লিক করুন।
timeout: <value>এবং মিলিসেকেন্ডে মান সেট করুন।ক্লিক করুন
কর্মে সময়সীমা সহ পদক্ষেপটি দেখতে পুনরায় খেলুন ।
একটি পদক্ষেপে একটি টাইমআউট ওভাররাইট অপসারণ করতে, মুছুন ক্লিক করুন এর পাশের বোতাম।
নির্বাচনকারীদের বুঝতে
আপনি যখন একটি নতুন রেকর্ডিং শুরু করেন, আপনি নিম্নলিখিতগুলি কনফিগার করতে পারেন:
- সিলেক্টর অ্যাট্রিবিউট টেক্সটবক্সে, একটি কাস্টম পরীক্ষার বৈশিষ্ট্য লিখুন। রেকর্ডার সাধারণ পরীক্ষার বৈশিষ্ট্যের তালিকার পরিবর্তে নির্বাচকদের সনাক্ত করতে এই বৈশিষ্ট্যটি ব্যবহার করবে।
চেকবক্সগুলির সেট রেকর্ড করার জন্য নির্বাচক প্রকারগুলিতে , স্বয়ংক্রিয়ভাবে সনাক্ত করতে নির্বাচকের ধরণগুলি চয়ন করুন:
- সিএসএস । সিনট্যাকটিক নির্বাচক।
- ARIA শব্দার্থক নির্বাচনকারী।
- পাঠ্য যদি পাওয়া যায় তবে স্বল্পতম অনন্য পাঠ্য সহ নির্বাচকরা।
- এক্সপথ এক্সএমএল পাথ ভাষা ব্যবহার করে এমন নির্বাচনকারীরা।
- পিয়ার্স সিএসএসের মতো নির্বাচকরা তবে এটি ছায়া ডমকে ছিদ্র করতে পারে ।
সাধারণ পরীক্ষা নির্বাচনকারী
সাধারণ ওয়েবপৃষ্ঠাগুলির জন্য, id অ্যাট্রিবিউটস এবং সিএসএস class বৈশিষ্ট্যগুলি নির্বাচকদের সনাক্ত করতে রেকর্ডারটির পক্ষে যথেষ্ট। তবে, এটি সর্বদা ক্ষেত্রে নাও হতে পারে কারণ:
- আপনার ওয়েবপৃষ্ঠাগুলি গতিশীল ক্লাস বা আইডি ব্যবহার করতে পারে যা পরিবর্তিত হয়।
- কোড বা ফ্রেমওয়ার্ক পরিবর্তনের কারণে আপনার নির্বাচকরা ভেঙে যেতে পারে।
উদাহরণস্বরূপ, সিএসএস class মানগুলি আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলির সাথে বিকশিত অ্যাপ্লিকেশনগুলির জন্য স্বয়ংক্রিয়ভাবে উত্পন্ন হতে পারে (উদাহরণস্বরূপ, প্রতিক্রিয়া , কৌণিক , ভিইউইউ ) এবং সিএসএস ফ্রেমওয়ার্কগুলি।
এই ক্ষেত্রে, আপনি আরও স্থিতিস্থাপক পরীক্ষা তৈরি করতে data-* বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। ইতিমধ্যে কিছু সাধারণ data-* নির্বাচক যা বিকাশকারীরা অটোমেশনের জন্য ব্যবহার করে। রেকর্ডার তাদের পাশাপাশি সমর্থন করে।
আপনার যদি আপনার ওয়েবসাইটে নিম্নলিখিত সাধারণ পরীক্ষার নির্বাচনকারীদের সংজ্ঞায়িত করা হয় তবে রেকর্ডারটি স্বয়ংক্রিয়ভাবে সনাক্ত করে এবং প্রথমে সেগুলি ব্যবহার করে:
-
data-testid -
data-test -
data-qa -
data-cy -
data-test-id -
data-qa-id -
data-testing
উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় "ক্যাপুচিনো" উপাদানটি পরীক্ষা করুন এবং পরীক্ষার বৈশিষ্ট্যগুলি দেখুন:
"ক্যাপুচিনো" এ ক্লিক করুন, রেকর্ডিংয়ের সাথে সম্পর্কিত পদক্ষেপটি প্রসারিত করুন এবং সনাক্তকারী নির্বাচকদের পরীক্ষা করুন:
রেকর্ডিংয়ের নির্বাচককে কাস্টমাইজ করুন
যদি সাধারণ পরীক্ষার নির্বাচকরা আপনার পক্ষে কাজ না করে তবে আপনি কোনও রেকর্ডিংয়ের নির্বাচককে কাস্টমাইজ করতে পারেন।
উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠাটি নির্বাচনকারী হিসাবে data-automate বৈশিষ্ট্য ব্যবহার করে। একটি নতুন রেকর্ডিং শুরু করুন এবং নির্বাচক বৈশিষ্ট্য হিসাবে data-automate প্রবেশ করুন।
একটি ইমেল ঠিকানা পূরণ করুন এবং নির্বাচক মান ( [data-automate=email-address] ) পর্যবেক্ষণ করুন।
নির্বাচক অগ্রাধিকার
আপনি যদি কোনও কাস্টম সিএসএস নির্বাচক বৈশিষ্ট্য নির্দিষ্ট করেছেন তার উপর নির্ভর করে রেকর্ডারটি নিম্নলিখিত ক্রমে নির্বাচকদের সন্ধান করে:
- যদি নির্দিষ্ট করা হয়:
- আপনার কাস্টম সিএসএস বৈশিষ্ট্য সহ সিএসএস নির্বাচক।
- এক্সপথ সিলেক্টর।
- যদি পাওয়া যায় তবে আরিয়া নির্বাচক।
- যদি পাওয়া যায় তবে স্বল্পতম অনন্য পাঠ্য সহ একটি নির্বাচক।
- যদি নির্দিষ্ট না করা হয়:
- যদি পাওয়া যায় তবে আরিয়া নির্বাচক।
- নিম্নলিখিত অগ্রাধিকার সহ সিএসএস নির্বাচনকারী:
- পরীক্ষার জন্য ব্যবহৃত সর্বাধিক সাধারণ বৈশিষ্ট্য:
-
data-testid -
data-test -
data-qa -
data-cy -
data-test-id -
data-qa-id -
data-testing
-
- আইডি বৈশিষ্ট্যগুলি, উদাহরণস্বরূপ,
<div id="some_ID">। - নিয়মিত সিএসএস নির্বাচক।
- পরীক্ষার জন্য ব্যবহৃত সর্বাধিক সাধারণ বৈশিষ্ট্য:
- এক্সপথ সিলেক্টর।
- পিয়ার্স সিলেক্টর।
- যদি পাওয়া যায় তবে স্বল্পতম অনন্য পাঠ্য সহ একটি নির্বাচক।
একাধিক নিয়মিত সিএসএস, এক্সপথ এবং পিয়ার্স নির্বাচক থাকতে পারে। রেকর্ডার ক্যাপচার:
- প্রতিটি মূল স্তরে নিয়মিত সিএসএস এবং এক্সপথ নির্বাচনকারীরা, অর্থাৎ নেস্টেড শ্যাডো হোস্টগুলি যদি থাকে।
- পিয়ার্স নির্বাচক যা সমস্ত ছায়া শিকড়ের মধ্যে সমস্ত উপাদানগুলির মধ্যে অনন্য।
ব্যবহারকারীর প্রবাহ ভাগ করে নেওয়ার উপায়গুলি আবিষ্কার করুন, সেগুলি সম্পাদনা করুন এবং ক্রোম ডেভটুলস রেকর্ডার প্যানেলের এই বিস্তৃত বৈশিষ্ট্যগুলির রেফারেন্সে তাদের পদক্ষেপগুলি সম্পাদনা করুন।
রেকর্ডার প্যানেলের সাথে কাজ করার মূল বিষয়গুলি শিখতে, রেকর্ড, পুনরায় খেলতে এবং ব্যবহারকারীর প্রবাহগুলি পরিমাপ করুন ।
শর্টকাটগুলি শিখুন এবং কাস্টমাইজ করুন
রেকর্ডারটি দ্রুত নেভিগেট করতে শর্টকাটগুলি ব্যবহার করুন। ডিফল্ট শর্টকাটগুলির তালিকার জন্য, রেকর্ডার প্যানেল কীবোর্ড শর্টকাটগুলি দেখুন।
রেকর্ডারটিতে সমস্ত শর্টকাটগুলি তালিকাভুক্ত করে এমন একটি ইঙ্গিতটি খুলতে, উপরের ডানদিকে কোণায় শর্টকাটগুলি প্রদর্শন করতে ক্লিক করুন।
রেকর্ডার শর্টকাটগুলি কাস্টমাইজ করতে:
- খোলা সেটিংস > শর্টকাটস ।
- রেকর্ডার বিভাগে নীচে স্ক্রোল করুন।
- শর্টকাটগুলি কাস্টমাইজ করার পদক্ষেপগুলি অনুসরণ করুন।
ব্যবহারকারী প্রবাহ সম্পাদনা করুন
রেকর্ডার প্যানেলের শীর্ষে, আপনার জন্য বিকল্প রয়েছে:
- একটি নতুন রেকর্ডিং যুক্ত করুন . একটি নতুন রেকর্ডিং যুক্ত করতে + আইকনে ক্লিক করুন।
- সমস্ত রেকর্ডিং দেখুন . ড্রপ-ডাউন সংরক্ষিত রেকর্ডিংয়ের তালিকা দেখায়। সংরক্ষিত রেকর্ডিংয়ের তালিকাটি প্রসারিত ও পরিচালনা করতে এন রেকর্ডিং (গুলি) বিকল্পটি নির্বাচন করুন।
একটি রেকর্ডিং রফতানি
. স্ক্রিপ্টটি আরও কাস্টমাইজ করতে বা এটি বাগ রিপোর্টিং উদ্দেশ্যে ভাগ করে নেওয়ার জন্য, আপনি নিম্নলিখিত ফর্ম্যাটগুলির মধ্যে একটিতে ব্যবহারকারী প্রবাহ রফতানি করতে পারেন:- JSON ফাইল।
- @পুতুল/রিপ্লে স্ক্রিপ্ট।
- কুকুরছানা স্ক্রিপ্ট।
- কুকুরছানা (ফায়ারফক্সের জন্য) স্ক্রিপ্ট।
- কুকুরছানা ( বাতিঘর বিশ্লেষণ সহ)।
ফর্ম্যাটগুলিতে আরও তথ্যের জন্য, ব্যবহারকারীর প্রবাহ রফতানি দেখুন।
একটি রেকর্ডিং আমদানি করুন
. শুধুমাত্র জেএসএন ফর্ম্যাটে।একটি রেকর্ডিং মুছুন
. নির্বাচিত রেকর্ডিং মুছুন।
আপনি সম্পাদনা বোতামটি ক্লিক করে রেকর্ডিংয়ের নামটি সম্পাদনা করতে পারেন এর পাশে
ব্যবহারকারী প্রবাহ ভাগ করুন
আপনি রেকর্ডারটিতে ব্যবহারকারী প্রবাহ রফতানি ও আমদানি করতে পারেন। এটি বাগ রিপোর্টিংয়ের জন্য দরকারী কারণ আপনি কোনও বাগের পুনরুত্পাদনকারী পদক্ষেপগুলির একটি সঠিক রেকর্ড ভাগ করতে পারেন। আপনি এটি বাহ্যিক লাইব্রেরি দিয়ে রফতানি এবং পুনরায় খেলতে পারেন।
একটি ব্যবহারকারী প্রবাহ রফতানি করুন
ব্যবহারকারীর প্রবাহ রফতানি করতে:
- আপনি রফতানি করতে চান এমন ব্যবহারকারী প্রবাহটি খুলুন।
রেকর্ডার প্যানেলের শীর্ষে রফতানি ক্লিক করুন।
ড্রপ-ডাউন তালিকা থেকে নিম্নলিখিত ফর্ম্যাটগুলির একটি নির্বাচন করুন:
- JSON ফাইল । একটি JSON ফাইল হিসাবে রেকর্ডিং ডাউনলোড করুন।
- @কুকুরছানা/রিপ্লে । একটি কুকুরছানা রিপ্লে স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন।
- কুকুরছানা একটি কুকুরছানা স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন।
- কুকুরছানা (ফায়ারফক্সের জন্য) । ফায়ারফক্স স্ক্রিপ্টের জন্য কুকুরছানা হিসাবে রেকর্ডিংটি ডাউনলোড করুন।
- কুকুরছানা (বাতিঘর বিশ্লেষণ সহ) । এম্বেড থাকা বাতিঘর বিশ্লেষণ সহ একটি পুতুল স্ক্রিপ্ট হিসাবে রেকর্ডিংটি ডাউনলোড করুন।
- রেকর্ডারটির রফতানি এক্সটেনশানগুলি দ্বারা সরবরাহ করা এক বা একাধিক বিকল্প।
ফাইলটি সংরক্ষণ করুন।
আপনি প্রতিটি ডিফল্ট রফতানি বিকল্পের সাথে নিম্নলিখিতগুলি করতে পারেন:
- JSON । মানব-পঠনযোগ্য JSON অবজেক্টটি সম্পাদনা করুন এবং JSON ফাইলটি রেকর্ডারটিতে আবার আমদানি করুন ।
- @কুকুরছানা/রিপ্লে । কুকুরছানা রিপ্লে লাইব্রেরির সাথে স্ক্রিপ্টটি পুনরায় খেলুন। @পপ্পিটার/রিপ্লে স্ক্রিপ্ট হিসাবে রফতানি করার সময়, পদক্ষেপগুলি একটি JSON অবজেক্ট হিসাবে থেকে যায়। আপনি যদি আপনার সিআই/সিডি পাইপলাইনের সাথে সংহত করতে চান তবে এই বিকল্পটি নিখুঁত তবে এখনও জেএসএন হিসাবে পদক্ষেপগুলি সম্পাদনা করার নমনীয়তা রয়েছে, পরে সেগুলি রূপান্তর করুন এবং সেগুলি রেকর্ডারটিতে আবার আমদানি করুন।
- কুকুরছানা স্ক্রিপ্ট । পুতুলের সাথে স্ক্রিপ্টটি পুনরায় খেলুন। যেহেতু পদক্ষেপগুলি জাভাস্ক্রিপ্টে রূপান্তরিত হয়েছে, আপনার আরও সূক্ষ্ম-দানাদার কাস্টমাইজেশন থাকতে পারে, উদাহরণস্বরূপ, পদক্ষেপগুলি লুপ করে। একটি সতর্কতা, আপনি এই স্ক্রিপ্টটি রেকর্ডারটিতে আবার আমদানি করতে পারবেন না।
- কুকুরছানা (ফায়ারফক্সের জন্য) । ওয়েবড্রাইভার বিডিআই সমর্থনের অংশ হিসাবে, আপনি এই কুকুরছানা স্ক্রিপ্ট ক্রোম এবং ফায়ারফক্স উভয় ক্ষেত্রেই চালাতে পারেন।
কুকুরছানা (বাতিঘর বিশ্লেষণ সহ) । এই রফতানি বিকল্পটি আগের মতো একই তবে এতে কোড অন্তর্ভুক্ত রয়েছে যা বাতিঘর বিশ্লেষণ উত্পন্ন করে।
স্ক্রিপ্টটি চালান এবং একটি
flow.report.htmlআউটপুটটি পরীক্ষা করে দেখুন rep report.html ফাইল:# npm i puppeteer lighthouse node your_export.js
একটি এক্সটেনশন ইনস্টল করে একটি কাস্টম ফর্ম্যাটে রফতানি করুন
রেকর্ডার এক্সটেনশন দেখুন।
একটি ব্যবহারকারী প্রবাহ আমদানি করুন
একটি ব্যবহারকারীর প্রবাহ আমদানি করতে:
- আমদানি ক্লিক করুন রেকর্ডার প্যানেলের শীর্ষে বোতাম।
- রেকর্ড করা ব্যবহারকারী প্রবাহ সহ জেএসএন ফাইলটি নির্বাচন করুন।
- ক্লিক করুন আমদানি করা ব্যবহারকারী প্রবাহ চালানোর জন্য পুনরায় খেলুন বোতাম।
বাহ্যিক গ্রন্থাগারগুলির সাথে পুনরায় খেলুন
কুকুরছানা রিপ্লে হ'ল ক্রোম ডিভটুলস দল দ্বারা পরিচালিত একটি ওপেন সোর্স লাইব্রেরি। এটি পুতুলের উপরে নির্মিত। এটি একটি কমান্ড লাইন সরঞ্জাম, আপনি এটির সাথে জেএসএন ফাইলগুলি পুনরায় খেলতে পারেন।
এগুলি ছাড়াও আপনি নিম্নলিখিত তৃতীয় পক্ষের লাইব্রেরিগুলির সাথে জেএসএন ফাইলগুলি রূপান্তর এবং পুনরায় খেলতে পারেন।
জেএসএন ব্যবহারকারী প্রবাহকে কাস্টম স্ক্রিপ্টগুলিতে রূপান্তর করুন:
- সাইপ্রেস ক্রোম রেকর্ডার । আপনি এটি ব্যবহারকারী ফ্লো জেএসএন ফাইলগুলিকে সাইপ্রাস টেস্ট স্ক্রিপ্টগুলিতে রূপান্তর করতে এটি ব্যবহার করতে পারেন। এটি কর্মে দেখতে এই ডেমোটি দেখুন।
- নাইটওয়াচ ক্রোম রেকর্ডার । আপনি এটি ব্যবহারকারী ফ্লো জেএসএন ফাইলগুলিকে নাইটওয়াচ টেস্ট স্ক্রিপ্টগুলিতে রূপান্তর করতে এটি ব্যবহার করতে পারেন।
- Codeceptjs Chrome রেকর্ডার । আপনি এটি ব্যবহারকারী প্রবাহ JSON ফাইলগুলিকে কোডসেপ্টজেএস টেস্ট স্ক্রিপ্টগুলিতে রূপান্তর করতে এটি ব্যবহার করতে পারেন।
পুনরায় খেলুন JSON ব্যবহারকারী প্রবাহ:
- টেস্টক্যাফের সাথে পুনরায় খেলুন । আপনি ব্যবহারকারী প্রবাহ জেএসএন ফাইলগুলি পুনরায় খেলতে এবং এই রেকর্ডিংয়ের জন্য পরীক্ষার প্রতিবেদন তৈরি করতে টেস্টকাফ ব্যবহার করতে পারেন।
- সস ল্যাবগুলির সাথে পুনরায় খেলুন । আপনি সসেক্টল ব্যবহার করে সস ল্যাবগুলিতে জেএসএন ফাইলগুলি পুনরায় খেলতে পারেন।
ডিবাগ ব্যবহারকারী প্রবাহ
যে কোনও কোডের মতো, কখনও কখনও আপনাকে রেকর্ড করা ব্যবহারকারী প্রবাহ ডিবাগ করতে হয়।
আপনাকে ডিবাগ করতে সহায়তা করার জন্য, রেকর্ডার প্যানেল আপনাকে রিপ্লেগুলি ধীর করতে, ব্রেকপয়েন্টগুলি সেট করতে, কার্যকর করার মাধ্যমে পদক্ষেপ নিতে এবং পদক্ষেপের সাথে সমান্তরালে বিভিন্ন ফর্ম্যাটে কোডটি পরিদর্শন করতে দেয়।
রিপ্লে ধীর করুন
ডিফল্টরূপে, রেকর্ডারটি যত দ্রুত সম্ভব ব্যবহারকারী প্রবাহকে পুনরায় প্রতিস্থাপন করে। রেকর্ডিংয়ে কী ঘটে তা বোঝার জন্য, আপনি রিপ্লে গতিটি ধীর করতে পারেন:
- খুলুন ড্রপ-ডাউন মেনু পুনরায় খেলুন ।
- রিপ্লে গতির বিকল্পগুলির মধ্যে একটি চয়ন করুন:
- সাধারণ (ডিফল্ট)
- ধীর
- খুব ধীর
- অত্যন্ত ধীর
কোড পরিদর্শন করুন
বিভিন্ন ফর্ম্যাটে ব্যবহারকারীর প্রবাহের কোডটি পরিদর্শন করতে:
- রেকর্ডার প্যানেলে একটি রেকর্ডিং খুলুন।
- পদক্ষেপের তালিকার উপরের ডানদিকে কোণে শো কোড ক্লিক করুন।
- রেকর্ডারটি পদক্ষেপগুলি এবং তাদের কোডগুলির পাশাপাশি একটি পাশাপাশি দৃশ্য দেখায়।
- আপনি যখন এক ধাপে ঘুরে দেখেন, রেকর্ডারটি এক্সটেনশানগুলির দ্বারা সরবরাহ করা সহ যে কোনও ফর্ম্যাটে তার সম্পর্কিত কোডটি হাইলাইট করে।
আপনি ব্যবহারকারী প্রবাহ রফতানি করতে ব্যবহার করেন এমন একটি ফর্ম্যাট নির্বাচন করতে ফর্ম্যাট ড্রপ-ডাউন তালিকাটি প্রসারিত করুন।
এটি তিনটি ডিফল্ট ফর্ম্যাটগুলির মধ্যে একটি হতে পারে (JSON, @পুতুল/রিপ্লে , কুকুরছানা স্ক্রিপ্ট বা কোনও এক্সটেনশন দ্বারা সরবরাহিত ফর্ম্যাট।
পদক্ষেপের পরামিতি এবং মানগুলি সম্পাদনা করে আপনার রেকর্ডিংটি ডিবাগ করতে এগিয়ে যান। কোড ভিউ সম্পাদনাযোগ্য নয় তবে আপনি বাম দিকে পদক্ষেপে পরিবর্তন আনার সাথে সাথে এটি আপডেট হয়।
ব্রেকপয়েন্টগুলি সেট করুন এবং ধাপে ধাপে কার্যকর করুন
একটি ব্রেকপয়েন্ট সেট করতে এবং ধাপে ধাপে কার্যকর করতে:
- উপর হোভার রেকর্ডিংয়ের যে কোনও পদক্ষেপের পাশে বৃত্ত করুন। বৃত্ত একটিতে পরিণত হয় ব্রেকপয়েন্ট আইকন।
- ক্লিক করুন ব্রেকপয়েন্ট আইকন এবং রেকর্ডিং পুনরায় খেলুন । মৃত্যুদণ্ড কার্যকর বিরতি বিরতি দেয়।
- কার্যকর করার মাধ্যমে পদক্ষেপ নিতে, ক্লিক করুন রেকর্ডার প্যানেলের শীর্ষে অ্যাকশন বারে এক ধাপ বোতামটি কার্যকর করুন ।
- রিপ্লে বন্ধ করতে, ক্লিক করুন রিপ্লে বাতিল করুন ।
পদক্ষেপগুলি সম্পাদনা করুন
আপনি ক্লিক করে রেকর্ডিংয়ের যে কোনও পদক্ষেপ সম্পাদনা করতে পারেন রেকর্ডিংয়ের সময় এবং পরে উভয়ই এর পাশের বোতাম।
আপনি নিখোঁজ পদক্ষেপগুলিও যুক্ত করতে পারেন এবং দুর্ঘটনাক্রমে রেকর্ড করাগুলি সরিয়ে ফেলতে পারেন ।
পদক্ষেপ যোগ করুন
কখনও কখনও, আপনার ম্যানুয়ালি পদক্ষেপগুলি যুক্ত করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, রেকর্ডার স্বয়ংক্রিয়ভাবে hover ইভেন্টগুলি ক্যাপচার করে না কারণ এটি রেকর্ডিংকে দূষিত করে এবং এ জাতীয় সমস্ত ইভেন্ট কার্যকর নয়। তবে, ড্রপ-ডাউন মেনুগুলির মতো ইউআই উপাদানগুলি কেবল hover উপস্থিত হতে পারে। আপনি এই জাতীয় উপাদানগুলির উপর নির্ভরশীল ব্যবহারকারী প্রবাহগুলিতে ম্যানুয়ালি hover পদক্ষেপগুলি যুক্ত করতে পারেন।
ম্যানুয়ালি একটি পদক্ষেপ যুক্ত করতে:
- এই ডেমো পৃষ্ঠাটি খুলুন এবং একটি নতুন রেকর্ডিং শুরু করুন।
- ভিউপোর্টে উপাদানটির উপরে ঘুরে দেখুন। একটি অ্যাকশন মেনু পপ আপ হয়।
- মেনু থেকে একটি ক্রিয়া চয়ন করুন এবং রেকর্ডিং শেষ করুন। রেকর্ডারটি কেবল ক্লিক ইভেন্টটি ক্যাপচার করে।
- ক্লিক করে রেকর্ডিং পুনরায় খেলতে চেষ্টা করুন রিপ্লে । সময়সীমার পরে রিপ্লে ব্যর্থ হয় কারণ রেকর্ডার মেনুতে উপাদানটি অ্যাক্সেস করতে পারে না।
- ক্লিক করুন ক্লিক পদক্ষেপের পাশে থ্রি-ডট বোতাম এবং আগে ধাপ যুক্ত করুন নির্বাচন করুন।
- নতুন পদক্ষেপ প্রসারিত করুন। ডিফল্টরূপে, এটির
waitForElementটাইপ রয়েছে।typeপাশের মানটি ক্লিক করুন এবংhoverনির্বাচন করুন। - এরপরে, নতুন পদক্ষেপের জন্য একটি উপযুক্ত নির্বাচক সেট করুন। ক্লিক করুন নির্বাচন করুন , তারপরে
Hover over me!পপ-আপ মেনুর বাইরে উপাদান। নির্বাচক#clickableসেট করা আছে। - আবার রেকর্ডিং পুনরায় খেলতে চেষ্টা করুন। যুক্ত হোভার পদক্ষেপের সাথে, রেকর্ডারটি সফলভাবে প্রবাহটি পুনরায় প্রতিস্থাপন করে।
দাবী যোগ করুন
রেকর্ডিংয়ের সময়, আপনি জোর দিতে পারেন, উদাহরণস্বরূপ, এইচটিএমএল বৈশিষ্ট্য এবং জাভাস্ক্রিপ্ট বৈশিষ্ট্য। একটি দাবী যোগ করতে:
- একটি রেকর্ডিং শুরু করুন , উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় ।
দৃ ser ়তা যোগ করুন ক্লিক করুন।
রেকর্ডারটি একটি কনফিগারযোগ্য
waitForElementপদক্ষেপ তৈরি করে।এই পদক্ষেপের জন্য নির্বাচকদের নির্দিষ্ট করুন ।
পদক্ষেপটি কনফিগার করুন তবে এর
waitForElementধরণটি পরিবর্তন করবেন না। উদাহরণস্বরূপ, আপনি নির্দিষ্ট করতে পারেন:- এইচটিএমএল বৈশিষ্ট্য । বৈশিষ্ট্য যুক্ত করুন ক্লিক করুন এবং এই পৃষ্ঠার ব্যবহারের উপাদানগুলির বৈশিষ্ট্যটির নাম এবং মান টাইপ করুন। উদাহরণস্বরূপ,
data-test: <value>>। - জাভাস্ক্রিপ্ট সম্পত্তি । বৈশিষ্ট্য যুক্ত করুন ক্লিক করুন এবং JSON ফর্ম্যাটে সম্পত্তিটির নাম এবং মান টাইপ করুন। উদাহরণস্বরূপ,
{".innerText":"<text>"} - অন্যান্য পদক্ষেপের বৈশিষ্ট্য । উদাহরণস্বরূপ,
visible: true।
- এইচটিএমএল বৈশিষ্ট্য । বৈশিষ্ট্য যুক্ত করুন ক্লিক করুন এবং এই পৃষ্ঠার ব্যবহারের উপাদানগুলির বৈশিষ্ট্যটির নাম এবং মান টাইপ করুন। উদাহরণস্বরূপ,
বাকী ব্যবহারকারীর প্রবাহ রেকর্ড করতে এগিয়ে যান এবং তারপরে রেকর্ডিংটি বন্ধ করুন।
ক্লিক করুন
রিপ্লে । যদি কোনও দাবী ব্যর্থ হয় তবে রেকর্ডার একটি সময়সীমা পরে একটি ত্রুটি প্রদর্শন করে।
ক্রিয়াকলাপে এই কর্মপ্রবাহটি দেখতে নিম্নলিখিত ভিডিওটি দেখুন।
পদক্ষেপগুলি অনুলিপি করুন
পুরো ব্যবহারকারীর প্রবাহ রফতানি করার পরিবর্তে, আপনি ক্লিপবোর্ডে একটি পদক্ষেপ অনুলিপি করতে পারেন:
- আপনি অনুলিপি করতে বা ক্লিক করতে চান এমন পদক্ষেপে ডান ক্লিক করুন এর পাশেই থ্রি-ডট আইকন।
- ড্রপ-ডাউন মেনুতে, অনুলিপিগুলির মধ্যে একটি নির্বাচন করুন ... বিকল্পগুলি।
আপনি বিভিন্ন ফর্ম্যাটে পদক্ষেপগুলি অনুলিপি করতে পারেন: জেএসএন, কুকুরছানা , @পুতুল/রিপ্লে এবং এক্সটেনশন দ্বারা সরবরাহ করা।
পদক্ষেপগুলি সরান
দুর্ঘটনাক্রমে রেকর্ড করা পদক্ষেপটি অপসারণ করতে, ধাপে ডান ক্লিক করুন বা ক্লিক করুন এর পাশেই থ্রি-ডট আইকন এবং পদক্ষেপটি সরান নির্বাচন করুন।
অতিরিক্তভাবে, রেকর্ডারটি প্রতিটি রেকর্ডিংয়ের শুরুতে স্বয়ংক্রিয়ভাবে দুটি পৃথক পদক্ষেপ যুক্ত করে:
- ভিউপোর্ট সেট করুন । আপনাকে ভিউপোর্টের মাত্রা, স্কেলিং এবং অন্যান্য বৈশিষ্ট্যগুলি নিয়ন্ত্রণ করতে দেয়।
- নেভিগেট ইউআরএল সেট করে এবং প্রতিটি রিপ্লে জন্য স্বয়ংক্রিয়ভাবে পৃষ্ঠাটি রিফ্রেশ করে।
পৃষ্ঠাটি পুনরায় লোড না করে ইন-পৃষ্ঠা অটোমেশন সম্পাদন করতে, উপরে বর্ণিত হিসাবে নেভিগেশন পদক্ষেপটি সরান।
পদক্ষেপগুলি কনফিগার করুন
একটি পদক্ষেপ কনফিগার করতে:
এর প্রকারটি উল্লেখ করুন:
click,doubleClick,hover, (ইনপুট)change,keyUp,keyDown,scroll,close,navigate(একটি পৃষ্ঠায়),waitForElement,waitForExpressionবাsetViewport।অন্যান্য বৈশিষ্ট্যগুলি
typeমানের উপর নির্ভর করে।typeনীচে প্রয়োজনীয় বৈশিষ্ট্যগুলি নির্দিষ্ট করুন।Al চ্ছিক টাইপ-নির্দিষ্ট বৈশিষ্ট্য যুক্ত করতে এবং সেগুলি নির্দিষ্ট করতে সংশ্লিষ্ট বোতামগুলিতে ক্লিক করুন।
উপলব্ধ বৈশিষ্ট্যের তালিকার জন্য, পদক্ষেপের বৈশিষ্ট্যগুলি দেখুন।
একটি al চ্ছিক সম্পত্তি অপসারণ করতে, ক্লিক করুন এর পাশের বোতামটি সরান ।
কোনও অ্যারে সম্পত্তি থেকে বা কোনও উপাদান যুক্ত করতে বা অপসারণ করতে, উপাদানটির পাশের + বা - বোতামগুলি ক্লিক করুন।
ধাপ বৈশিষ্ট্য
প্রতিটি পদক্ষেপে নিম্নলিখিত al চ্ছিক বৈশিষ্ট্য থাকতে পারে:
- ক্রোম ডেভটুলস প্রোটোকল (সিডিপি) টার্গেটের জন্য
targetUR এ ইউআরএল, ডিফল্টmainকীওয়ার্ডটি বর্তমান পৃষ্ঠাটিকে বোঝায়। -
assertedEventsযা কেবল একটি এককnavigationইভেন্ট হতে পারে।
বেশিরভাগ ধাপের ধরণের জন্য উপলভ্য অন্যান্য সাধারণ বৈশিষ্ট্যগুলি হ'ল:
-
frame-শূন্য-ভিত্তিক সূচকগুলির অ্যারে যা কোনও আইফ্রেম সনাক্ত করে যা বাসা বাঁধতে পারে। উদাহরণস্বরূপ, আপনি মূল লক্ষ্যটির দ্বিতীয় (1) আইফ্রেমের মধ্যে প্রথম (0) আইফ্রেমকে[1, 0]হিসাবে চিহ্নিত করতে পারেন। -
timeout- একটি পদক্ষেপ কার্যকর করার আগে অপেক্ষা করার জন্য মিলিসেকেন্ডের সংখ্যা। আরও তথ্যের জন্য, পদক্ষেপগুলির জন্য সময়সীমা সামঞ্জস্য করুন । -
selectors- নির্বাচকদের অ্যারে। আরও তথ্যের জন্য, নির্বাচনকারীদের বুঝতে দেখুন।
প্রকার-নির্দিষ্ট বৈশিষ্ট্যগুলি হ'ল:
| টাইপ | সম্পত্তি | প্রয়োজন | বর্ণনা |
clickdoubleClick | offsetXoffsetY | | পিক্সেলগুলিতে উপাদান সামগ্রী বাক্সের শীর্ষ-বামের সাথে সম্পর্কিত |
clickdoubleClick | button | পয়েন্টার বোতাম: প্রাথমিক | সহায়ক | দ্বিতীয় | ফিরে | এগিয়ে | |
change | value | | চূড়ান্ত মান |
keyDownkeyUp | key | | মূল নাম |
scroll | xy | পিক্সেলগুলিতে পরম স্ক্রোল এক্স এবং ওয়াই অবস্থানগুলি, ডিফল্ট 0 | |
navigate | url | | লক্ষ্য URL |
waitForElement | operator | >= | == (ডিফল্ট) | <= | |
waitForElement | count | একজন নির্বাচক দ্বারা চিহ্নিত উপাদানগুলির সংখ্যা | |
waitForElement | attributes | এইচটিএমএল বৈশিষ্ট্য এবং এর মান | |
waitForElement | properties | জাভাস্ক্রিপ্ট সম্পত্তি এবং জসনে এর মান | |
waitForElement | visible | বুলিয়ান। সত্য যদি উপাদানটি ডোমে থাকে এবং দৃশ্যমান হয় ( display: none বা visibility: hidden ) | |
waitForElementwaitForExpression | asserted events | বর্তমানে, কেবলমাত্র type: navigation তবে আপনি শিরোনাম এবং ইউআরএল নির্দিষ্ট করতে পারেন | |
waitForElementwaitForExpression | timeout | মিলিসেকেন্ডে অপেক্ষা করার সর্বোচ্চ সময় | |
waitForExpression | expression | | জাভাস্ক্রিপ্ট এক্সপ্রেশন যা সত্য সমাধান করে |
setViewport | widthheight | | পিক্সেলগুলিতে ভিউপোর্টের প্রস্থ এবং উচ্চতা |
setViewport | deviceScaleFactor | | ডিভাইস পিক্সেল অনুপাত (ডিপিআর) এর অনুরূপ, ডিফল্ট 1 |
setViewport | isMobilehasTouchisLandscape | | বুলিয়ান পতাকাগুলি যা নির্দিষ্ট করে কিনা তা নির্দিষ্ট করে: |
দুটি সম্পত্তি রয়েছে যা রিপ্লে বিরতি দেয়:
waitForElementসম্পত্তি কোনও নির্বাচক দ্বারা চিহ্নিত বেশ কয়েকটি উপাদানের উপস্থিতি (বা অনুপস্থিতি) জন্য পদক্ষেপটি অপেক্ষা করে। উদাহরণস্বরূপ, নিম্নলিখিত পদক্ষেপটি.my-classসাথে মেলে এমন পৃষ্ঠায় থাকার জন্য তিনটিরও কম উপাদানগুলির জন্য অপেক্ষা করে।"type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,waitForExpressionসম্পত্তিটি জাভাস্ক্রিপ্ট এক্সপ্রেশনটি সত্যের সমাধান করার জন্য পদক্ষেপটি অপেক্ষা করে। উদাহরণস্বরূপ, নিম্নলিখিত পদক্ষেপটি দুই সেকেন্ডের জন্য বিরতি দেয় এবং তারপরে পুনরায় খেলতে চালিয়ে যাওয়ার অনুমতি দিয়ে সত্যের সমাধান করে।"type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
পদক্ষেপের জন্য সময়সীমা সামঞ্জস্য করুন
আপনার পৃষ্ঠায় যদি ধীর নেটওয়ার্কের অনুরোধ বা দীর্ঘ অ্যানিমেশন থাকে তবে রিপ্লেটি 5000 মিলিসেকেন্ডের ডিফল্ট সময়সীমা ছাড়িয়ে এমন পদক্ষেপগুলিতে ব্যর্থ হতে পারে।
এই সমস্যাটি এড়াতে, আপনি একবারে প্রতিটি পদক্ষেপের জন্য ডিফল্ট সময়সীমা সামঞ্জস্য করতে পারেন বা নির্দিষ্ট পদক্ষেপের জন্য পৃথক সময়সীমা সেট করতে পারেন। নির্দিষ্ট পদক্ষেপে টাইমআউটগুলি ডিফল্টকে ওভাররাইট করে।
প্রতিটি পদক্ষেপের জন্য ডিফল্ট সময়সীমাটি একবারে সামঞ্জস্য করতে:
টাইমআউট বক্সটি সম্পাদনযোগ্য করতে রিপ্লে সেটিংসে ক্লিক করুন।
টাইমআউট বাক্সে, মিলিসেকেন্ডে টাইমআউট মান সেট করুন।
ক্লিক করুন
ক্রিয়াকলাপে অ্যাডজাস্টেড ডিফল্ট সময়সীমা দেখতে পুনরায় খেলুন ।
একটি নির্দিষ্ট পদক্ষেপে ডিফল্ট সময়সীমা ওভাররাইট করতে:
পদক্ষেপটি প্রসারিত করুন এবং সময়সীমা যুক্ত করুন ক্লিক করুন।
timeout: <value>এবং মিলিসেকেন্ডে মান সেট করুন।ক্লিক করুন
কর্মে সময়সীমা সহ পদক্ষেপটি দেখতে পুনরায় খেলুন ।
একটি পদক্ষেপে একটি টাইমআউট ওভাররাইট অপসারণ করতে, মুছুন ক্লিক করুন এর পাশের বোতাম।
নির্বাচনকারীদের বুঝতে
আপনি যখন একটি নতুন রেকর্ডিং শুরু করেন, আপনি নিম্নলিখিতগুলি কনফিগার করতে পারেন:
- সিলেক্টর অ্যাট্রিবিউট টেক্সটবক্সে, একটি কাস্টম পরীক্ষার বৈশিষ্ট্য লিখুন। রেকর্ডার সাধারণ পরীক্ষার বৈশিষ্ট্যের তালিকার পরিবর্তে নির্বাচকদের সনাক্ত করতে এই বৈশিষ্ট্যটি ব্যবহার করবে।
চেকবক্সগুলির সেট রেকর্ড করার জন্য নির্বাচক প্রকারগুলিতে , স্বয়ংক্রিয়ভাবে সনাক্ত করতে নির্বাচকের ধরণগুলি চয়ন করুন:
- সিএসএস । সিনট্যাকটিক নির্বাচক।
- ARIA শব্দার্থক নির্বাচনকারী।
- পাঠ্য যদি পাওয়া যায় তবে স্বল্পতম অনন্য পাঠ্য সহ নির্বাচকরা।
- এক্সপথ এক্সএমএল পাথ ভাষা ব্যবহার করে এমন নির্বাচনকারীরা।
- পিয়ার্স সিএসএসের মতো নির্বাচকরা তবে এটি ছায়া ডমকে ছিদ্র করতে পারে ।
সাধারণ পরীক্ষা নির্বাচনকারী
সাধারণ ওয়েবপৃষ্ঠাগুলির জন্য, id অ্যাট্রিবিউটস এবং সিএসএস class বৈশিষ্ট্যগুলি নির্বাচকদের সনাক্ত করতে রেকর্ডারটির পক্ষে যথেষ্ট। তবে, এটি সর্বদা ক্ষেত্রে নাও হতে পারে কারণ:
- আপনার ওয়েবপৃষ্ঠাগুলি গতিশীল ক্লাস বা আইডি ব্যবহার করতে পারে যা পরিবর্তিত হয়।
- কোড বা ফ্রেমওয়ার্ক পরিবর্তনের কারণে আপনার নির্বাচকরা ভেঙে যেতে পারে।
উদাহরণস্বরূপ, সিএসএস class মানগুলি আধুনিক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলির সাথে বিকশিত অ্যাপ্লিকেশনগুলির জন্য স্বয়ংক্রিয়ভাবে উত্পন্ন হতে পারে (উদাহরণস্বরূপ, প্রতিক্রিয়া , কৌণিক , ভিইউইউ ) এবং সিএসএস ফ্রেমওয়ার্কগুলি।
এই ক্ষেত্রে, আপনি আরও স্থিতিস্থাপক পরীক্ষা তৈরি করতে data-* বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। ইতিমধ্যে কিছু সাধারণ data-* নির্বাচক যা বিকাশকারীরা অটোমেশনের জন্য ব্যবহার করে। রেকর্ডার তাদের পাশাপাশি সমর্থন করে।
আপনার যদি আপনার ওয়েবসাইটে নিম্নলিখিত সাধারণ পরীক্ষার নির্বাচনকারীদের সংজ্ঞায়িত করা হয় তবে রেকর্ডারটি স্বয়ংক্রিয়ভাবে সনাক্ত করে এবং প্রথমে সেগুলি ব্যবহার করে:
-
data-testid -
data-test -
data-qa -
data-cy -
data-test-id -
data-qa-id -
data-testing
উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় "ক্যাপুচিনো" উপাদানটি পরীক্ষা করুন এবং পরীক্ষার বৈশিষ্ট্যগুলি দেখুন:
"ক্যাপুচিনো" এ ক্লিক করুন, রেকর্ডিংয়ের সাথে সম্পর্কিত পদক্ষেপটি প্রসারিত করুন এবং সনাক্তকারী নির্বাচকদের পরীক্ষা করুন:
রেকর্ডিংয়ের নির্বাচককে কাস্টমাইজ করুন
যদি সাধারণ পরীক্ষার নির্বাচকরা আপনার পক্ষে কাজ না করে তবে আপনি কোনও রেকর্ডিংয়ের নির্বাচককে কাস্টমাইজ করতে পারেন।
উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠাটি নির্বাচনকারী হিসাবে data-automate বৈশিষ্ট্য ব্যবহার করে। একটি নতুন রেকর্ডিং শুরু করুন এবং নির্বাচক বৈশিষ্ট্য হিসাবে data-automate প্রবেশ করুন।
একটি ইমেল ঠিকানা পূরণ করুন এবং নির্বাচক মান ( [data-automate=email-address] ) পর্যবেক্ষণ করুন।
নির্বাচক অগ্রাধিকার
আপনি যদি কোনও কাস্টম সিএসএস নির্বাচক বৈশিষ্ট্য নির্দিষ্ট করেছেন তার উপর নির্ভর করে রেকর্ডারটি নিম্নলিখিত ক্রমে নির্বাচকদের সন্ধান করে:
- যদি নির্দিষ্ট করা হয়:
- আপনার কাস্টম সিএসএস বৈশিষ্ট্য সহ সিএসএস নির্বাচক।
- এক্সপথ সিলেক্টর।
- যদি পাওয়া যায় তবে আরিয়া নির্বাচক।
- যদি পাওয়া যায় তবে স্বল্পতম অনন্য পাঠ্য সহ একটি নির্বাচক।
- যদি নির্দিষ্ট না করা হয়:
- যদি পাওয়া যায় তবে আরিয়া নির্বাচক।
- নিম্নলিখিত অগ্রাধিকার সহ সিএসএস নির্বাচনকারী:
- পরীক্ষার জন্য ব্যবহৃত সর্বাধিক সাধারণ বৈশিষ্ট্য:
-
data-testid -
data-test -
data-qa -
data-cy -
data-test-id -
data-qa-id -
data-testing
-
- আইডি বৈশিষ্ট্যগুলি, উদাহরণস্বরূপ,
<div id="some_ID">। - নিয়মিত সিএসএস নির্বাচক।
- পরীক্ষার জন্য ব্যবহৃত সর্বাধিক সাধারণ বৈশিষ্ট্য:
- এক্সপথ সিলেক্টর।
- পিয়ার্স সিলেক্টর।
- যদি পাওয়া যায় তবে স্বল্পতম অনন্য পাঠ্য সহ একটি নির্বাচক।
একাধিক নিয়মিত সিএসএস, এক্সপথ এবং পিয়ার্স নির্বাচক থাকতে পারে। রেকর্ডার ক্যাপচার:
- প্রতিটি মূল স্তরে নিয়মিত সিএসএস এবং এক্সপথ নির্বাচনকারীরা, অর্থাৎ নেস্টেড শ্যাডো হোস্টগুলি যদি থাকে।
- পিয়ার্স নির্বাচক যা সমস্ত ছায়া শিকড়ের মধ্যে সমস্ত উপাদানগুলির মধ্যে অনন্য।
ব্যবহারকারীর প্রবাহ ভাগ করে নেওয়ার উপায়গুলি আবিষ্কার করুন, সেগুলি সম্পাদনা করুন এবং ক্রোম ডেভটুলস রেকর্ডার প্যানেলের এই বিস্তৃত বৈশিষ্ট্যগুলির রেফারেন্সে তাদের পদক্ষেপগুলি সম্পাদনা করুন।
রেকর্ডার প্যানেলের সাথে কাজ করার মূল বিষয়গুলি শিখতে, রেকর্ড, পুনরায় খেলতে এবং ব্যবহারকারীর প্রবাহগুলি পরিমাপ করুন ।
শর্টকাটগুলি শিখুন এবং কাস্টমাইজ করুন
রেকর্ডারটি দ্রুত নেভিগেট করতে শর্টকাটগুলি ব্যবহার করুন। ডিফল্ট শর্টকাটগুলির তালিকার জন্য, রেকর্ডার প্যানেল কীবোর্ড শর্টকাটগুলি দেখুন।
রেকর্ডারটিতে সমস্ত শর্টকাটগুলি তালিকাভুক্ত করে এমন একটি ইঙ্গিতটি খুলতে, উপরের ডানদিকে কোণায় শর্টকাটগুলি প্রদর্শন করতে ক্লিক করুন।
রেকর্ডার শর্টকাটগুলি কাস্টমাইজ করতে:
- খোলা সেটিংস > শর্টকাটস ।
- রেকর্ডার বিভাগে নীচে স্ক্রোল করুন।
- শর্টকাটগুলি কাস্টমাইজ করার পদক্ষেপগুলি অনুসরণ করুন।
ব্যবহারকারী প্রবাহ সম্পাদনা করুন
রেকর্ডার প্যানেলের শীর্ষে, আপনার জন্য বিকল্প রয়েছে:
- একটি নতুন রেকর্ডিং যুক্ত করুন . একটি নতুন রেকর্ডিং যুক্ত করতে + আইকনে ক্লিক করুন।
- সমস্ত রেকর্ডিং দেখুন . ড্রপ-ডাউন সংরক্ষিত রেকর্ডিংয়ের তালিকা দেখায়। সংরক্ষিত রেকর্ডিংয়ের তালিকাটি প্রসারিত ও পরিচালনা করতে এন রেকর্ডিং (গুলি) বিকল্পটি নির্বাচন করুন।
একটি রেকর্ডিং রফতানি
. স্ক্রিপ্টটি আরও কাস্টমাইজ করতে বা এটি বাগ রিপোর্টিং উদ্দেশ্যে ভাগ করে নেওয়ার জন্য, আপনি নিম্নলিখিত ফর্ম্যাটগুলির মধ্যে একটিতে ব্যবহারকারী প্রবাহ রফতানি করতে পারেন:- JSON ফাইল।
- @পুতুল/রিপ্লে স্ক্রিপ্ট।
- কুকুরছানা স্ক্রিপ্ট।
- কুকুরছানা (ফায়ারফক্সের জন্য) স্ক্রিপ্ট।
- কুকুরছানা ( বাতিঘর বিশ্লেষণ সহ)।
ফর্ম্যাটগুলিতে আরও তথ্যের জন্য, ব্যবহারকারীর প্রবাহ রফতানি দেখুন।
একটি রেকর্ডিং আমদানি করুন
. শুধুমাত্র জেএসএন ফর্ম্যাটে।একটি রেকর্ডিং মুছুন
. নির্বাচিত রেকর্ডিং মুছুন।
আপনি সম্পাদনা বোতামটি ক্লিক করে রেকর্ডিংয়ের নামটি সম্পাদনা করতে পারেন এর পাশে
ব্যবহারকারী প্রবাহ ভাগ করুন
আপনি রেকর্ডারটিতে ব্যবহারকারী প্রবাহ রফতানি ও আমদানি করতে পারেন। এটি বাগ রিপোর্টিংয়ের জন্য দরকারী কারণ আপনি কোনও বাগের পুনরুত্পাদনকারী পদক্ষেপগুলির একটি সঠিক রেকর্ড ভাগ করতে পারেন। আপনি এটি বাহ্যিক লাইব্রেরি দিয়ে রফতানি এবং পুনরায় খেলতে পারেন।
একটি ব্যবহারকারী প্রবাহ রফতানি করুন
ব্যবহারকারীর প্রবাহ রফতানি করতে:
- আপনি রফতানি করতে চান এমন ব্যবহারকারী প্রবাহটি খুলুন।
রেকর্ডার প্যানেলের শীর্ষে রফতানি ক্লিক করুন।
ড্রপ-ডাউন তালিকা থেকে নিম্নলিখিত ফর্ম্যাটগুলির একটি নির্বাচন করুন:
- JSON ফাইল । একটি JSON ফাইল হিসাবে রেকর্ডিং ডাউনলোড করুন।
- @কুকুরছানা/রিপ্লে । একটি কুকুরছানা রিপ্লে স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন।
- কুকুরছানা একটি কুকুরছানা স্ক্রিপ্ট হিসাবে রেকর্ডিং ডাউনলোড করুন।
- কুকুরছানা (ফায়ারফক্সের জন্য) । ফায়ারফক্স স্ক্রিপ্টের জন্য কুকুরছানা হিসাবে রেকর্ডিংটি ডাউনলোড করুন।
- কুকুরছানা (বাতিঘর বিশ্লেষণ সহ) । এম্বেড থাকা বাতিঘর বিশ্লেষণ সহ একটি পুতুল স্ক্রিপ্ট হিসাবে রেকর্ডিংটি ডাউনলোড করুন।
- রেকর্ডারটির রফতানি এক্সটেনশানগুলি দ্বারা সরবরাহ করা এক বা একাধিক বিকল্প।
ফাইলটি সংরক্ষণ করুন।
আপনি প্রতিটি ডিফল্ট রফতানি বিকল্পের সাথে নিম্নলিখিতগুলি করতে পারেন:
- JSON । মানব-পঠনযোগ্য JSON অবজেক্টটি সম্পাদনা করুন এবং JSON ফাইলটি রেকর্ডারটিতে আবার আমদানি করুন ।
- @কুকুরছানা/রিপ্লে । কুকুরছানা রিপ্লে লাইব্রেরির সাথে স্ক্রিপ্টটি পুনরায় খেলুন। @পপ্পিটার/রিপ্লে স্ক্রিপ্ট হিসাবে রফতানি করার সময়, পদক্ষেপগুলি একটি JSON অবজেক্ট হিসাবে থেকে যায়। আপনি যদি আপনার সিআই/সিডি পাইপলাইনের সাথে সংহত করতে চান তবে এই বিকল্পটি নিখুঁত তবে এখনও জেএসএন হিসাবে পদক্ষেপগুলি সম্পাদনা করার নমনীয়তা রয়েছে, পরে সেগুলি রূপান্তর করুন এবং সেগুলি রেকর্ডারটিতে আবার আমদানি করুন।
- কুকুরছানা স্ক্রিপ্ট । পুতুলের সাথে স্ক্রিপ্টটি পুনরায় খেলুন। যেহেতু পদক্ষেপগুলি জাভাস্ক্রিপ্টে রূপান্তরিত হয়েছে, আপনার আরও সূক্ষ্ম-দানাদার কাস্টমাইজেশন থাকতে পারে, উদাহরণস্বরূপ, পদক্ষেপগুলি লুপ করে। একটি সতর্কতা, আপনি এই স্ক্রিপ্টটি রেকর্ডারটিতে আবার আমদানি করতে পারবেন না।
- কুকুরছানা (ফায়ারফক্সের জন্য) । ওয়েবড্রাইভার বিডিআই সমর্থনের অংশ হিসাবে, আপনি এই কুকুরছানা স্ক্রিপ্ট ক্রোম এবং ফায়ারফক্স উভয় ক্ষেত্রেই চালাতে পারেন।
কুকুরছানা (বাতিঘর বিশ্লেষণ সহ) । এই রফতানি বিকল্পটি আগের মতো একই তবে এতে কোড অন্তর্ভুক্ত রয়েছে যা বাতিঘর বিশ্লেষণ উত্পন্ন করে।
স্ক্রিপ্টটি চালান এবং একটি
flow.report.htmlআউটপুটটি পরীক্ষা করে দেখুন rep report.html ফাইল:# npm i puppeteer lighthouse node your_export.js
একটি এক্সটেনশন ইনস্টল করে একটি কাস্টম ফর্ম্যাটে রফতানি করুন
রেকর্ডার এক্সটেনশন দেখুন।
একটি ব্যবহারকারী প্রবাহ আমদানি করুন
একটি ব্যবহারকারীর প্রবাহ আমদানি করতে:
- আমদানি ক্লিক করুন রেকর্ডার প্যানেলের শীর্ষে বোতাম।
- রেকর্ড করা ব্যবহারকারী প্রবাহ সহ জেএসএন ফাইলটি নির্বাচন করুন।
- ক্লিক করুন আমদানি করা ব্যবহারকারী প্রবাহ চালানোর জন্য পুনরায় খেলুন বোতাম।
বাহ্যিক গ্রন্থাগারগুলির সাথে পুনরায় খেলুন
কুকুরছানা রিপ্লে হ'ল ক্রোম ডিভটুলস দল দ্বারা পরিচালিত একটি ওপেন সোর্স লাইব্রেরি। এটি পুতুলের উপরে নির্মিত। এটি একটি কমান্ড লাইন সরঞ্জাম, আপনি এটির সাথে জেএসএন ফাইলগুলি পুনরায় খেলতে পারেন।
এগুলি ছাড়াও আপনি নিম্নলিখিত তৃতীয় পক্ষের লাইব্রেরিগুলির সাথে জেএসএন ফাইলগুলি রূপান্তর এবং পুনরায় খেলতে পারেন।
জেএসএন ব্যবহারকারী প্রবাহকে কাস্টম স্ক্রিপ্টগুলিতে রূপান্তর করুন:
- সাইপ্রেস ক্রোম রেকর্ডার । আপনি এটি ব্যবহারকারী ফ্লো জেএসএন ফাইলগুলিকে সাইপ্রাস টেস্ট স্ক্রিপ্টগুলিতে রূপান্তর করতে এটি ব্যবহার করতে পারেন। এটি কর্মে দেখতে এই ডেমোটি দেখুন।
- নাইটওয়াচ ক্রোম রেকর্ডার । আপনি এটি ব্যবহারকারী ফ্লো জেএসএন ফাইলগুলিকে নাইটওয়াচ টেস্ট স্ক্রিপ্টগুলিতে রূপান্তর করতে এটি ব্যবহার করতে পারেন।
- Codeceptjs Chrome রেকর্ডার । আপনি এটি ব্যবহারকারী প্রবাহ JSON ফাইলগুলিকে কোডসেপ্টজেএস টেস্ট স্ক্রিপ্টগুলিতে রূপান্তর করতে এটি ব্যবহার করতে পারেন।
পুনরায় খেলুন JSON ব্যবহারকারী প্রবাহ:
- টেস্টক্যাফের সাথে পুনরায় খেলুন । আপনি ব্যবহারকারী প্রবাহ জেএসএন ফাইলগুলি পুনরায় খেলতে এবং এই রেকর্ডিংয়ের জন্য পরীক্ষার প্রতিবেদন তৈরি করতে টেস্টকাফ ব্যবহার করতে পারেন।
- সস ল্যাবগুলির সাথে পুনরায় খেলুন । আপনি সসেক্টল ব্যবহার করে সস ল্যাবগুলিতে জেএসএন ফাইলগুলি পুনরায় খেলতে পারেন।
ডিবাগ ব্যবহারকারী প্রবাহ
যে কোনও কোডের মতো, কখনও কখনও আপনাকে রেকর্ড করা ব্যবহারকারী প্রবাহ ডিবাগ করতে হয়।
আপনাকে ডিবাগ করতে সহায়তা করার জন্য, রেকর্ডার প্যানেল আপনাকে রিপ্লেগুলি ধীর করতে, ব্রেকপয়েন্টগুলি সেট করতে, কার্যকর করার মাধ্যমে পদক্ষেপ নিতে এবং পদক্ষেপের সাথে সমান্তরালে বিভিন্ন ফর্ম্যাটে কোডটি পরিদর্শন করতে দেয়।
রিপ্লে ধীর করুন
ডিফল্টরূপে, রেকর্ডারটি যত দ্রুত সম্ভব ব্যবহারকারী প্রবাহকে পুনরায় প্রতিস্থাপন করে। রেকর্ডিংয়ে কী ঘটে তা বোঝার জন্য, আপনি রিপ্লে গতিটি ধীর করতে পারেন:
- খুলুন ড্রপ-ডাউন মেনু পুনরায় খেলুন ।
- রিপ্লে গতির বিকল্পগুলির মধ্যে একটি চয়ন করুন:
- সাধারণ (ডিফল্ট)
- ধীর
- খুব ধীর
- অত্যন্ত ধীর
কোড পরিদর্শন করুন
বিভিন্ন ফর্ম্যাটে ব্যবহারকারীর প্রবাহের কোডটি পরিদর্শন করতে:
- রেকর্ডার প্যানেলে একটি রেকর্ডিং খুলুন।
- পদক্ষেপের তালিকার উপরের ডানদিকে কোণে শো কোড ক্লিক করুন।
- রেকর্ডারটি পদক্ষেপগুলি এবং তাদের কোডগুলির পাশাপাশি একটি পাশাপাশি দৃশ্য দেখায়।
- আপনি যখন এক ধাপে ঘুরে দেখেন, রেকর্ডারটি এক্সটেনশানগুলির দ্বারা সরবরাহ করা সহ যে কোনও ফর্ম্যাটে তার সম্পর্কিত কোডটি হাইলাইট করে।
আপনি ব্যবহারকারী প্রবাহ রফতানি করতে ব্যবহার করেন এমন একটি ফর্ম্যাট নির্বাচন করতে ফর্ম্যাট ড্রপ-ডাউন তালিকাটি প্রসারিত করুন।
এটি তিনটি ডিফল্ট ফর্ম্যাটগুলির মধ্যে একটি হতে পারে (JSON, @পুতুল/রিপ্লে , কুকুরছানা স্ক্রিপ্ট বা কোনও এক্সটেনশন দ্বারা সরবরাহিত ফর্ম্যাট।
পদক্ষেপের পরামিতি এবং মানগুলি সম্পাদনা করে আপনার রেকর্ডিংটি ডিবাগ করতে এগিয়ে যান। কোড ভিউ সম্পাদনাযোগ্য নয় তবে আপনি বাম দিকে পদক্ষেপে পরিবর্তন আনার সাথে সাথে এটি আপডেট হয়।
ব্রেকপয়েন্টগুলি সেট করুন এবং ধাপে ধাপে কার্যকর করুন
একটি ব্রেকপয়েন্ট সেট করতে এবং ধাপে ধাপে কার্যকর করতে:
- উপর হোভার রেকর্ডিংয়ের যে কোনও পদক্ষেপের পাশে বৃত্ত করুন। বৃত্ত একটিতে পরিণত হয় ব্রেকপয়েন্ট আইকন।
- ক্লিক করুন ব্রেকপয়েন্ট আইকন এবং রেকর্ডিং পুনরায় খেলুন । মৃত্যুদণ্ড কার্যকর বিরতি বিরতি দেয়।
- কার্যকর করার মাধ্যমে পদক্ষেপ নিতে, ক্লিক করুন রেকর্ডার প্যানেলের শীর্ষে অ্যাকশন বারে এক ধাপ বোতামটি কার্যকর করুন ।
- রিপ্লে বন্ধ করতে, ক্লিক করুন রিপ্লে বাতিল করুন ।
পদক্ষেপগুলি সম্পাদনা করুন
আপনি ক্লিক করে রেকর্ডিংয়ের যে কোনও পদক্ষেপ সম্পাদনা করতে পারেন রেকর্ডিংয়ের সময় এবং পরে উভয়ই এর পাশের বোতাম।
আপনি নিখোঁজ পদক্ষেপগুলিও যুক্ত করতে পারেন এবং দুর্ঘটনাক্রমে রেকর্ড করাগুলি সরিয়ে ফেলতে পারেন ।
পদক্ষেপ যোগ করুন
কখনও কখনও, আপনার ম্যানুয়ালি পদক্ষেপগুলি যুক্ত করার প্রয়োজন হতে পারে। উদাহরণস্বরূপ, রেকর্ডার স্বয়ংক্রিয়ভাবে hover ইভেন্টগুলি ক্যাপচার করে না কারণ এটি রেকর্ডিংকে দূষিত করে এবং এ জাতীয় সমস্ত ইভেন্ট কার্যকর নয়। তবে, ড্রপ-ডাউন মেনুগুলির মতো ইউআই উপাদানগুলি কেবল hover উপস্থিত হতে পারে। আপনি এই জাতীয় উপাদানগুলির উপর নির্ভরশীল ব্যবহারকারী প্রবাহগুলিতে ম্যানুয়ালি hover পদক্ষেপগুলি যুক্ত করতে পারেন।
ম্যানুয়ালি একটি পদক্ষেপ যুক্ত করতে:
- এই ডেমো পৃষ্ঠাটি খুলুন এবং একটি নতুন রেকর্ডিং শুরু করুন।
- ভিউপোর্টে উপাদানটির উপরে ঘুরে দেখুন। একটি অ্যাকশন মেনু পপ আপ হয়।
- মেনু থেকে একটি ক্রিয়া চয়ন করুন এবং রেকর্ডিং শেষ করুন। রেকর্ডারটি কেবল ক্লিক ইভেন্টটি ক্যাপচার করে।
- ক্লিক করে রেকর্ডিং পুনরায় খেলতে চেষ্টা করুন রিপ্লে । সময়সীমার পরে রিপ্লে ব্যর্থ হয় কারণ রেকর্ডার মেনুতে উপাদানটি অ্যাক্সেস করতে পারে না।
- ক্লিক করুন ক্লিক পদক্ষেপের পাশে থ্রি-ডট বোতাম এবং আগে ধাপ যুক্ত করুন নির্বাচন করুন।
- নতুন পদক্ষেপ প্রসারিত করুন। ডিফল্টরূপে, এটির
waitForElementটাইপ রয়েছে।typeপাশের মানটি ক্লিক করুন এবংhoverনির্বাচন করুন। - এরপরে, নতুন পদক্ষেপের জন্য একটি উপযুক্ত নির্বাচক সেট করুন। ক্লিক করুন নির্বাচন করুন , তারপরে
Hover over me!পপ-আপ মেনুর বাইরে উপাদান। নির্বাচক#clickableসেট করা আছে। - আবার রেকর্ডিং পুনরায় খেলতে চেষ্টা করুন। যুক্ত হোভার পদক্ষেপের সাথে, রেকর্ডারটি সফলভাবে প্রবাহটি পুনরায় প্রতিস্থাপন করে।
দাবী যোগ করুন
রেকর্ডিংয়ের সময়, আপনি জোর দিতে পারেন, উদাহরণস্বরূপ, এইচটিএমএল বৈশিষ্ট্য এবং জাভাস্ক্রিপ্ট বৈশিষ্ট্য। একটি দাবী যোগ করতে:
- একটি রেকর্ডিং শুরু করুন , উদাহরণস্বরূপ, এই ডেমো পৃষ্ঠায় ।
দৃ ser ়তা যোগ করুন ক্লিক করুন।
রেকর্ডারটি একটি কনফিগারযোগ্য
waitForElementপদক্ষেপ তৈরি করে।এই পদক্ষেপের জন্য নির্বাচকদের নির্দিষ্ট করুন ।
পদক্ষেপটি কনফিগার করুন তবে এর
waitForElementধরণটি পরিবর্তন করবেন না। উদাহরণস্বরূপ, আপনি নির্দিষ্ট করতে পারেন:- এইচটিএমএল বৈশিষ্ট্য । বৈশিষ্ট্য যুক্ত করুন ক্লিক করুন এবং এই পৃষ্ঠার ব্যবহারের উপাদানগুলির বৈশিষ্ট্যটির নাম এবং মান টাইপ করুন। উদাহরণস্বরূপ,
data-test: <value>>। - জাভাস্ক্রিপ্ট সম্পত্তি । বৈশিষ্ট্য যুক্ত করুন ক্লিক করুন এবং JSON ফর্ম্যাটে সম্পত্তিটির নাম এবং মান টাইপ করুন। উদাহরণস্বরূপ,
{".innerText":"<text>"} - অন্যান্য পদক্ষেপের বৈশিষ্ট্য । উদাহরণস্বরূপ,
visible: true।
- এইচটিএমএল বৈশিষ্ট্য । বৈশিষ্ট্য যুক্ত করুন ক্লিক করুন এবং এই পৃষ্ঠার ব্যবহারের উপাদানগুলির বৈশিষ্ট্যটির নাম এবং মান টাইপ করুন। উদাহরণস্বরূপ,
বাকী ব্যবহারকারীর প্রবাহ রেকর্ড করতে এগিয়ে যান এবং তারপরে রেকর্ডিংটি বন্ধ করুন।
ক্লিক করুন
রিপ্লে । যদি কোনও দাবী ব্যর্থ হয় তবে রেকর্ডার একটি সময়সীমা পরে একটি ত্রুটি প্রদর্শন করে।
ক্রিয়াকলাপে এই কর্মপ্রবাহটি দেখতে নিম্নলিখিত ভিডিওটি দেখুন।
পদক্ষেপগুলি অনুলিপি করুন
পুরো ব্যবহারকারীর প্রবাহ রফতানি করার পরিবর্তে, আপনি ক্লিপবোর্ডে একটি পদক্ষেপ অনুলিপি করতে পারেন:
- আপনি অনুলিপি করতে বা ক্লিক করতে চান এমন পদক্ষেপে ডান ক্লিক করুন এর পাশেই থ্রি-ডট আইকন।
- ড্রপ-ডাউন মেনুতে, অনুলিপিগুলির মধ্যে একটি নির্বাচন করুন ... বিকল্পগুলি।
You can copy steps in various formats: JSON, Puppeteer , @puppeteer/replay , and those provided by extensions .
Remove steps
To remove an accidentally recorded step, right-click the step or click the three-dot icon next to it and select Remove step .
Additionally, the Recorder automatically adds two separate steps to the start of every recording:
- Set viewport . Lets you control the viewport's dimensions, scaling, and other properties .
- Navigate . Sets the URL and automatically refreshes the page for every replay.
To perform in-page automation without reloading the page, remove the navigation step as described above.
Configure steps
To configure a step:
Specify its type:
click,doubleClick,hover, (input)change,keyUp,keyDown,scroll,close,navigate(to a page),waitForElement,waitForExpression, orsetViewport.Other properties depend on the
typevalue.Specify the required properties below the
type.Click the corresponding buttons to add optional type-specific properties and specify them.
For a list of available properties, see Step properties .
To remove an optional property, click the Remove button next to it.
To add or remove an element to or from an array property, click the + or - buttons next to the element.
ধাপ বৈশিষ্ট্য
Each step can have the following optional properties:
-
target—a URL for the Chrome DevTools Protocol (CDP) target, the defaultmainkeyword refers to the current page. -
assertedEventsthat can only be a singlenavigationevent.
Other common properties available for most of the step types are:
-
frame—an array of zero-based indexes that identify an iframe that can be nested. For example, you can identify the first (0) iframe inside a second (1) iframe of the main target as[1, 0]. -
timeout—a number of milliseconds to wait before executing a step. For more information, see Adjust timeouts for steps . -
selectors—an array of selectors. For more information, see Understand selectors .
Type-specific properties are:
| টাইপ | সম্পত্তি | প্রয়োজন | বর্ণনা |
clickdoubleClick | offsetXoffsetY | | Relative to the top-left of the element content box, in pixels |
clickdoubleClick | button | Pointer button: primary | auxiliary | দ্বিতীয় | ফিরে | এগিয়ে | |
change | value | | Final value |
keyDownkeyUp | key | | মূল নাম |
scroll | xy | Absolute scroll x and y positions in pixels, default 0 | |
navigate | url | | লক্ষ্য URL |
waitForElement | operator | >= | == (default) | <= | |
waitForElement | count | Number of elements identified by a selector | |
waitForElement | attributes | HTML attribute and its value | |
waitForElement | properties | JavaScript property and its value in JSON | |
waitForElement | visible | বুলিয়ান। True if the element is in the DOM and visible (doesn't have display: none or visibility: hidden ) | |
waitForElementwaitForExpression | asserted events | Currently, only type: navigation but you can specify the title and URL | |
waitForElementwaitForExpression | timeout | Maximum time to wait in milliseconds | |
waitForExpression | expression | | JavaScript expression that resolves to true |
setViewport | widthheight | | Width and height of the viewport in pixels |
setViewport | deviceScaleFactor | | Similar to Device Pixel Ratio (DPR), default 1 |
setViewport | isMobilehasTouchisLandscape | | Boolean flags that specify whether to: |
There are two properties that make the replay pause:
The
waitForElementproperty makes the step wait for the presence (or absence) of a number of elements identified by a selector. For example, the following step waits for less than three elements to be on the page that match the selector.my-class."type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,The
waitForExpressionproperty makes the step wait for a JavaScript expression to resolve to true. For example, the following step pauses for two seconds and then resolves to true allowing the replay to continue."type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
Adjust timeouts for steps
In case your page has slow network requests or lengthy animations, the replay can fail on steps that exceed the default timeout of 5000 milliseconds.
To avoid this problem, you can adjust the default timeout for each step at once or set separate timeouts for specific steps. Timeouts on specific steps overwrite the default.
To adjust the default timeout for each step at once:
Click Replay settings to make the Timeout box editable.
In the Timeout box, set the timeout value in milliseconds.
ক্লিক করুন
Replay to see the adjusted default timeout in action.
To overwrite the default timeout on a specific step:
Expand the step and click Add timeout .
Click on the
timeout: <value>and set the value in milliseconds.ক্লিক করুন
Replay to see the step with the timeout in action.
To remove a timeout overwrite on a step, click the Delete button next to it.
Understand selectors
When you start a new recording, you can configure the following:
- In the Selector attribute textbox, enter a custom test attribute . The Recorder will use this attribute to detect selectors instead of a list of common test attributes .
In the Selector types to record set of checkboxes, choose the types of selectors to detect automatically:
- সিএসএস । Syntactic selectors.
- ARIA Semantic selectors.
- পাঠ্য Selectors with the shortest unique text if available.
- XPath . Selectors that use XML Path Language .
- পিয়ার্স Selectors similar to the CSS ones but that can pierce shadow DOM .
Common test selectors
For simple webpages, id attributes and CSS class attributes are sufficient for the Recorder to detect the selectors. However, that might not always be the case because:
- Your webpages may use dynamic classes or IDs that change.
- Your selectors may break because of code or framework changes.
For example, the CSS class values might be auto-generated for applications developed with modern JavaScript frameworks (for example, React , Angular , Vue ) and CSS frameworks.
In these cases, you can use data-* attributes to create more resilient tests. There are already some common data-* selectors that developers use for automation. The Recorder supports them as well.
If you have the following common test selectors defined on your website, the Recorder automatically detects and uses them first:
-
data-testid -
data-test -
data-qa -
data-cy -
data-test-id -
data-qa-id -
data-testing
For example, inspect the "Cappuccino" element on this demo page and see the test attributes:
Record a click on "Cappuccino", expand the corresponding step in the recording, and check the detected selectors:
Customize the recording's selector
You can customize the selector of a recording if the common test selectors don't work for you.
For example, this demo page uses the data-automate attribute as the selector. Start a new recording and enter the data-automate as the selector attribute.
Fill in an email address and observe the selector value ( [data-automate=email-address] ).
Selector priority
The Recorder looks for selectors in the following order depending on if you specified a custom CSS selector attribute:
- If specified:
- CSS selector with your custom CSS attribute.
- XPath selectors.
- ARIA selector if found.
- A selector with the shortest unique text if found.
- If not specified:
- ARIA selector if found.
- CSS selectors with the following priority:
- The most common attributes used for testing:
-
data-testid -
data-test -
data-qa -
data-cy -
data-test-id -
data-qa-id -
data-testing
-
- ID attributes, for example,
<div id="some_ID">. - Regular CSS selectors.
- The most common attributes used for testing:
- XPath selectors.
- Pierce selectors.
- A selector with the shortest unique text if found.
There can be multiple regular CSS, XPath, and Pierce selectors. The Recorder captures:
- Regular CSS and XPath selectors at every root level, that is, nested shadow hosts , if any.
- Pierce selectors that are unique among all elements within all shadow roots.