2010-02-05 13 views
44

मैं सोच रहा था कि फ़ायरफ़ॉक्स में ऐसा कोई एडन है, जहां आप सीएसएस पथ का परीक्षण कर सकते हैं ताकि यह जांच सके कि वे सही तत्व ढूंढ रहे हैं या नहीं? मैं xpath स्थानों के लिए xpather के समान कुछ ढूंढ रहा था।क्या कोई एडन है जिसे आप फ़ायरफ़ॉक्स में सीएसएस चयनकर्ताओं का परीक्षण कर सकते हैं?

+0

यदि यह प्रश्न आज पूछा गया था तो इसे ऑफ-विषय के रूप में बंद कर दिया जाएगा ... – Jack

उत्तर

47

FireFinder वही करता है जो आप खोज रहे हैं। आप या तो सीएसएस, या एक्सपीएथ एक्सप्रेशन का मूल्यांकन कर सकते हैं, यह मिलान करने वाले तत्वों की सूची देगा, और उनके चारों ओर एक लाल सीमा भी खींचा जाएगा।

यदि आपको बस कुछ त्वरित परीक्षण करने की आवश्यकता है, तो आप डेवलपर टूलबार (एफ 12) भी खोल सकते हैं, और कुछ त्वरित खोज करने के लिए $$('selector') का उपयोग कर सकते हैं।

FireFinder

+2

+1 का उपयोग पूर्ण, सही उत्तर और इसके साथ जाने के लिए एक अच्छा यूआई के लिए कर सकते हैं। – Nicole

+0

यह वही है जो मैं ढूंढ रहा था और उपयोग करने में बहुत आसान था! धन्यवाद! – user223871

21

हाँ आप FireBug लिए जा सकते हैं, एक बहुमुखी Firefox वेब विकास ऐड-ऑन।

Firebug

एक CSS चयनकर्ता परीक्षण करने के लिए, "कंसोल" टैब पर जाएँ और नीचे के रूप में एक आदेश डालें (कैसे कमांड लाइन को खोजने के लिए पर more info)।

Firebug command line

अंदर कमांड लाइन $$("your CSS selector") सिंटैक्स का उपयोग CSS चयनकर्ताओं का परीक्षण करने के लिए, और अधिक विस्तार here में विस्तार से बताया।

$$("body") 
+0

फायरबग एफटीडब्ल्यू !!!! – gingerbreadboy

+0

फ़ायरबग में एक सीएसएस चयनकर्ता का उपयोग कर तत्व पर नेविगेट करने का कोई तरीका है? यह डीओएम में तत्व की स्थिति को देखने के समान ही नहीं है। – Nicole

+0

@ उत्पत्ति: हाँ यह संभव है, इसके दस्तावेज़ देखें। धन्यवाद – Sarfraz

3

सुनिश्चित नहीं हैं कि अगर यह मदद करता है: उदाहरण के लिए सब कुछ का चयन करने के लिए इस आदेश का उपयोग करें। फायरबग आज़माएं। आपको एक आइटम चुनने की अनुमति देता है, और देखें कि यह सीएसएस पथ क्या है, साथ ही सीएसएस वर्तमान में लागू किया जा रहा है।

ब्राउज़र में एचटीएमएल/सीएसएस में कुछ प्रयोग कर सकते हैं।

0

jQuery


jQuery के साथ आप आसानी एक तत्व चयनकर्ता का उपयोग करने के लिए एक बड़ी लाल बॉर्डर जोड़ सकते हैं।

$(document).ready(function(){ 

    $('#your-css-selector').css('border', '5px solid red'); 

}); 
1

'खोज' सेलेनियम आईडीई में बटन इस लिए बहुत उपयोगी है। यह आपके परीक्षणों के रूप में तत्वों का पता लगाने के लिए एक ही विधि का उपयोग करता है, इसलिए किसी भी समर्थित रणनीति का उपयोग करके तत्वों का पता लगाने के लिए उपयोग किया जा सकता है।

0

चयनकर्ताओं के परीक्षण के लिए फायरेंडर महान है। हालांकि, यदि आप तत्व के लिए सीएसएस चयनकर्ता भी प्राप्त करना चाहते हैं तो SelectorGadget आज़माएं।

2

सेलेनियम आईडीई 1.0.11 जारी किया

3

FireFinder अच्छा है इनबिल्ट सीएसएस लोकेटर बिल्डर है, लेकिन मैं के साथ शुरू किया और Firebug के लिए FirePath पसंद करते हैं। यह समान रूप से काम करता है, लेकिन आप मिलान करने वाले तत्वों के आस-पास HTML के विस्तारित दृश्य को देख सकते हैं w/o निरीक्षण, फ्रेंडलीफायर इत्यादि पर क्लिक करने की आवश्यकता है।

वह क्षेत्र जहां आप लोकेटर का परीक्षण करते हैं, में सिंटैक्स चेकर भी होता है जहां सिंटैक्स खराब होने पर फ़ील्ड लाल हो जाती है। मिलान करने वाले तत्वों के आस-पास अतिरिक्त HTML के साथ लोकेटर और मैचों का परीक्षण करने के लिए बस eval पर क्लिक करें।

लेकिन सीएसएस लोकेटर का परीक्षण करने के लिए, आप फायरपाथ में सीएसएस के बजाय "सिज़ल" के ड्रॉप डाउन विकल्प चाहते हैं। सीएसएस विकल्प केवल सरल सीएसएस चयनकर्ताओं के लिए काम करता है, जटिल लोग केवल सिज़ल (एल मोड, जैसे कि:

div.namedService.photoService> div.photoBrowserContainer: nth-child (3)> div.albumName: ('SomeName')

+0

मुझे फायरपाथ भी पसंद है। – anonmys

+0

वास्तव में सीएसएस सीमाओं को समझने से पहले इसे कुछ समय पहले पोस्ट किया गया था। Sizzle अच्छा है, लेकिन परीक्षण स्वचालन के मामले में, केवल सीएसएस के साथ प्रयोग/परीक्षण करना सुनिश्चित करें, यदि आप सेलेनियम 2/वेबड्राइवर का उपयोग कर रहे हैं क्योंकि यह केवल सीएसएस का समर्थन करता है।Sizle समर्थन के लिए आप Selenium आरसी के विपरीत, पृष्ठ/स्वचालन में Sizzle इंजेक्षन की आवश्यकता होगी। – David

2

डोम मानक समारोह document.querySelectorAll तुम क्या चाहते है, आधुनिक ब्राउज़र सभी का समर्थन यह। देखें दस्तावेज़

https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

आप कंसोल में में निर्मित वेब कंसोल। यह कॉल कर सकते हैं शॉर्टकट $$ है, इसे $$('div a') पर कॉल करें।

मुझे फ़ायरबग पसंद है क्योंकि यह तत्व देखने के लिए स्क्रॉल करने के लिए क्लिक कर सकता है। यह 'सीएसएस' पैनल में भी परीक्षण कर सकता है।

11

यहाँ कैसे Firefox में सीएसएस क्वेरी चयनकर्ता में बनाया का उपयोग करने के तरीके:

जाओ लिए टूल> वेब डेवलपर> वेब कंसोल

इसके अलावा, आप विंडोज़/लिनक्स में ctrlshifti प्रेस सकता है, या मैक में cmdopti

अपने सीएसएस चयनकर्ता (पारंपरिक $$() वाक्यविन्यास का उपयोग करके) बहुत नीचे बाएं कोने में टाइप करें।

ऑब्जेक्ट नोड सूची कंसोल के दाएं हाथ पैनल पर दिखाई देगी।

$$('div') 
[object NodeList] 
$$('div').length 
42 

यह जहां एक विस्तार होने संभव नहीं है फ़ायरफ़ॉक्स, की सेलेनियम Webdriver उदाहरण के लिए उपयोगी है।

0

मुझे फ़ायरपाथ वास्तव में बहुत अच्छा लगता है, यह आपको न केवल सीएसएस बल्कि xPath को देखने देता है। इच्छा है कि क्रोम और आईई के लिए कुछ समान था, लेकिन हां!

+0

आप क्रोम देव उपकरण (क्रोम के साथ जहाजों का उपयोग कर सकते हैं, आपको एक अलग उपकरण या एडन की आवश्यकता नहीं है - https://developer.chrome.com/devtools देखें) क्रोम में चयनकर्ताओं का परीक्षण करने के लिए ... कंसोल और प्रकार खोलें $$ ("आपका सीएसएस चयनकर्ता") जैसे कि आप फायरबग में करेंगे। – noumenon

संबंधित मुद्दे