Làm thế nào để sử dụng thước đo góc để kiểm tra xem một phần tử có nhìn thấy được không?

Tôi đang cố gắng kiểm tra xem một phần tử có hiển thị bằng thước đo góc hay không. Đây là phần tử trông như thế nào:

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

Khi ở trong bảng điều khiển chrome, tôi có thể sử dụng bộ chọn jQuery này để kiểm tra xem phần tử có hiển thị hay không:

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

Tuy nhiên, khi tôi cố gắng làm điều tương tự trong thước đo góc, tôi gặp lỗi này trong thời gian chạy:

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

Tại sao điều này không hợp lệ? Làm cách nào để kiểm tra khả năng hiển thị bằng thước đo góc?

Điều này nên làm điều đó:

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

Ghi thước đo của $không phải là jQuery và :visiblekhông phải là chưa là một phần của bộ chọn CSS có sẵn + pseudo-selectors

Thông tin thêm tại https://stackoverflow.com/a/13388700/511069

Cách chính xác để kiểm tra khả năng hiển thị của một phần tử bằng Thước đo góc là gọi isDisplayedphương thức. Mặc dù vậy, bạn nên cẩn thận vì isDisplayedkhông trả về boolean mà là promisecung cấp khả năng hiển thị được đánh giá. Tôi đã thấy rất nhiều ví dụ mã sử dụng sai phương pháp này và do đó không đánh giá khả năng hiển thị thực tế của nó.

Ví dụ để có được khả năng hiển thị của một phần tử:

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

Tuy nhiên, bạn không cần điều này nếu bạn chỉ đang kiểm tra khả năng hiển thị của phần tử (thay vì lấy nó) vì các bản vá thước đo góc mà Jasmine mong đợi () nên nó luôn chờ đợi các lời hứa được giải quyết. Xem github.com/angular/jasminewd

Vì vậy, bạn chỉ có thể làm:

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

Vì bạn đang sử dụng AngularJSđể kiểm soát khả năng hiển thị của phần tử đó, bạn cũng có thể kiểm tra thuộc tính lớp của nó ng-hidenhư sau:

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

Tôi đã gặp vấn đề tương tự, trong đó tôi chỉ muốn trả lại các phần tử hiển thị trong một đối tượng trang. Tôi thấy rằng tôi có thể sử dụng css :not. Trong trường hợp của vấn đề này, điều này sẽ làm bạn ...

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

Trong ngữ cảnh của một đối tượng trang, bạn CHỈ có thể nhận được những phần tử được hiển thị theo cách này. Ví dụ. đưa ra một trang có nhiều mục, trong đó chỉ một số mục được hiển thị, bạn có thể sử dụng:

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

Điều này sẽ trả lại cho bạn tất cả các i.icons

Nếu có nhiều phần tử trong DOM có cùng tên lớp. Nhưng chỉ một phần tử được hiển thị.

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

Trong ví dụ này, bộ lọc lấy một tập hợp các phần tử và trả về một phần tử hiển thị duy nhất bằng cách sử dụng isDisplayed () .

Câu trả lời này sẽ đủ mạnh để hoạt động đối với các phần tử không có trên trang, do đó sẽ thất bại một cách duyên dáng (không đưa ra ngoại lệ) nếu bộ chọn không tìm thấy phần tử.

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

Để chờ hiển thị

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

Thủ thuật Xpath để chỉ tìm các phần tử hiển thị

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

Dưới đây là một số đoạn mã có thể được sử dụng cho khuôn khổ sử dụng các loại chỉ số, thước đo góc, hoa nhài

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

// Xác nhận một văn bản

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

// Xác nhận một phần tử

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

    );

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

// Xác nhận một biểu mẫu

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