DOM Path Finder به شما اجازه میدهد با نگه داشتن ماوس روی هر عنصر صفحه، CSS selector منحصربهفرد، selector کوتاه، XPath و کد آماده querySelector آن را ببینید. کلیک کنید تا عنصر قفل شود، سپس با دکمههای Parent/Child/Sibling پیمایش کنید. برای کاربران Selenium، Puppeteer، Playwright و Cypress ضروری است.
نوشتن تستهای خودکار، وباسکرپرها یا بوکمارکلتها یعنی نوشتن selector — اما پیدا کردن یک selector پایدار و منحصربهفرد برای یک عنصر خاص کاری خستهکننده است. باید DevTools را باز کنید، بازرسی کنید، راستکلیک کنید، selector را کپی کنید و امیدوار باشید که نتیجه واقعاً منحصربهفرد و پایدار باشد. DOM Path Finder این کار را به یک کلیک تبدیل میکند. ابزار را فعال کنید و روی هر عنصر صفحه ماوس را نگه دارید — با حرکت ماوس، رنگ بنفش هایلایت میشود. کلیک کنید تا قفل شود، و پنل با چهار فرمت selector پر میشود: یک CSS selector مبتنی بر مسیر و منحصربهفرد، یک selector کوتاه (تگ + کلاسها یا id)، یک XPath مطلق، و یک قطعه کد آماده document.querySelector('...') برای پیست در اسکریپت. پس از قفل شدن، میتوانید با دکمههای Parent / First Child / Prev Sibling / Next Sibling در درخت DOM پیمایش کنید بدون آنکه فوکوس را از دست بدهید. ویژگیهای data-testid در صورت وجود شناسایی و در اولویت قرار میگیرند — ایدهآل برای کاربران Playwright/Cypress که از آنها بهعنوان لنگر استفاده میکنند. ابزار همچنین تگ، id، کلاسها، اندازه محدوده و ویژگیهای display/position را برای زمینه سریع نشان میدهد.
ماوس را روی صفحه حرکت دهید تا عناصر به رنگ بنفش هایلایت شوند. برای قفل کردن کلیک کنید — دیگر نیازی به DevTools Inspector نیست.
مسیر CSS منحصربهفرد، selector کوتاه، XPath مطلق، و قطعه کد querySelector آماده. هرکدام که با ابزار شما تناسب دارد را انتخاب کنید.
پس از قفل شدن، از دکمههای Parent / First Child / Prev / Next برای حرکت در DOM بدون نیاز به انتخاب مجدد استفاده کنید.
هر selector دکمه Copy مخصوص خود را دارد. فرمت موردنیاز اسکریپت خود را بردارید و مستقیم در تست یا اسکرپر خود پیست کنید.
تگ، id، کلاسها، اندازه، display و position را نمایش میدهد — نمای سریع بدون نیاز به بازرسی مجدد.
اگر عنصر id داشته باشد، CSS منحصربهفرد از #id استفاده میکند. اگر data-testid موجود باشد، برای استفاده در Playwright/Cypress نمایش داده میشود.
عنصر تحت تست را انتخاب کنید، selector آن را کپی کنید و در کد تست خود پیست کنید — دیگر نیازی به حدس زدن مسیرهای منحصربهفرد نیست.
selector ساختاری آیتمهای لیست در هدف اسکرپینگ را پیدا کنید. بسته به نیاز پایداری، از selector کوتاه یا مبتنی بر مسیر استفاده کنید.
یک عنصر را قفل کنید و مسیر آن را کپی کنید تا بررسی کنید چرا CSS اعمال نمیشود — selector منحصربهفرد موقعیت کامل عنصر در درخت را نشان میدهد.
قطعه کد آماده document.querySelector(...) را مستقیم در کنسول DevTools برای دیباگ تعاملی سریع کپی کنید.
هنگام ممیزی دسترسیپذیری، از XPath برای دادن عناصر به axe-core یا سایر ابزارهای a11y که ارجاعات XPath میخواهند استفاده کنید.
روی آیکون Path Finder در داک DevSuite Pro کلیک کنید. ابزار بلافاصله در حالت انتخاب فعال میشود.
ماوس را روی صفحه حرکت دهید — هر عنصر با عبور ماوس از روی آن به رنگ بنفش هایلایت میشود. در صورت نیاز اسکرول کنید تا هدف خود را پیدا کنید.
روی عنصر موردنظر کلیک کنید. انتخابگر متوقف میشود و پنل با فرمتهای selector، زمینه و دکمههای کپی پر میشود.
از دکمههای Parent/Child/Sibling برای اصلاح انتخاب استفاده کنید، یا روی Pick Element کلیک کنید تا انتخاب با هاور دوباره شروع شود.
روی Copy کنار فرمت موردنیاز کلیک کنید (CSS، XPath یا querySelector). مستقیم در تست، اسکرپر یا کنسول خود پیست کنید.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۶۴ ابزار توسعه را برای مرورگر خود باز کنید.
