Bagaimana cara menggunakan busur derajat untuk memeriksa apakah suatu elemen terlihat?

Saya mencoba untuk menguji apakah suatu elemen terlihat menggunakan busur derajat. Inilah elemennya:

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

Saat berada di konsol chrome, saya dapat menggunakan pemilih jQuery ini untuk menguji apakah elemen tersebut terlihat:

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

Namun, ketika saya mencoba melakukan hal yang sama pada busur derajat, saya mendapatkan kesalahan ini saat runtime:

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

Mengapa ini tidak valid? Bagaimana cara memeriksa visibilitas menggunakan busur derajat?

Ini harus melakukannya:

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

Ingat busur derajat ini $tidak jQuery dan :visibletidak belum menjadi bagian dari CSS yang tersedia + pseudo-penyeleksi

Info lebih lanjut di https://stackoverflow.com/a/13388700/511069

Cara yang benar untuk memeriksa visibilitas elemen dengan Protractor adalah dengan memanggil isDisplayedmetode tersebut. Anda harus berhati-hati karena isDisplayedtidak mengembalikan boolean, melainkan promisememberikan visibilitas yang dievaluasi. Saya telah melihat banyak contoh kode yang menggunakan metode ini secara salah dan oleh karena itu tidak mengevaluasi visibilitas sebenarnya.

Contoh untuk mendapatkan visibilitas suatu elemen:

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

Namun, Anda tidak memerlukan ini jika Anda hanya memeriksa visibilitas elemen (bukan mendapatkannya) karena busur derajat menambal Jasmine expect () sehingga selalu menunggu janji diselesaikan. Lihat github.com/angular/jasminewd

Jadi Anda bisa melakukan:

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

Karena Anda menggunakan AngularJSuntuk mengontrol visibilitas elemen itu, Anda juga dapat memeriksa atribut kelasnya ng-hideseperti ini:

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

Saya memiliki masalah serupa, saya hanya ingin mengembalikan elemen yang terlihat di objek halaman. Saya menemukan bahwa saya dapat menggunakan css :not. Dalam kasus masalah ini, ini seharusnya membuat Anda ...

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

Dalam konteks objek halaman, Anda HANYA bisa mendapatkan elemen yang terlihat dengan cara ini juga. Misalnya. diberikan halaman dengan banyak item, di mana hanya beberapa yang terlihat, Anda dapat menggunakan:

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

Ini akan mengembalikan semua terlihat i.icons

Jika ada beberapa elemen di DOM dengan nama kelas yang sama. Tetapi hanya satu elemen yang terlihat.

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

Dalam contoh ini, filter mengambil kumpulan elemen dan mengembalikan satu elemen yang terlihat menggunakan isDisplayed () .

Jawaban ini akan cukup kuat untuk bekerja untuk elemen yang tidak ada di halaman, oleh karena itu gagal dengan baik (tidak memberikan pengecualian) jika pemilih gagal menemukan elemen tersebut.

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

Menunggu visibilitas

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

Trik Xpath untuk hanya menemukan elemen yang terlihat

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

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

Berikut adalah beberapa potongan kode yang dapat digunakan untuk framework yang menggunakan typescript, busur derajat, jasmine

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

// Menegaskan teks

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

// Menegaskan sebuah elemen

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

    );

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

// Menegaskan formulir

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