运行 Puppeteer 测试中的 for 循环

Question

我正在尝试运行 Puppeteer 测试中的 for 循环，将值发送到搜索栏：

  test('test one', () => {
    var results = [""]
    var fuzz = ['apple', 'banana', 'kiwi'];
    fuzz.forEach(async function(value) {
      await page.goto('http://localhost:8080/')
      await page.$eval('#searchtext', el => el.value = value);
      await page.$eval('#searchform', form => form.submit())
      await page.waitForSelector('.results-table');
      var text = await page.evaluate(() => document.body.textContent);
      results.push(text)
    });
    expect(results).toEqual(expect.arrayContaining(['bleh']));
  });

但是，每当我运行这样做时，它 return 是一个空的 results 数组，这让我觉得 forEach 循环没有结束。

    expect(received).toEqual(expected) // deep equality

    Expected: ArrayContaining ["bleh"]
    Received: [""]

我知道 for 循环中的代码是正确的，因为我有其他未循环的测试并执行相同的操作但结果为 return。任何想法如何做到这一点 cleanly/correctly？谢谢

Answer 1

正如评论中所指出的，您没有等待异步函数完成。我假设您想一个接一个地执行测试，因为您在所有测试中都使用相同的页面变量。在这种情况下，您将不得不使用 for 循环而不是 forEach 函数：

test('test one', async () => {
    var results = [""]
    var fuzz = ['apple', 'banana', 'kiwi'];
    for (var value of fuzz) {
      await page.goto('http://localhost:8080/')
      await page.$eval('#searchtext', el => el.value = value);
      await page.$eval('#searchform', form => form.submit())
      await page.waitForSelector('.results-table');
      var text = await page.evaluate(() => document.body.textContent);
      results.push(text)
    }
    expect(results).toEqual(expect.arrayContaining(['bleh']));
  });

异步函数执行，顾名思义，异步。这意味着，它们运行 独立于它们被调用的函数 ，除非调用函数使用 await 关键字等待它们的执行。这意味着当您检查结果时，您无法控制 async 函数当前在哪一行（事实上它们甚至还没有开始，但那是另一回事）。

另外，由于它们都是异步的，所以它们之间也是相互独立的。意思是，它们都或多或少地同时执行，导致随机乱码插入到您的表单中。

运行 Puppeteer 测试中的 for 循环

Running a for loop within a Puppeteer test

javascript

testing

node.js

jestjs

puppeteer