angularjs – 使用量角器与循环

循环索引(i)不是我在循环中使用量角器时期望的.

症状：

Failed: Index out of bound. Trying to access element at index:’x’,but there are only ‘x’ elements

要么

Index is static and always equal to the last value

for (var i = 0; i < MAX; ++i) {
  getPromise().then(function() {
    someArray[i] // 'i' always takes the value of 'MAX'
  })
}

例如：

var expected = ['expect1','expect2','expect3'];
var els = element.all(by.css('selector'));
for (var i = 0; i < expected.length; ++i) {
  els.get(i).getText().then(function(text) {
    expect(text).toEqual(expected[i]); // Error: `i` is always 3. 
  })
}

要么

var els = element.all(by.css('selector'));
for (var i = 0; i < 3; ++i) {
  els.get(i).getText().then(function(text) {
    if (text === 'should click') {
      els.get(i).click(); // fails with "Failed: Index out of bound. Trying to access element at index:3,but there are only 3 elements"
    }
  })
}

要么

var els = element.all(by.css('selector'));
els.then(function(rawelements) {
  for (var i = 0; i < rawelements.length; ++i) {
    rawelements[i].getText().then(function(text) {
      if (text === 'should click') {
        rawelements[i].click(); // fails with "Failed: Index out of bound. Trying to access element at index:'rawelements.length',but there are only 'rawelements.length' elements"
      }
    })
  }
})

这是因为量角器使用承诺.

Read 07000

当基础值准备就绪时,Promises(即element(by …),element.all(by …))执行它们的函数.这意味着所有的承诺是首先安排的,然后当结果准备就绪时运行当时的功能.

当你运行这样的东西：

for (var i = 0; i < 3; ++i) {
  console.log('1) i is: ',i);
  getPromise().then(function() {
    console.log('2) i is: ',i);
    someArray[i] // 'i' always takes the value of 3
  })
}
console.log('*  finished looping. i is: ',i);

发生什么是getPromise().then(function(){…})在承诺准备好之前立即返回,而不执行那个函数.所以首先循环遍历3次,调度所有的getPromise()调用.然后,随着承诺的解决,相应的运行.

控制台看起来像这样：

1) i is: 0 // schedules first `getPromise()`
1) i is: 1 // schedules second `getPromise()`
1) i is: 2 // schedules third `getPromise()`
*  finished looping. i is: 3
2) i is: 3 // first `then` function runs,but i is already 3 now.
2) i is: 3 // second `then` function runs,but i is already 3 now.
2) i is: 3 // third `then` function runs,but i is already 3 now.

那么,你如何在循环中运行量角器？
一般解决方案是关闭.见JavaScript closure inside loops – simple practical example

for (var i = 0; i < 3; ++i) {
  console.log('1) i is: ',i);
  var func = (function() {
    var j = i; 
    return function() {
      console.log('2) j is: ',j);
      someArray[j] // 'j' takes the values of 0..2
    }
  })();
  getPromise().then(func);
}
console.log('*  finished looping. i is: ',i);

但这不是很好阅读.幸运的是,您还可以使用量角器函数filter(fn),get(i),first(),last()以及预期修补的承诺来处理这个事实.

回到前面提供的例子.第一个例子可以重写为：

var expected = ['expect1','expect3'];
var els = element.all(by.css('selector'));
for (var i = 0; i < expected.length; ++i) {
  expect(els.get(i).getText()).toEqual(expected[i]); // note,the i is no longer in a `then` function and take the correct values.
}

第二和第三个例子可以重写为：

var els = element.all(by.css('selector'));
els.filter(function(elem) {
  return elem.getText().then(function(text) {
    return text === 'should click';
  });
}).click(); 
// note here we first used a 'filter' to select the appropriate elements,and used the fact that actions like `click` can act on an array to click all matching elements. The result is that we can stop using a for loop altogether.

换句话说,量角器有许多方法来迭代或访问元素i,以便您不需要使用for循环,而我.但是如果你必须使用for循环,我可以使用闭包解决方案.

angularjs – 使用量角器与循环

猜你在找的Angularjs相关文章