DOM Path Finder በገጽ ላይ ያለውን ማንኛውንም ኤለመንት ጠቋሚዎን በላዩ ላይ በማንቀሳቀስ ልዩ CSS selector፣ አጭር selector፣ XPath፣ እና ለመለጠፍ ዝግጁ የሆነ querySelector snippet እንዲያዩ ያስችልዎታል። ኤለመንቱን ለመቆለፍ ጠቅ ያድርጉ፣ ከዚያም በ Parent/Child/Sibling አዝራሮች ይምሩ። ለ Selenium, Puppeteer, Playwright, እና Cypress ተጠቃሚዎች አስፈላጊ ነው።
የአውቶሜሽን ሙከራዎችን፣ የድር scrapers ን፣ ወይም bookmarklets ን መፃፍ selectors መፃፍን ይጠይቃል — ነገር ግን ለተወሰነ ኤለመንት የተረጋጋ፣ ልዩ selector ማግኘት አድካሚ ነው። DevTools ይከፍታሉ፣ ይመረምራሉ፣ በቀኝ ጠቅ ያደርጋሉ፣ selector ይቅዳሉ፣ እና ውጤቱ በርግጥ ልዩ እና የተረጋጋ እንደሆነ ተስፋ ያደርጋሉ። DOM Path Finder ይህንን ወደ አንድ ጠቅታ ያደርገዋል። መሳሪያውን ያንቁ እና በገጹ ላይ ያለውን ማንኛውንም ኤለመንት ጠቋሚዎን ያንቀሳቅሱ — በሚንቀሳቀሱበት ጊዜ በሐምራዊ ቀለም ይደምቃል። ለመቆለፍ ጠቅ ያድርጉ፣ እና ፓነሉ በአራት የ selector ቅርፆች ይሞላል፡ ልዩ path-based CSS selector፣ አጭር selector (tag + classes ወይም id)፣ ፍፁም XPath፣ እና ወደ script ውስጥ ለመለጠፍ ዝግጁ የሆነ document.querySelector('...') snippet። ከተቆለፈ በኋላ፣ ትኩረትዎን ሳያጡ በ Parent / First Child / Prev Sibling / Next Sibling አዝራሮች የ DOM ዛፍን መምራት ይችላሉ። Data-testid ባህርያት ካሉ ይታወቃሉ እና ቅድሚያ ይሰጣቸዋል — ለ Playwright/Cypress ተጠቃሚዎች እነሱን እንደ ማጣቀሻ ለሚጠቀሙ ተስማሚ ነው። መሳሪያው ደግሞ ለፈጣን ግንዛቤ tag, id, classes, ወሰን መጠን፣ እና display/position ባህርያትን ያሳያል።
ኤለመንቶች በሐምራዊ ቀለም ሲደምቁ ለማየት ጠቋሚዎን በገጹ ላይ ያንቀሳቅሱ። ለመቆለፍ ጠቅ ያድርጉ — DevTools Inspector ማስፈለግ የለም።
ልዩ CSS path, አጭር selector, ፍፁም XPath, እና የተጠቀለለ querySelector snippet። ለመሳሪያዎ የሚስማማውን ይምረጡ።
ከተቆለፈ በኋላ፣ እንደገና ሳይመርጡ በ DOM ውስጥ ለመንቀሳቀስ Parent / First Child / Prev / Next አዝራሮችን ይጠቀሙ።
እያንዳንዱ selector የራሱ Copy አዝራር አለው። ስክሪፕትዎ የሚያስፈልገውን ቅርፅ ያግኙ እና ወደ ሙከራዎ ወይም scraper ውስጥ በቀጥታ ይለጥፉ።
tag, id, classes, መጠን, display, እና position ያሳያል — ያለ እንደገና ምርመራ ፈጣን አጠቃላይ እይታ።
ኤለመንቱ id ካለው፣ ልዩ CSS #id ይጠቀማል። data-testid ካለ፣ ለ Playwright/Cypress አጠቃቀም ይታያል።
የሙከራውን ኤለመንት ይምረጡ፣ selector ውን ይቅዱ፣ እና ወደ ሙከራ ኮድዎ ይለጥፉ — ስለ ልዩ path ከዚህ በኋላ መገመት አያስፈልግም።
ለ scraping ኢላማ ውስጥ ላሉ ዝርዝር ንጥሎች structural selector ያግኙ። እንደ መረጋጋት ፍላጎትዎ አጭር ወይም path-based selector ይጠቀሙ።
ኤለመንት ቆልፈው path ውን ይቅዱ CSS ለምን እንደማይተገበር ለመመርመር — ልዩ selector የኤለመንቱን ሙሉ የዛፍ አካባቢ ያሳያል።
ለፈጣን መስተጋብራዊ ማረም የተጠቀለለውን document.querySelector(...) snippet በቀጥታ ወደ DevTools Console ይቅዱ።
ተደራሽነትን ሲመረምሩ፣ XPath ን ኤለመንቶች XPath ማጣቀሻዎችን ወደሚጠብቁ axe-core ወይም ሌሎች a11y መሳሪያዎች ውስጥ ለማስገባት ይጠቀሙ።
በ DevSuite Pro dock ውስጥ ያለውን Path Finder አዶ ጠቅ ያድርጉ። መሳሪያው ወዲያውኑ በመምረጥ ሁነታ ይነቃል።
ጠቋሚዎን በገጹ ላይ ያንቀሳቅሱ — በላዩ ሲያልፉ እያንዳንዱ ኤለመንት በሐምራዊ ይደምቃል። ኢላማዎን ለማግኘት እንደአስፈላጊነቱ ይንከባለሉ።
የፈለጉትን ኤለመንት ጠቅ ያድርጉ። መራጩ ይቆማል እና ፓነሉ በ selector ቅርፆች፣ ገጽታ፣ እና የመቅዳት አዝራሮች ይሞላል።
ምርጫውን ለማጥራት Parent/Child/Sibling አዝራሮችን ይጠቀሙ፣ ወይም እንደገና በጠቋሚ-ማንቀሳቀስ-መምረጥ ለመጀመር Pick Element ጠቅ ያድርጉ።
ከሚያስፈልግዎት ቅርፅ (CSS, XPath, ወይም querySelector) አጠገብ ያለውን Copy ጠቅ ያድርጉ። ወደ ሙከራዎ፣ scraper ወይም console ውስጥ በቀጥታ ይለጥፉ።
DevSuite Pro ን በነፃ ይጫኑ እና 64+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
