एक तत्व दिखाई देने पर जांचने के लिए प्रोटैक्टर का उपयोग कैसे करें?

Question

मैं परीक्षण करने की कोशिश कर रहा हूं कि प्रोटोकक्टर का उपयोग कर कोई तत्व दिखाई दे रहा है या नहीं। यहां बताया गया है तत्व लग रहा है जैसे:

<i class="icon-spinner icon-spin ng-hide" ng-show="saving"></i> 

क्रोम कंसोल में, मैं परीक्षण करने के लिए करता है, तो तत्व दिखाई दे रहा है इस jQuery का भी उपयोग करेंगे जब:

$('[ng-show=saving].icon-spin') 
[ 
<i class=​"icon-spinner icon-spin ng-hide" ng-show=​"saving">​</i>​ 
] 
> $('[ng-show=saving].icon-spin:visible') 
[] 

हालांकि, जब मैं भी ऐसा ही करने की कोशिश चांदा में, मैं क्रम में इस त्रुटि मिलती है:

InvalidElementStateError: 
invalid element state: Failed to execute 'querySelectorAll' on 'Document': 
'[ng-show=saving].icon-spin:visible' is not a valid selector. 

क्यों इस मान्य नहीं है? मैं प्रोटैक्टर का उपयोग कर दृश्यता की जांच कैसे कर सकता हूं?

Answer 1

यह करना चाहिए:

expect($('[ng-show=saving].icon-spin').isDisplayed()).toBeTruthy(); 

याद रखें चांदा के $ jQuery नहीं है और :visible नहीं अभी तकhttps://stackoverflow.com/a/13388700/511069

Answer 2

के लिए सही तरीका में available CSS selectors + pseudo-selectors

और जानकारी का एक हिस्सा है प्रोटैक्टर के साथ तत्व की दृश्यता की जांच करना isDisplayed विधि को कॉल करना है। आपको सावधान रहना चाहिए क्योंकि isDisplayed एक बूलियन नहीं लौटाता है, बल्कि promise मूल्यांकन दृश्यता प्रदान करता है। मैंने बहुत सारे कोड उदाहरण देखे हैं जो इस विधि का गलत तरीके से उपयोग करते हैं और इसलिए इसकी वास्तविक दृश्यता का मूल्यांकन नहीं करते हैं। एक तत्व की दृश्यता प्राप्त करने के लिए

उदाहरण:

element(by.className('your-class-name')).isDisplayed().then(function (isVisible) { 
    if (isVisible) { 
     // element is visible 
    } else { 
     // element is not visible 
    } 
}); 

हालांकि, आप इस अगर आप सिर्फ तत्व की दृश्यता जाँच कर रहे हैं (के रूप में यह हो रही है के खिलाफ) क्योंकि चांदा पैच जैस्मीन उम्मीद की जरूरत नहीं है() तो यह हमेशा वादे के समाधान के लिए इंतजार कर रहा है। देखें github.com/angular/jasminewd

तो आप बस कर सकते हैं:

expect(element(by.className('your-class-name')).isDisplayed()).toBeTruthy(); 

जब से तुम उस तत्व की दृश्यता को नियंत्रित करने के लिए AngularJS उपयोग कर रहे हैं, तो आप भी अपने वर्ग विशेषता ng-hide के लिए इस तरह की जांच कर सकता:

var spinner = element.by.css('i.icon-spin'); 
expect(spinner.getAttribute('class')).not.toMatch('ng-hide'); // expect element to be visible 

Answer 3

मेरे पास एक समान समस्या थी, जिसमें मैं केवल पृष्ठ तत्वों में दिखाई देने वाले लौटने वाले तत्वों को चाहता था। मैंने पाया कि मैं सीएसएस :not का उपयोग करने में सक्षम हूं। इस मुद्दे के मामले में, यह आपको क्या करना चाहिए ...

expect($('i.icon-spinner:not(.ng-hide)')).isDisplayed().toBeTruthy(); 

एक पेज वस्तु के संदर्भ में, आप केवल उन तत्वों है कि रूप में अच्छी तरह इस तरह से दिखाई दे रहे हैं मिल सकता है। उदाहरण के लिए। एक से अधिक आइटम, जहां केवल कुछ दिखाई दे रहे हैं के साथ एक पृष्ठ को देखते हुए, आप का उपयोग कर सकते हैं:

this.visibileIcons = $$('i.icon:not(.ng-hide)'); 

यह आपको वापस आ जाएगी दिखाई देने वाले सभी i.icon रों

Answer 4

अगर वहाँ एक ही कक्षा नाम के साथ डोम में कई तत्व हैं। लेकिन तत्व में से केवल एक दृश्यमान है।

element.all(by.css('.text-input-input')).filter(function(ele){ 
     return ele.isDisplayed(); 
    }).then(function(filteredElement){ 
     filteredElement[0].click(); 
    }); 

इस उदाहरण फिल्टर में तत्वों का एक संग्रह लेता है और एक भी दिखाई तत्व isDisplayed() का उपयोग कर देता है।

Answer 5

यह उत्तर पृष्ठ पर नहीं होने वाले तत्वों के लिए काम करने के लिए पर्याप्त मजबूत होगा, इसलिए चयनकर्ता तत्व को ढूंढने में विफल होने पर कृपापूर्वक विफल रहा है (अपवाद नहीं फेंक रहा है)।

const nameSelector = '[data-automation="name-input"]'; 
const nameInputIsDisplayed =() => { 
    return $$(nameSelector).count() 
     .then(count => count !== 0) 
} 
it('should be displayed',() => { 
    nameInputIsDisplayed().then(isDisplayed => { 
     expect(isDisplayed).toBeTruthy() 
    }) 
}) 

Answer 6

के लिए दृश्यता

const EC = protractor.ExpectedConditions; 
browser.wait(EC.visibilityOf(element(by.css('.icon-spinner icon-spin ng-hide')))).then(function() { 
    //do stuff 
}) 

Xpath चाल के लिए प्रतीक्षा करने के लिए ही दिखाई तत्वों

element(by.xpath('//i[not(contains(@style,"display:none")) and @class="icon-spinner icon-spin ng-hide"]))