从数组元素量角器获取文本

this is my first post so please go easy one me. :)

这是我的第一篇文章,所以请放轻松一个人。 :)

I'am new to protractor therefore I would like to ask for your help. I've been asked to write a test for the folowing code:

我是量角器的新手,因此我想请求你的帮助。我被要求为下面的代码编写一个测试:

<div class="content ps-container ps-active-y expand" ng-class={hide:items.length === 2}" ng-transclude="" csf-product-navigator-content="" csf-scrollbar="" style="">
 <div class="product-wrp prod-active" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
  <div class="product-wrp odd" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
   <div class="product-item animate-hide" ng-click="onDropdowmItemClick()" ng-transclude="" csf-product-navigator-anim-item="">
    <div class="ng-scope" ng-repeat="product in accounts" csf-product-navigator-item="">
     <div class="navigator-view ng-hide" ng-show="active">
      <div class="" ng-hide="active">
       <div class="product-choice ng-scope" ng-if="product.type !== 'SM'">
        <section class="product-name">
         <header class="ng-scope" ng-if="product.name">
          <p class="product-details" ng-show="product.type">
           <span class="ng-binding" ng-bind="product.no">PL84 9101 0003 2001 0006 1883 0004</span>
          </p>
        </section>
        <section class="product-amount">
       </div>
      </div>
     </div>
    </div>
   </div>
  <div class="product-wrp even" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
  <div class="product-wrp even" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
  <div class="product-wrp odd" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">
  <div class="product-wrp even" ng-class="{'prod-active' : active, 'odd' : (odd === true && !active), 'even' : (odd !== true && !active)}" ng-repeat="product in accounts" csf-product-navigator-item="">

Goal is to get the number of the products on the dropdown list.

目标是在下拉列表中获取产品的数量。

So I figured i should get all elements in the container and then use function to go through them.

所以我想我应该获取容器中的所有元素,然后使用函数来完成它们。

This is my code:

这是我的代码:

features(iOwe):

var iOwe = function () {
  this.accNo = element(by.className('content ps-container ps-active-y expand')).all(by.className('product-item animate-hide'))
}

Spec(iOwe):

it('should display accounts numbers on dropdown list', function () {
  expect(iOwe.accNo.count()).not.toBe(0);
  iOwe.accNo.each(function(elem) {
    elem.element(by.className('product-details')).getText()
    .then
    (function (text){
        console.log(text);
    });
  });

The problem is that each time I run tests I get diffrent output in console. Getting only first 3/4 strings (should be 7) and rest is empty.

问题是,每次运行测试时,我都会在控制台中获得不同的输出。只获得前3/4个字符串(应为7)并且休息为空。

Thanks for help

感谢帮助

EDIT: I checked what exactly happens during test by adding browser.sleep(5000); each time console prints string and suprisingly I found out that I have to actually see (in browser) the following account to allow test to read it.

编辑:我通过添加browser.sleep(5000)来检查测试期间到底发生了什么。每次控制台打印字符串时,我发现我必须实际看到(在浏览器中)以下帐户以允许测试来阅读它。

3 个解决方案

#1

Goal is to get the number of the products on the dropdown list.

目标是在下拉列表中获取产品的数量。

The most logical way to approach that is to use the by.repeater() locator:

最合乎逻辑的方法是使用by.repeater()定位器:

var products = element.all(by.repeater("product in accounts"));
expect(products.count()).toEqual(7);

Or, with a CSS selector:

或者,使用CSS选择器:

var products = $$("p.product-details");
expect(products.count()).toEqual(7);

If this is a timing issue, you may specifically wait for count of elements matching a locator:

如果这是一个计时问题,您可以专门等待与定位器匹配的元素数:

function waitForCount(elements, expectedCount) {
    return elements.count().then(actualCount) {
        return actualCount >= expectedCount;
    });
}

browser.wait(waitForCount($$("p.product-details"), 7), 5000);

#2

You could try something like this-

你可以试试这样的东西 -

it('should display accounts numbers on dropdown list', function () {
expect(iOwe.accNo.count()).not.toBe(0);
iOwe.accNo.each(function(elem) {
expect(elem.element(by.css('p.product-details')).isDisplayed()).toBe(true);
elem.element(by.css('span.ng-binding')).getText()
.then
(function (text){
    console.log(text);
});
});

#3

I got an anwser to my question,it was not a matter of selectors/matchers.

我得到了一个问题,这不是选择器/匹配器的问题。

As I found out according to this Article in order to .getText() u have to actually see the element in browser otherwise it will return empty string.

正如我根据本文发现的那样.getText()你必须在浏览器中实际看到该元素,否则它将返回空字符串。

I decided to find another way to get the text and I used

我决定找到另一种获取文本的方法,我使用了

.getAttribute()

to get the string.

得到字符串。

Basically i changed :

基本上我改变了:

elem.element(by.css('span.ng-binding')).getText()

elem.element(by.css('span.ng-binding')).getAttribute('outerHTML')

And it returned string with accnumber.

它以accnumber返回字符串。

But... This is not what I wanted. I wanted to check if the element is actually visible in browser and folowing solution wont work.

但是......这不是我想要的。我想检查元素是否在浏览器中实际可见,并且下面的解决方案不起作用。

Then i found this Question,it shows how to scroll down to element in your browser You want to check.

然后我找到了这个问题,它显示了如何在浏览器中向下滚动元素你想检查。

So i edited my code:

所以我编辑了我的代码:

it('should display accounts numbers on dropdown list', function () {
  expect(iOwe.accNo.count()).not.toBe(0);
  iOwe.accNo.each(function(elem) {
    browser.executeScript('arguments[0].scrollIntoView()', elem.getWebElement()) //Scroll down to element
    .then
    elem.element(by.className('product-details')).getText()
    .then
    (function (text){
      console.log(text);
    });
});

And this is an anwser to my question.

这是我的问题的一个问题。

Thanks for help!

感谢帮助!

#1