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

Question

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 không. Đây là những gì các phần tử trông giống như:

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

Khi trong chrome console, tôi có thể sử dụng bộ chọn jQuery này để kiểm tra nếu yếu tố có thể nhìn thấy:

$('[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 như vậy trong thước đo góc, tôi gặp lỗi này khi 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 thế nào tôi có thể kiểm tra khả năng hiển thị bằng thước đo?

Answer 1

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

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

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

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

Answer 2

Cách chính xác cho kiểm tra khả năng hiển thị của một phần tử với Thước đo góc là gọi phương thức isDisplayed. Tuy nhiên, bạn nên cẩn thận vì isDisplayed không trả lại boolean, nhưng thay vào đó là promise cung cấp khả năng hiển thị được đánh giá. Tôi đã nhìn thấy rất nhiều ví dụ mã sử dụng phương pháp này sai 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 đang chỉ kiểm tra sự hiện diện của nguyên tố (như trái ngược với nhận nó) vì các bản vá lỗi protractor Jasmine mong đợi() vì vậy nó luôn luôn chờ đợi cho lời hứa sẽ đượ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 nguyên tố đó, bạn cũng có thể kiểm tra thuộc tính lớp của nó đối với ng-hide như thế này:

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

Answer 3

Tôi có một vấn đề tương tự, trong đó tôi chỉ muốn các phần tử trả về được 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 cũng có thể CHỈ CÓ những thành phần được hiển thị theo cách này. Ví dụ. được đưa ra một trang với nhiều mặt hàng, trong đó chỉ có một số có thể nhìn thấy, bạn có thể sử dụng:

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

này sẽ đưa bạn trở mọi thứ rõ ràng i.icon s

Answer 4

Nếu có nhiều yếu tố trong DOM với tên lớp giống nhau. Nhưng chỉ một phần tử có thể nhìn thấy được.

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

Trong ví dụ bộ lọc này có một bộ sưu tập của các yếu tố và trả về một yếu tố có thể nhìn thấy đơn sử dụng isDisplayed().

Answer 5

Câu trả lời này sẽ đủ mạnh để làm việc cho các yếu tố không có trên trang, do đó không thành công (không ném 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() 
    }) 
}) 

Answer 6

Để chờ cho tầm nhìn

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

XPath trick để chỉ tìm thấy các yếu tố có thể nhìn thấy

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