[BUG] beforeunload event in headless mode is failing

[reiinoldo]

Context:

• Playwright Version: 1.4.2
• Operating System: Windows 10 and also test as a Docker container
• Node.js version: v10.15.1
• Browser: Chromium
• Extra: https://github.com/reiinoldo/playwright-docker-test

Here is the problem

I'm trying to simulate changes to be saved before closing the page, running not in a headless mode it succeeds but when headless is activated due to the need to run inside a Docker container its fails.

I've just created a React App with a button that active/deactivate the preventDefault event (https://github.com/reiinoldo/playwright-docker-test/blob/master/src/App.js).

The test clicks on the button to unsaved the changes and tries to close the page, so with that, the dialog appears and after saving the changes clicking on the button then the page can be closed.

Code Snippet

https://github.com/reiinoldo/playwright-docker-test/blob/master/e2e/playwright.config.js

import { chromium } from "playwright";

module.exports = {
  browserType: chromium,
  launchConfig: {
    headless: true,
    args: ["--no-sandbox", "--disable-setuid-sandbox"],
    slowMo: 500,
  },
};

https://github.com/reiinoldo/playwright-docker-test/blob/master/e2e/pageObjects/index.js

import { browserType, launchConfig, contextConfig } from "../playwright.config";
import DialogHandler from "./dialog";

const rootSelector = "#root";
let browser, context, page, dialog;

export const root = async () => await page.$(rootSelector);

export const load = async () => {
  browser = await browserType.launch(launchConfig);
  context = await browser.newContext(contextConfig);
  page = await context.newPage();
  await page.goto(baseURL);
  dialog = new DialogHandler(page);
};

export const reload = async () => await page.reload();

export const close = async () => await page.close({ runBeforeUnload: true });

export const closeBrowser = async () => await browser.close();

export const getTitle = async () => await page.title();

export const dialogAppers = async () => await dialog.appeared();

export const dismissDialog = async () => await dialog.dismiss();
;

https://github.com/reiinoldo/playwright-docker-test/blob/master/e2e/specs/app.js

import { clicOnSaveButton } from "../pageObjects/app";
import {
  load,
  close,
  closeBrowser,
  dialogAppers,
  dismissDialog,
} from "../pageObjects/index";

describe("React App", () => {
  beforeEach(async () => {
    await load();
  });

  afterEach(async () => {
    await closeBrowser();
  });

  it("Should show the unsaved changes dialog when tries to close the page without saving the changes", async () => {
    expect(await clicOnSaveButton()); // save
    expect(await clicOnSaveButton()); // unsaved changes
    await close();
    expect(await dialogAppers());
    expect(await dismissDialog());
    expect(await clicOnSaveButton()); // save to close
  });
});

Output result

Comparing to successful execution, the left side is headless false, and the other is headless true which is failing:

[reiinoldo]

I've noticed that using the browserType Webkit it works well in both modes headless or not.