如何在 Playwright 中等待 JavaScript 执行完毕

Question

我正在使用Playwright和JavaScript测试UI。我的代码找到一个输入元素，有时可能是下拉菜单，有时是文本框，有时是日期选择器。为了处理这种情况，我采用了两步来输入值。首先，我填写文本，然后点击tab键来调用JavaScript对元素中的值进行格式化。

await page.fill("#myID", inputText); 
await page.keyboard.press('Tab');  // this line trigger the JS

// continue to the next element 

问题在于代码不等待JavaScript执行完成。我该如何在继续代码之前等待JavaScript执行完成？

- Jacob

Answer 1

您可以等待某些响应来处理您的点击（例如页面更改或发出HTTP请求），例如：

• 等待特定元素状态更改 https://playwright.dev/docs/api/class-locator#locator-wait-for
• 等待页面上出现新元素（如对话框打开）https://playwright.dev/docs/api/class-page#page-wait-for-selector
• 等待请求被触发https://playwright.dev/docs/api/class-page#page-wait-for-request
• 等待响应接收https://playwright.dev/docs/api/class-page#page-wait-for-response
• 或等待事件https://playwright.dev/docs/api/class-page#page-wait-for-event

- dst

Answer 2

使用page.waitFor...函数

Playwright提供了一系列的函数，以page.waitFor开头来应对特定条件的满足（例如page.waitForFunction）。其中最通用的可能是page.waitForFunction，因为它允许您传递一个自定义函数来等待特定条件的满足。

或者，使用超时

我认为您可以在页面上下文中使用setTimeout和page.evaluate来等待其他JavaScript运行一段时间：

await page.evaluate(() => {
  // if this doesn't work, you can try to increase 0 to a higher number (i.e. 100)
  return new Promise((resolve) => setTimeout(resolve, 0));
});

这可能等同于 page.waitForTimeout(0)，但我不确定。请注意，他们建议不要在生产中使用page.waitForTimeout。

- Steve

---

很遗憾，在这种情况下不太好。这种模式发生了很多次，如果我使用硬编码的值，脚本将非常缓慢。我需要在JS完成后停止等待。 - Jacob

你可以尝试使用超时时间为0，这可能会起作用，具体取决于事件如何冒泡，或者你可以将其抽象成一个函数，让你传递一个“timeout”参数。如果这不起作用，很难确定JS何时“完成”，除非明确编写代码表明它已完成（例如，如果你可以编辑客户端代码，则可以有一个名为doneClientSide()的自定义函数，在playwright中进行检查）。我感觉你总体上会遇到性能问题。 - Steve

我认为waitForFunction可能会有帮助，虽然这并不容易。我需要检查一下。谢谢！ - Jacob

Answer 3

你可能会发现这个有用，(https://repl.it/join/bkgmwcjv-vladimirlisove1)。 https://developer.mozilla.org/enUS/docs/Web/JavaScript/Reference/Statements/async_function。

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

或者，你可以在freecodecamp找到一个看起来更简单的例子：

const promise = new Promise((resolve, reject) => {  

  setTimeout(function(){ 
    resolve(); // Task is completed
  }, 3000);

  return resolve;
});

promise.then(res => {
  console.log('resolved');
}).catch(err => {
    console.log(err)
});

- Vladimir

---

在这种情况下，我不能使用硬编码等待。该模式出现多次，如果我使用硬编码等待，脚本将非常缓慢。当JS完成时，我需要停止等待。 - Jacob

如果你的解决方案是等待X秒钟，那么你已经输了。你的测试将会执行缓慢，并且会随机失败。 - vcarel