यदि किसी तत्व में प्रोट्रैक्टर का उपयोग करने वाला वर्ग है तो परीक्षण कैसे करें?

Question

मैं प्रोटेक्टर को e2e टेस्ट करने के लिए कोशिश कर रहा हूँ कोणीय ऐप और पता नहीं लगा कि कैसे पता लगाया जा सकता है कि किसी तत्व की एक विशिष्ट कक्षा है या नहीं।

मेरे मामले में, परीक्षण सबमिट बटन पर क्लिक करता है और अब मैं यह जानना चाहता हूं कि क्या प्रपत्र [नाम = "गेटऑफ़र"] में वर्ग .ngDirty है। समाधान क्या हो सकते हैं?

describe('Contact form', function() {
    beforeEach(function(){
        browser.get('http://localhost:9000');
        element(by.linkText('Contact me')).click();
    });

    it('should fail form validation, all fields pristine', function() {
        element(by.css('.form[name="getoffer"] input[type="submit"]')).click();
        expect(element(by.name('getoffer'))).toHaveClass('ngDirty'); // <-- This line
    });
});

Answer 1

एक गेटा जिसे आपको उपयोग करने के लिए देखना है toMatch(), जैसा कि स्वीकृत उत्तर में है, आंशिक मैच है। उदाहरण के लिए, मान लीजिए कि आप एक तत्व कक्षाएं हो सकता है डालते हैं correctऔर incorrect, और आप इसे वर्ग है कि परीक्षण करना चाहते हैं correct। यदि आप उपयोग करना चाहते थे expect(element.getAttribute('class')).toMatch('correct'), तो यह तब भी सही होगा जब तत्व में incorrectकक्षा हो।

मेरा सुझाव:

यदि आप केवल सटीक मिलान स्वीकार करना चाहते हैं, तो आप इसके लिए एक सहायक विधि बना सकते हैं:

var hasClass = function (element, cls) {
    return element.getAttribute('class').then(function (classes) {
        return classes.split(' ').indexOf(cls) !== -1;
    });
};

आप इसे इस तरह से उपयोग कर सकते हैं (इस तथ्य का लाभ उठाते हुए कि expectस्वचालित रूप से प्रोट्रैक्टर में वादों को हल करता है):

expect(hasClass(element(by.name('getoffer')), 'ngDirty')).toBe(true);

Comments

यह मेरे लिए काम कर रहा है, इस मॉड के साथ कि क्लास के नाम को ऊँट का प्रारूप होना चाहिए था न कि ऊंट के मामले में, यानीexpect(hasClass(element(by.name('getoffer')), 'ng-dirty')).toBe(true);

— Ackroydd

मैं इस बात पर थोड़ा स्पष्ट नहीं हूं कि फ़ंक्शन क्या कर रहा है, विशेष रूप से कहाँ या क्या वर्गों में है जब यह .then फ़ंक्शन में पास हो रहा है, क्या कोई मुझे बता सकता है?

— एरिकफ्रीफिन

@ErikAGriffin: hasClass फ़ंक्शन को दो तर्क दिए गए हैं - एक HTML तत्व और एक वर्ग का नाम जिसकी जाँच करनी है। फ़ंक्शन तब "क्लास" विशेषता (कक्षाएं) प्राप्त करता है जो तत्व में है। यह वर्गों की एक सरणी प्राप्त करने के लिए कक्षा स्ट्रिंग को विभाजित करता है। यह तब जांचता है कि आप जिस वर्ग की तलाश कर रहे हैं वह सरणी के किसी भी सकारात्मक सूचकांक में है। मुझे लगता है कि यह अस्तित्व की जाँच करने का एक तरीका है।

— VSO

मैंने इस सेक्सी ES6 एक लाइनर को आपकी चार लाइन फ़ंक्शन को फिर से लिखा है: hasClass = (एलीमेंट, क्लासनेम) => एलीमेंट.गेट एट्रीब्यूट ('क्लास')। फिर ((क्लासेस) => क्लासेस.स्प्लिट ('ए)) .indexOf ( className); == -1);

— लॉरेंस माकेल

टाइपस्क्रिप्ट में: async फ़ंक्शन hasClass (elm: ElementFinder, className: string): वादा <boolean> {const classNamesStr: string = wait elm.getAttribute ('class'); const classNamesArr: string [] = classNamesStr.split (''); वापसी classNamesArr.includes (className); }

— tedw

Answer 2

यदि आप जैस्मीन के साथ प्रोट्रैक्टर का उपयोग कर रहे हैं, तो आप toMatchएक नियमित अभिव्यक्ति के रूप में मेल खा सकते हैं ...

expect(element(by.name('getoffer')).getAttribute('class')).toMatch('ngDirty');

इसके अलावा, ध्यान दें कि toContainयदि आवश्यक हो, तो सूची आइटम से मेल खाएगा।

Comments

मुझे यकीन नहीं है कि अगर ऐसा करने का आदर्श तरीका है, लेकिन कम से कम यह उम्मीद के

— मुताबिक

नहीं, मैं कहूंगा कि यह शायद नहीं है। मुझे elementएक hasClassविधि के साथ एक वस्तु वापस करने की उम्मीद है , जिसे आप expectकॉल के अंदर लपेट सकते हैं ...

— ryan.l

toContaintoMatchइस मामले में एक बेहतर विकल्प हो सकता है ।

— TrueWill

यदि आप आंशिक मैचों से बचना चाहते हैं, तो कुछ ऐसा प्रयास करें /(^|\s)ngDirty($|\s)/।

— एंड्रयू मायर्स

आप शायद .not.toContainयह जांचने के लिए उपयोग कर सकते हैं कि इसमें कोई विशेष वर्ग नहीं है या .toContainजाँचने के लिए कि क्या यह मौजूद है

— जैक

Answer 3

सबसे सरल है:

expect(element.getAttribute('class')).toContain("active");

Comments

यह java.util.ArrayList cannot be cast to java.lang.StringMicrosoft Edge

— Manolis

@ मानगढ़ को आप कोणीय सांत्वना के लिए वेब कंसोल में जावा अपवाद कैसे मिल रहे हैं ??

— vasia

Answer 4

सर्गेई के के जवाब के आधार पर, आप ऐसा करने के लिए एक कस्टम मैचर भी जोड़ सकते हैं:

(Coffeescript)

  beforeEach(()->
    this.addMatchers({
      toHaveClass: (expected)->
        @message = ()->
          "Expected #{@actual.locator_.value} to have class '#{expected}'"

        @actual.getAttribute('class').then((classes)->
          classes.split(' ').indexOf(expected) isnt -1
        )
    })
  )

तो आप इसे इस तरह से परीक्षण में उपयोग कर सकते हैं:

expect($('div#ugly')).toHaveClass('beautiful')

और आपको निम्न त्रुटि मिलेगी अगर यह नहीं होता है:

 Message:
   Expected div#ugly to have class beautiful
 Stacktrace:
   Error: Expected div#ugly to have class 'beautiful'

Answer 5

आपने कोशिश की है...

var el = element(by.name('getoffer'));
expect(e.getAttribute('class')).toBe('ngDirty')

या ऊपर की भिन्नता ...

Comments

समस्या यह है, कि फॉर्म में एक से अधिक वर्ग जुड़े हुए हैं।

— बजे एलन टेटर

Answer 6

मैंने यह मिलान किया, मुझे इसे एक वादे में लपेटना पड़ा और 2 रिटर्न का उपयोग करना पड़ा

this.addMatchers({
    toHaveClass: function(a) {
        return this.actual.getAttribute('class').then(function(cls){
            var patt = new RegExp('(^|\\s)' + a + '(\\s|$)');
            return patt.test(cls);
        });
    }
});

मेरे परीक्षण में अब मैं इस तरह से कर सकता हूं:

   var myDivs = element.all(by.css('div.myClass'));
   expect(myDivs.count()).toBe(3);

   // test for class
   expect(myDivs.get(0)).not.toHaveClass('active');

यह तब भी काम करता है जब एक तत्व में कई वर्ग होते हैं या जब किसी तत्व में कोई वर्ग विशेषता नहीं होती है।

Answer 7

यहांtoHaveClass नकारात्मक .notसमर्थन के साथ एक जैस्मीन 1.3.x कस्टम मैचर 5 सेकंड (या जो भी आप निर्दिष्ट करते हैं) तक प्रतीक्षा करें।

इस gist में अपने onPrepare ब्लॉक पर जोड़े जाने वाले पूर्ण कस्टम मिलानक का पता लगाएं

नमूना उपयोग:

it('test the class finder custom matcher', function() {
    // These guys should pass OK given your user input
    // element starts with an ng-invalid class:
    expect($('#user_name')).toHaveClass('ng-invalid');
    expect($('#user_name')).not.toHaveClass('ZZZ');
    expect($('#user_name')).toNotHaveClass('ZZZ');
    expect($('#user_name')).not.toNotHaveClass('ng-invalid');
    // These guys should each fail:
    expect($('#user_name')).toHaveClass('ZZZ');
    expect($('#user_name')).not.toHaveClass('ng-invalid');
    expect($('#user_name')).toNotHaveClass('ng-invalid');
    expect($('#user_name')).not.toNotHaveClass('ZZZ');
});

Answer 8

function checkHasClass (selector, class_name) {
    // custom function returns true/false depending if selector has class name

    // split classes for selector into a list
    return $(selector).getAttribute('class').then(function(classes){
        var classes = classes.split(' ');
        if (classes.indexOf(class_name) > -1) return true;
        return false;
    });
}

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

checkHasClass('#your-element', 'your-class').then(function(class_found){
    if (class_found) console.log("Your element has that class");
});

संपादित करें: मुझे एहसास हुआ कि यह मूल रूप से शीर्ष उत्तर के समान है

Answer 9

इसे प्राप्त करने का एक तरीका xpath और उपयोग करना होगा contains()

उदाहरण:

var expectElementToHaveClass = function (className) {
    var path = by.xpath("//div[contains(@class,'"+ className +"')]");
    expect(element.all(path).count()).to.eventually.be.eq(1);
};

Answer 10

दिए गए वर्ग के साथ एक तत्व मौजूद है या नहीं, यह जांचने के लिए आप CSS पार्सर का उपयोग कर सकते हैं:

expect(element(by.css('.form[name="getoffer"].ngDirty')).isPresent()).toBe(true);