প্রোটেক্টর ব্যবহার করে কোনও উপাদানটির ক্লাস থাকলে কীভাবে পরীক্ষা করবেন?

Question 1

আমি কৌনিক অ্যাপ্লিকেশনটি e2e পরীক্ষার জন্য প্রটেক্টর দিয়ে চেষ্টা করছি এবং কোনও উপাদানটির একটি নির্দিষ্ট শ্রেণি আছে কি না তা কীভাবে সনাক্ত করা যায় তা বুঝতে পারি নি।

আমার ক্ষেত্রে, জমা বোতামে পরীক্ষার ক্লিক এবং এখন আমি জানতে চাই যে ফর্ম [নাম = "getoffer"] এর শ্রেণি রয়েছে কিনা ।DDirty। সমাধানগুলি কী হতে পারে?

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
    });
});

Question 2

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);

Question 3

আপনি যদি জেসমিনের সাথে প্রটেক্টর ব্যবহার করেন, আপনি toMatchনিয়মিত প্রকাশ হিসাবে ম্যাচ করতে ব্যবহার করতে পারেন ...

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

এছাড়াও, খেয়াল করুন যে toContainতালিকার আইটেমগুলির সাথে মিলবে, আপনার যদি এটির প্রয়োজন হয়।

Question 4

সবচেয়ে সহজ:

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

Question 5

সের্গেই কে-এর উত্তরের ভিত্তিতে আপনি এটি করতে একটি কাস্টম ম্যাচারও যুক্ত করতে পারেন:

(কফিসিপি)

  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'

Question 6

আপনি চেষ্টা করেছেন ...

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

বা উপরের একটি পরিবর্তন ...

Question 7

আমি এই ম্যাচার তৈরি করেছি, আমাকে এটি একটি প্রতিশ্রুতিতে আবদ্ধ করতে হয়েছিল এবং 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');

এটি যখন তখনও হয় যখন কোনও উপাদানের একাধিক শ্রেণি থাকে বা যখন কোনও উপাদানের কোনও শ্রেণীর বৈশিষ্ট্য থাকে না।

Question 8

এখানে একটি জেসমিন 1.3.x কাস্টম toHaveClassম্যাচার যা প্রত্যাখ্যান .notসমর্থন সমর্থন সহ 5 সেকেন্ড অবধি অপেক্ষা করুন (বা আপনি যা নির্দিষ্ট করেন)।

এই টুকরোটিতে আপনার অনপ্রে ব্লকে যোগ করার জন্য সম্পূর্ণ কাস্টম ম্যাচারটি সন্ধান করুন

নমুনা ব্যবহার:

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');
});

Question 9

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");
});

সম্পাদনা: আমি ঠিক বুঝতে পেরেছি যে এটি মূলত শীর্ষ উত্তর হিসাবে একই same

Question 10

এটি অর্জনের একটি উপায় হ'ল এক্সপথ এবং ব্যবহার contains()

উদাহরণ:

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

Question 11

প্রদত্ত শ্রেণীর কোনও উপাদান উপস্থিত রয়েছে কিনা তা পরীক্ষা করে আপনি এটি পরিচালনা করতে সিএসএস পার্সার ব্যবহার করতে পারেন:

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