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

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.

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

Comments

अरे @ लिम्प_चम्प ने क्या मेरे नीचे दिए जवाब से आपको मदद मिली?

— सिंह गैलुकि

दृश्यता के रूप में ऐसी चीजों के लिए @ लिम्प_चिप, AngularJS क्लाइंट DOM यूनिट परीक्षणों का उपयोग करने के बारे में सोचें। वे चलाने के लिए बहुत तेज़ हैं और विकसित करने में आसान हैं।

— ऑफिशो

Answer 1

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

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

याद रखें कि प्रोट्रैक्टर $jQuery नहीं है और अभी तक उपलब्ध CSS चयनकर्ताओं + छद्म चयनकर्ताओं का हिस्सा :visibleनहीं है

Https://stackoverflow.com/a/13388700/511069 पर अधिक जानकारी

Comments

ओ आदमी। इतना ठंडा। यह वही है जो मुझे निर्धारित करने में सक्षम होने की आवश्यकता है। बहुत बहुत धन्यवाद दोस्त।

— राश्टला १०

नीचे दिए गए उत्तर का भी उपयोग किया गया है, isDisplayed()लेकिन पूर्णता के वादे को हल करने के लिए बस विस्तार होता है, हालांकि यह कदम वैकल्पिक है और केवल आपके परीक्षणों में सशर्त शामिल करने के लिए है जो एक बुरा अभ्यास है। @asenovm क्या आप अपने "यह सादे गलत है" टिप्पणी को और विस्तृत कर सकते हैं?

— लियो गैलुकि

@LeoGallucci, isDisplayed () एलीमेंटफाइंडर लौटाता है और बूलियन नहीं।

— asenovm

कृपया इसके बजाय उपयोग का .toBeTruthy();उपयोग न करें .toBe(true)। .toBeTruthy();[], 'झूठी', 42 जैसी चीजों से मेल खाएगा। मूल रूप से कुछ भी 0, "", अशक्त, अपरिभाषित, NaN या असत्य की अपेक्षा सत्य है।

— ब्रायन

Answer 2

प्रोट्रैक्टर के साथ एक तत्व की दृश्यता की जांच करने का सही तरीका 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रों

Comments

isDisplayed () अपेक्षित दायरे में होना चाहिए क्योंकि @leoGallucci ने इसे समझाया।

— धारीदार

Answer 4

यदि DOM में एक ही वर्ग के नाम के साथ कई तत्व हैं। लेकिन केवल एक तत्व दिखाई देता है।

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

इस उदाहरण में फ़िल्टर तत्वों का एक संग्रह लेता है और एक दृश्यमान तत्व का उपयोग करता है जिसे आइस्डप्लेड () का उपयोग करता है ।

Comments

यह एक महान जवाब है; उस मामले पर विचार करें जहां ऐसा कोई तत्व नहीं है! $ ('टेक्स्ट-इनपुट-इनपुट') उपयोगकर्ता को सुरुचिपूर्ण ढंग से सचेत करेगा; यह विफल हो सकता है क्योंकि filteredElement.length === 0?

— लाल मटर

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"]))

Answer 7

 element(by.className('your-class-name')).isDisplayed().then(function (isVisible) {
if (isVisible) {
    // element is visible
} else {
    // element is not visible
}
}).catch(function(err){
console.log("Element is not found");
})

Answer 8

यहां कुछ कोड स्निपेट दिए गए हैं जो कि फ्रेमवर्क, प्रोट्रैक्टर, चमेली का उपयोग करने वाले ढांचे के लिए उपयोग किया जा सकता है

browser.wait(until.visibilityOf(OversightAutomationOR.lblContentModal), 3000, "Modal text is present");

// किसी पाठ को सम्मिलित करना

OversightAutomationOR.lblContentModal.getText().then(text => {
                    this.assertEquals(text.toString().trim(), AdminPanelData.lblContentModal);
                });

// किसी तत्व को सम्मिलित करना

expect(OnboardingFormsOR.masterFormActionCloneBtn.isDisplayed()).to.eventually.equal(true

    );

OnboardingFormsOR.customFormActionViewBtn.isDisplayed().then((isDisplayed) => {
                        expect(isDisplayed).to.equal(true);
                });

// एक फ़ॉर्म को सम्मिलित करना

formInfoSection.getText().then((text) => {
                        const vendorInformationCount = text[0].split("\n");
                        let found = false;
                        for (let i = 0; i < vendorInformationCount.length; i++) {
                            if (vendorInformationCount[i] === customLabel) {
                                found = true;
                            };
                        };
                        expect(found).to.equal(true);
                    });