يتيح لك مستخرج مسارات DOM التحويم فوق أي عنصر في الصفحة للكشف عن محدد CSS الفريد الخاص به، والمحدد القصير، و XPath، وقصاصة querySelector جاهزة للصق. اضغط لقفل العنصر، ثم تنقل باستخدام أزرار الأب/الابن/الأخ. ضروري لمستخدمي Selenium و Puppeteer و Playwright و Cypress.
تعني كتابة اختبارات الأتمتة، أو أدوات استخراج البيانات (scrapers)، أو الأدوات المرجعية (bookmarklets) كتابة محددات - لكن اكتشاف محدد فريد ومستقر لعنصر معين هو أمر ممل. تفتح أدوات المطور، وتفحص، وتنقر بزر الماوس الأيمن، وتنسخ المحدد، وتأمل أن تكون النتيجة فريدة ومستقرة بالفعل. يجعل مستخرج مسارات DOM هذا الأمر يتم بضغطة واحدة. قم بتنشيط الأداة وقم بالتحويم فوق أي عنصر في الصفحة - سيتم تمييزه باللون الأرجواني أثناء التحرك. اضغط لقفل العنصر، وستمتلئ اللوحة بأربعة تنسيقات للمحددات: محدد CSS فريد يعتمد على المسار، ومحدد قصير (الوسم + الأصناف أو المعرف)، و XPath مطلق، وقصاصة document.querySelector('...') جاهزة للصق في سكربت. بمجرد القفل، يمكنك التنقل في شجرة DOM باستخدام أزرار الأب / الابن الأول / الأخ السابق / الأخ التالي دون فقدان التركيز. يتم اكتشاف سمات data-testid وإعطاؤها الأولوية عند وجودها - وهي مثالية لمستخدمي Playwright/Cypress الذين يستخدمونها كنقاط ارتكاز. تعرض الأداة أيضاً الوسم، والمعرف (id)، والأصناف (classes)، وحجم الحدود، وخصائص العرض/الموقع لسياق سريع.
حرك الماوس فوق الصفحة لرؤية تمييز العناصر باللون الأرجواني. اضغط للقفل - لا حاجة لمفتش أدوات المطور (DevTools Inspector).
مسار CSS فريد، ومحدد قصير، و XPath مطلق، وقصاصة querySelector مغلفة. اختر ما يناسب أدواتك.
بمجرد القفل، استخدم أزرار الأب / الابن الأول / السابق / التالي للتنقل عبر DOM دون الحاجة للاختيار مرة أخرى.
لكل محدد زر نسخ خاص به. احصل على التنسيق الذي يحتاجه السكربت الخاص بك وألصقه مباشرة في اختبارك أو أداة استخراج البيانات.
يعرض الوسم، والمعرف، والأصناف، والحجم، والعرض، والموقع - نظرة عامة سريعة دون إعادة الفحص.
إذا كان للعنصر معرف (id)، فإن مسار CSS الفريد يستخدم #id. إذا كانت سمة data-testid موجودة، فسيتم إظهارها لاستخدام Playwright/Cypress.
اختر العنصر قيد الاختبار، وانسخ المحدد الخاص به، وألصقه في كود الاختبار الخاص بك - لا مزيد من التخمين للمسارات الفريدة.
ابحث عن المحدد الهيكلي لعناصر القائمة في هدف استخراج البيانات. استخدم المحدد القصير أو المعتمد على المسار بناءً على احتياجات الاستقرار.
قم بقفل عنصر ونسخ مساره للتحقيق في سبب عدم تطبيق CSS - يوضح المحدد الفريد موقع العنصر الكامل في الشجرة.
انسخ قصاصة document.querySelector(...) المغلفة مسبقاً مباشرة إلى وحدة تحكم أدوات المطور لتصحيح الأخطاء التفاعلي السريع.
عند تدقيق الوصول الميسر، استخدم XPath لتزويد أدوات مثل axe-core أو غيرها من أدوات الوصول الميسر بالعناصر التي تتوقع مراجع XPath.
اضغط على أيقونة مستخرج المسار في لوحة DevSuite Pro. سيتم تنشيط الأداة في وضع الاختيار فوراً.
حرك الماوس فوق الصفحة - يتم تمييز كل عنصر بالأرجواني عند المرور فوقه. قم بالتمرير حسب الحاجة للعثور على هدفك.
اضغط على العنصر الذي تريده. تتوقف أداة الاختيار وتمتلئ اللوحة بتنسيقات المحددات، والسياق، وأزرار النسخ.
استخدم أزرار الأب/الابن/الأخ لتحسين الاختيار، أو اضغط على 'اختيار عنصر' لبدء الاختيار بالتحويم مرة أخرى.
اضغط على 'نسخ' بجانب التنسيق الذي تحتاجه (CSS أو XPath أو querySelector). الصق مباشرة في اختبارك، أو أداة استخراج البيانات، أو وحدة التحكم (console).
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 64 أداة للمطورين لمتصفحك.
