angularjs - 使用来自浏览器的信息对多个页面进行 E2E 测试

Question

我正在用 Protractor 编写 E2E 测试。我不得不从浏览器中获取信息并多次执行一个步骤。

我正在测试一个屏幕，该屏幕将在

用户点击“开始”

登陆新页面

下面的工作流被调用，计数作为参数传递

id html id 不会改变。提交当前表单后再次查询时，该值会发生变化。

for(i = 0 ; i < count ; i++){
   console.log("counter is "+i);
   element(by('id')).evaluate('value').then(function(v) {
    // do some action on UI based on v
    element(by('id1')).sendKeys(v+v);
    // submit etc., 
    // some angular code runs in the frontend.
   }
   // need to wait since webdriver jumps to the next one without this completing
}

许多博客文章/文档建议您不能在循环中使用它，但没有建议任何替代方法来执行此操作。

任何建议表示赞赏。

Never use protractor element statements inside loop: The simple reason is that the webdriverJS (protractor) API is asynchronous. Element statements returns a promise and that promise is in unresolved state while the code below the statements continues to execute. This leads to unpredictable results. Hence, it is advisable to use recursive functions instead of loops.

来源:http://engineering.wingify.com/posts/angularapp-e2e-testing-with-protractor/

编辑:更新的问题与工作流程的细节。

Answer 1

当迭代有异步调用时，通常不建议使用循环。

原因是当 i 时，第一次异步调用在循环的最后一次迭代之后执行。已经等于 count .
因此，很难打破循环并跟踪 i 的值。 .

解决这个问题的方法是使用递归函数:

var count = 3;
var results = [];

function iterate(i, n) {
  if(i < n) {
    console.log(`counter is ${i}`);

    browser.refresh();
    return element(by.id('h-top-questions')).getText().then(function(text) {
      results.push(`${i}:${text}`);
      return iterate(i + 1, n);
    });
  }
}

iterate(0, count).then(function(){
  console.log("done!", results);
});

但更好的方法是使用 promise.map 进行迭代。在大小为迭代次数的数组上:

var count = 3;

protractor.promise.map(Array(count).fill(0), function(v, i) {
  console.log(`counter is ${i}`);

  browser.refresh();
  return element(by.id('h-top-questions')).getText().then(function(text) {
    return `${i}:${text}`;
  });
}).then(function(results){
  console.log("done!", results);
});

您也可以继续使用循环。首先，您必须使用 let获取 i 的值的语句在异步函数 (ES6) 中。
然后用browser.call调用所有同步代码同步执行:

var count = 3;
var results = [];

for(let i = 0 ; i < count ; i++){
  browser.call(function(){
    console.log(`counter is ${i}`);

    browser.refresh();
    element(by.id('h-top-questions')).getText().then(function(text) {
      results.push(`${i}:${text}`);
    });
  });
}

browser.call(function() {
  console.log("done!", results);
});