কোনও উপাদান দৃশ্যমান কিনা তা পরীক্ষা করতে প্রটেক্টর কীভাবে ব্যবহার করবেন?

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

আরে @ লিম্প_চিম্প আমার নীচের উত্তরগুলি আপনাকে সাহায্য করেছিল?

— লিও গ্যালুচি

দৃশ্যমানতার মতো বিষয়ের জন্য @ লিম্প_চিম্প, অ্যাঙ্গুলারজেএস ক্লায়েন্ট ডিওএম ইউনিট পরীক্ষাগুলি ব্যবহার করার বিষয়ে ভাবুন। এগুলি চালানোর পক্ষে আরও দ্রুত এবং বিকাশমান সহজ।

— অফিরমো

Answer 1

এটি করা উচিত:

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

মনে রাখবেন চাঁদা এর $jQuery এর নয় এবং :visibleনয় এখনো একটি অংশ প্রাপ্তিসাধ্য CSS সিলেক্টর + + সিউডো-নির্বাচকরা

Https://stackoverflow.com/a/13388700/511069 এ আরও তথ্য

Comments

উহ ভাই. খুবই ভাল. এটি ঠিক করার জন্য আমার যা প্রয়োজন তা হ'ল। আপনাকে অনেক ধন্যবাদ বন্ধু।

— racl101

নীচের উত্তরটি isDisplayed()সম্পূর্ণতার জন্য প্রতিশ্রুতি সমাধানের জন্য কেবল ব্যবহার করে তবে প্রসারিত হয় যদিও এই পদক্ষেপটি alচ্ছিক এবং কেবলমাত্র আপনার পরীক্ষায় শর্তযুক্ত করার জন্য যা একটি খারাপ অভ্যাস। @asenovm আপনি কি আপনার "এটি সাধারণ ভুল" মন্তব্যটি আরও বিস্তারিতভাবে বর্ণনা করতে পারেন?

— লিও গ্যালুচি

@ লিওগ্যালুচি, ডিসপ্ল্লেড () এলিমেন্টফাইন্ডারকে ফিরিয়ে দেয় এবং কোনও বুলিয়ান নয়।

— এসেনভম

দয়া করে ব্যবহার করবেন না .toBeTruthy();ব্যবহার .toBe(true)পরিবর্তে। .toBeTruthy();[], 'মিথ্যা', 42 এর মতো জিনিসের সাথে মিলবে Bas মূলত যে কোনও কিছুই 0, "", নাল, অপরিজ্ঞাত, এনএন বা মিথ্যা প্রত্যাশা করে সত্য y

— ব্রায়ান

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

@ লেওগ্যালুচি এটি ব্যাখ্যা করার সাথে সাথে ডিসপ্লেড () প্রত্যাশার সুযোগে থাকা উচিত।

— স্ট্রিপড

Answer 4

যদি ডিওমে একই শ্রেণীর নামের সাথে একাধিক উপাদান থাকে। তবে কেবলমাত্র একটি উপাদান দৃশ্যমান।

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

এক্সপথ কৌশলটি কেবল দৃশ্যমান উপাদানগুলি খুঁজে পেতে

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