如何确保在执行第二次迭代之前完成循环的第一次迭代？

Question

cy.document().then(document => {
  const arra = [...document.querySelectorAll('.instances__action')];

  for (let i = 1; i <= arra.length; i++) {
    let state = document.querySelector(
      `#root > section > section > main > div > div > section.instances > div > div > div > div > div > div > table > tbody > tr:nth-child(${i}) > td:nth-child(3) > span`
    ).innerText;

    if (state !== 'Finished') {
      document
        .querySelector(
          `#root > section > section > main > div > div > section.instances > div > div > div > div > div > div > table > tbody > tr:nth-child(${i}) > td:nth-child(7) > div > button.ant-btn.ant-btn-primary.ant-btn-sm`
        )
        .click();
    } else {
      continue;
    }
  }
});

在这里，假设arra.length 是 2。在每次单击迭代按钮时。 我想一次做一个。首先，它应该检查状态是否为finished。 如果状态是not finished，它应该按下按钮并等待状态变为完成。 之后，它应该进入下一个迭代。在我当前的实现中，它在第一次迭代完成之前进入第二次迭代。

Answer 1

在将文本设置为Finished 的代码部分，让它调用循环中分配给的Promise 构造函数的resolve 函数。然后，在循环中，构造 Promise 和 await 它。例如：

let resolveFn = () => undefined;

// ...
// Run loop:
(async () => {
  // ...
  for ( // ...
  // ...
    if (state !== 'Finished') {
      const prom = new Promise(resolve => resolveFn = resolve);
      document.querySelector(...).click();
      await prom;
    }
}
})();

// ...

function clickHandler() {
  // ...
  // At the point where you assign "Finished", call the resolveFn:
  span.textContent = 'Finished';
  resolveFn();
}

如果您无法控制分配 Finished 文本的代码，则观察文本更改的另一种可能性是使用 MutationObserver，例如：

if (state !== 'Finished') {
  document.querySelector(...);.click();
  await new Promise((resolve) => {
    new MutationObserver((_, observer) => {
      if (span.textContent === 'Finished') {
        observer.disconnect();
        resolve();
      }
    })
      .observe(span, { childList: true });
  });
}