0

So I'm currently working on writing a bunch of tests to check the website I'm developing using React. I'm planning on including an End-to-end test, by using puppeteer to navigate through the website and check that all user interactions work.

Something weird is happening though, if I test my login procedure (see code below) without any visual feedback, i.e. launching the browser in headless mode, the test fails. If I rerun the test with it set to false, the test passes without any trouble.

Now, I would expect the two browser modes to essentially perform the same tasks no matter what the set headless state is.

Has anybody got an idea why this is? Any help is greatly appreciated!

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 = 'test123@gmail.com';
    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');

  })
})

The error the console outputs, when running the test in 'headlessly' is the following:

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 = 'test123@gmail.com';
      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.
Swissyodler
  • 1
  • Welcome to SO! It's hard to say what the problem might be without being able to run it, but these are the canonical resources I know of: [Different behavior between { headless: false } and { headless: true }](https://github.com/puppeteer/puppeteer/issues/665) and [Why does headless need to be false for Puppeteer to work?](https://stackoverflow.com/questions/63818869/why-does-headless-need-to-be-false-for-puppeteer-to-work). Which line of code does the test hang on? As an aside, I'd make `page.on('popup', resolve)` into `page.once('popup', resolve)`. – ggorlen Aug 23 '21 at 14:52
  • You may be right to think they should work same in either modes, but that is not exactly true. For instance, creating pdfs only works in headless. Also, the headless browser should be faster. – Noslac Aug 24 '21 at 09:00
  • Run the puppeteer script without jest (or increase jest timeout to about a minute). If it fails, then it's certainly because the two modes are opened in different viewports. And in one (the headless) of the viewports, an element is not visible (so jest times out while puppeteer is still waiting). The solution would be specify a fixed viewport. Test and let me know. – Noslac Aug 24 '21 at 09:11

0 Answers0