Cách tìm các phần tử html cụ thể, AngularJS, thước đo

Question

Tôi mới sử dụng AngularJS/protractor để mọi hướng dẫn về điều này được đánh giá cao. Vì Angular JS instantiates các phần tử html thông qua ng- chỉ thị không có 'id's etc cho phép tôi định vị các phần tử cụ thể. (Rõ ràng là tôi muốn làm điều này để xác nhận nội dung, nhấp vào chúng vv) js góc My đoạn mã trông như:

<div ng-repeat="item in myList"> 
    <span ng-if="item.category == 'lights'"> 
     <img src="../../../{{item.icon}}"/> 
     &nbsp<span id="foo">{{item.name}}</span>&nbsp 
    </span> 
</div> 

Tôi đang cố gắng xác định vị trí các yếu tố {{}} item.name như tôi lặp trên danh sách với điều này:

element.all(by.repeater('item in myList')).then(function(rows) { 
    noOfItems = rows.length; 
    for (i = 0; i < noOfItems; i++) { 
     row = element.all(by.repeater('item in myList')).get(i); 
     row.isElementPresent(By.id('foo')).then(function (isP) { 
      if (isP) { 
       console.log("foo exists?" + isP); 
       row.findElement(By.id('foo')).then(function (el) { 
        el.getText(txt).then(function (txt) { 
         console.log("Item name " + txt); 
        }); 
       }); 
      } 
     }); 
    } 
}); 

Từ kiểm tra các yếu tố 'hàng' có vẻ là đối tượng selen vì vậy tôi gọi 'isElementPresent (...) và các công trình này tuyệt vời. Nó phát hiện đúng số lượng các phần tử 'foo'. Tuy nhiên khi row.findElement (...) chạy, đặc tả kiểm tra kết thúc sớm. (Không có lỗi, nó chỉ kết thúc)

Tôi biết rằng sẽ có nhiều phần tử 'foo' trong tài liệu nhưng tôi hy vọng rằng vì chúng được truy vấn trong phần tử html phụ, (hàng) điều này có thể hoạt động.

Bất kỳ đề xuất/giải pháp nào?

Answer 1

Trước khi giải quyết câu hỏi cụ thể của bạn, một số thứ dường như không ổn ở đây.

1) Tôi không nghĩ rằng dòng 4 ở trên là những gì bạn muốn làm. Nó sẽ trở lại trình duyệt cho mỗi hàng, chạy lại truy vấn by.repeater mỗi lần. Tất cả những gì bạn thực sự cần làm là row = rows[i].

2) Hơn thế nữa bạn chỉ có thể thay thế bốn dòng đầu tiên với element.all(by.repeater('item in myList')).each(function(row){

Đối với các câu hỏi về việc tìm kiếm khoảng foo trong bối cảnh, bạn có thể thử tìm by.css(':scope #foo'). Điều đó sẽ cho bạn tìm kiếm id = 'foo' trong phạm vi của phần tử hiện tại.

Answer 2

Bằng cách này, một cách tiếp cận khác để tìm đúng phần tử được tạo góc là sử dụng định vị by.js. Đây không phải là một bộ định vị cụ thể của thước đo góc nhưng được cung cấp bởi WebDriverJS cơ bản, do đó bạn phải xem there cho tài liệu.

Về cơ bản by.js cho phép bạn cung cấp chức năng javascript sẽ chạy trên trình duyệt để tìm phần tử bạn đang tìm kiếm. Javascript lần lượt có thể thẩm vấn các phần tử DOM để tìm và kiểm tra các phạm vi Angular $ đã được gắn vào chúng và do đó tìm các phần tử có các giá trị phạm vi cụ thể. Ví dụ, do đó bạn có thể tìm thấy một phần tử được liên kết với một recordId thực tế hiện diện trong phạm vi nhưng không bao giờ được đưa vào HTML. Điều này rất hữu ích bởi vì, được đưa ra như thế nào góc hoạt động, bạn hiếm khi cần phải làm cho các loại id vào HTML, nhưng các xét nghiệm vẫn cần để có thể tìm thấy các yếu tố đại diện cho họ!

Answer 3

var eleB = element(by.css('.ui-grid-render-container.ng-isolate-scope.ui-grid-render-container-body')); 

eleB.element(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index').row(10)).$('.ui-grid-cell.ng-scope.ui-grid-coluiGrid-000B').getText().then(function(arr){ 
      console.log("-------------------\n" + arr); 
});