DOM Path Finder দিয়ে পেজের যেকোনো এলিমেন্টে হোভার করে তার ইউনিক CSS সিলেক্টর, শর্ট সিলেক্টর, XPath এবং রেডি-টু-পেস্ট querySelector স্নিপেট দেখা যায়। এলিমেন্ট লক করতে ক্লিক করুন, তারপর Parent/Child/Sibling বাটন দিয়ে নেভিগেট করুন। Selenium, Puppeteer, Playwright এবং Cypress ব্যবহারকারীদের জন্য অপরিহার্য।
অটোমেশন টেস্ট, ওয়েব স্ক্র্যাপার বা বুকমার্কলেট লেখা মানেই সিলেক্টর লেখা — কিন্তু একটি নির্দিষ্ট এলিমেন্টের জন্য স্থিতিশীল, ইউনিক সিলেক্টর বের করা বিরক্তিকর কাজ। আপনি DevTools খোলেন, ইনস্পেক্ট করেন, রাইট-ক্লিক করেন, সিলেক্টর কপি করেন, এবং আশা করেন ফলাফলটা আসলেই ইউনিক ও স্থিতিশীল। DOM Path Finder এটাকে একটি মাত্র ক্লিকে নামিয়ে আনে। টুলটি অ্যাক্টিভেট করুন এবং পেজের যেকোনো এলিমেন্টে হোভার করুন — যতই মুভ করবেন এটা পার্পল রঙে হাইলাইট হবে। লক করতে ক্লিক করুন, এবং প্যানেলে চারটি সিলেক্টর ফরম্যাট চলে আসবে: একটি ইউনিক পাথ-ভিত্তিক CSS সিলেক্টর, একটি শর্ট সিলেক্টর (ট্যাগ + ক্লাস বা id), একটি অ্যাবসোলিউট XPath, এবং একটি প্রি-র্যাপড document.querySelector('...') স্নিপেট যা সরাসরি স্ক্রিপ্টে পেস্ট করা যায়। একবার লক হয়ে গেলে, ফোকাস না হারিয়ে Parent / First Child / Prev Sibling / Next Sibling বাটন দিয়ে DOM ট্রি নেভিগেট করতে পারবেন। Data-testid অ্যাট্রিবিউট থাকলে সেটা শনাক্ত করে প্রাধান্য দেওয়া হয় — যারা এগুলো অ্যাঙ্কর হিসেবে ব্যবহার করেন সেই Playwright/Cypress ব্যবহারকারীদের জন্য আদর্শ। টুলটি দ্রুত প্রসঙ্গের জন্য ট্যাগ, id, ক্লাস, বাউন্ডিং সাইজ, এবং display/position প্রোপার্টিও দেখায়।
পেজের ওপর মাউস মুভ করলেই এলিমেন্ট পার্পল রঙে হাইলাইট হবে। লক করতে ক্লিক করুন — DevTools Inspector-এর প্রয়োজন নেই।
ইউনিক CSS পাথ, শর্ট সিলেক্টর, অ্যাবসোলিউট XPath, এবং র্যাপড querySelector স্নিপেট। আপনার টুলিংয়ের সাথে যেটা মানানসই সেটা বেছে নিন।
লক হয়ে গেলে, আবার পিক না করেই DOM-এর মধ্যে চলাফেরা করতে Parent / First Child / Prev / Next বাটন ব্যবহার করুন।
প্রতিটি সিলেক্টরের নিজস্ব Copy বাটন আছে। আপনার স্ক্রিপ্টের প্রয়োজনীয় ফরম্যাট নিয়ে সরাসরি টেস্ট বা স্ক্র্যাপারে পেস্ট করুন।
ট্যাগ, id, ক্লাস, সাইজ, display এবং position দেখায় — আবার ইনস্পেক্ট না করেই দ্রুত ওভারভিউ।
এলিমেন্টের id থাকলে ইউনিক CSS-এ #id ব্যবহার হয়। data-testid থাকলে সেটা Playwright/Cypress ব্যবহারের জন্য সামনে আনা হয়।
টেস্টের অধীন এলিমেন্ট পিক করুন, তার সিলেক্টর কপি করুন, এবং টেস্ট কোডে পেস্ট করুন — আর ইউনিক পাথ অনুমান করার দরকার নেই।
স্ক্র্যাপিং টার্গেটে লিস্ট আইটেমের স্ট্রাকচারাল সিলেক্টর খুঁজুন। স্থিতিশীলতার প্রয়োজন অনুযায়ী শর্ট বা পাথ-ভিত্তিক সিলেক্টর ব্যবহার করুন।
একটি এলিমেন্ট লক করুন এবং কেন CSS প্রয়োগ হচ্ছে না তা খতিয়ে দেখতে তার পাথ কপি করুন — ইউনিক সিলেক্টর এলিমেন্টের পুরো ট্রি-অবস্থান দেখায়।
দ্রুত ইন্টারঅ্যাক্টিভ ডিবাগিংয়ের জন্য প্রি-র্যাপড document.querySelector(...) স্নিপেট সরাসরি DevTools কনসোলে কপি করুন।
অ্যাক্সেসিবিলিটি অডিট করার সময়, axe-core বা XPath রেফারেন্স আশা করা অন্য a11y টুলে এলিমেন্ট ফিড করতে XPath ব্যবহার করুন।
DevSuite Pro ডকে Path Finder আইকনে ক্লিক করুন। টুলটি তৎক্ষণাৎ পিকিং মোডে অ্যাক্টিভেট হয়।
পেজের ওপর মাউস মুভ করুন — যেটার ওপর দিয়ে যাবেন সেটাই পার্পল রঙে হাইলাইট হবে। লক্ষ্য এলিমেন্ট খুঁজতে প্রয়োজনমতো স্ক্রল করুন।
যে এলিমেন্টটি চান তাতে ক্লিক করুন। পিকার থেমে যাবে এবং প্যানেলে সিলেক্টর ফরম্যাট, কনটেক্সট, ও কপি বাটন চলে আসবে।
সিলেকশন পরিমার্জন করতে Parent/Child/Sibling বাটন ব্যবহার করুন, অথবা আবার হোভার-পিকিং শুরু করতে Pick Element-এ ক্লিক করুন।
প্রয়োজনীয় ফরম্যাটের (CSS, XPath, বা querySelector) পাশে Copy-তে ক্লিক করুন। সরাসরি আপনার টেস্ট, স্ক্র্যাপার বা কনসোলে পেস্ট করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৬৪+ ডেভলপার টুল আনলক করুন।
