javascript - 使用 Puppeteer 测试 React App，在无头模式下失败

Question

所以我目前正在编写一堆测试来检查我正在使用 React 开发的网站。我计划通过使用 puppeteer 浏览网站并检查所有用户交互是否正常来包括端到端测试。

但是，发生了一些奇怪的事情，如果我在没有任何视觉反馈的情况下测试我的登录过程（参见下面的代码），即以无头模式启动浏览器，则测试失败。如果我重新运行测试并将其设置为 false，则测试会顺利通过。

现在，我希望这两种浏览器模式基本上执行相同的任务，无论设置的无头状态是什么。

有人知道这是为什么吗？任何帮助是极大的赞赏！

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: false,
    slowMo: 50,
  });
  page = await browser.newPage();
});

describe("Test Home Page", () => {

  test("Loads Home page", async () => {
    await page.goto("http://localhost:5000/test_site");
  });

  test("Authentication Process by logging in", async () => {

    const username = '[e-mail]';
    const password = 'pw123';

    await page.waitForSelector("#login-button");

    const waitForWindow = new Promise(resolve => page.on('popup', resolve));
    await page.click("#login-button");
    const popup = await waitForWindow;

    await popup.waitForSelector("#usernameOrEmail");
    await popup.click("#usernameOrEmail")
    await popup.type("#usernameOrEmail", username);
    
    await popup.waitForSelector("#password");
    await popup.click("#password")
    await popup.type("#password", password);
    
    await popup.click("#submitButton");
    
    await page.waitForSelector("#logout-button")
    const text = await page.$eval("#logout-button", (e) => e.textContent);
    
    expect(text).toBe('Logout');

  })
})

在“无头”中运行测试时，控制台输出的错误如下：

FAIL  src/test/EndToEnd.test.js (12.544s)
  Test Home Page
    ✓ Loads Home page (272ms)
    ✕ Authentication Process by logging in (10003ms)

  ● Test Home Page › Authentication Process by logging in

    : Timeout - Async callback was not invoked within the 10000ms timeout specified by jest.setTimeout.Timeout - Async callback was not invoked within the 10000ms timeout specified by jest.setTimeout.Error:

      39 |   });
      40 |
    > 41 |   test("Authentication Process by logging in", async () => {
         |   ^
      42 |
      43 |     const username = '[e-mail]';
      44 |     const password = 'pw123';

      at new Spec (node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Suite.<anonymous> (src/test/EndToEnd.test.js:41:3)
      at Object.<anonymous> (src/test/EndToEnd.test.js:35:1)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        13.287s, estimated 14s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

标签： javascriptreactjstestingpuppeteer