cypress: Electron browser hangs/errors on apps with window.onbeforeunload alerts

Current behavior:

When running a test using the Electron browser on a webpage that contains a window.onbeforeunload script and trying to navigate away, Cypress will fail to load the next page. The test will eventually fail after a PageLoadTimeout exception. This occurs when using any kind of navigation such as cy.reload(), cy.visit(), or interacting with an element that contains an href linking to somewhere else.

Test run with Electron 59:

Desired behavior:

Test run with Chrome 67:

Steps to reproduce:

describe('Electron 59 alert prompt bug', function() {
  it('Should navigate away from the page', function() {
    cy.on('window:confirm', function() {
      return true;
    });
    cy.visit('http://localhost:8080/');
    cy.visit('http://localhost:8080/form');
  });
  it('Should reload the page', function() {
    cy.visit('http://localhost:8080/');
    cy.reload();
  });
});

The page under test needs to contain a window.onbeforeunload function which alters the returnValue. To reproduce, I use http-server to serve a barebones HTML file

<!DOCTYPE html>

<script>
  window.onbeforeunload = function (e) {
    e.returnValue = 'Dialog';
    return;
  }
</script>

Versions

Cypress: 3.0.2 MacOS: High Sierra 10.13.5 Browsers: Chrome 67, Electron 59

About this issue

  • Original URL
  • State: open
  • Created 6 years ago
  • Reactions: 33
  • Comments: 49 (14 by maintainers)

Commits related to this issue

Most upvoted comments

I am reopening this issue. While this was partially addressed in https://github.com/cypress-io/cypress/pull/5603 in 3.6.1 release by fixing the hanging while running in Electron (aka - the process would never exit), this did not actually fix the error portion of the issue.

Problem

Any application that has a defined onbeforeunload handler that triggers an alert causes Cypress page load to time out within the Electron browser (not Chrome). Typically this is only noticed in CI since Electron is the chosen browser by default. Resulting in the error below:

Screen Shot 2020-01-30 at 12 20 23 PM

To reproduce

Example 1

index.html

<html>
<body>
  hello world
</body>
<script>
  window.onbeforeunload = () => confirm("test");
</script>
</html>

spec.js

it('should accept the confirm and successfully reload', function () {
  cy.on('window:confirm', () => true) // this is unnecessary as it is the default behavior
  cy.visit(`index.html`)
  cy.reload()
})

Example 2

it('works', () => {
  cy.visit('http://webdriverjsdemo.github.io/leave/')
  cy.contains('Go Home')
    .click()
})

Workaround

There are 2 possible workarounds.

  1. Run your tests in Chrome using the --browser flag during cypress run or choosing Chrome during cypress open.

OR

  1. Add the code below to your support/index.js file. This will prevent the prompts from occurring - and not hang Electron.
Cypress.on('window:before:load', function (win) {
  const original = win.EventTarget.prototype.addEventListener

  win.EventTarget.prototype.addEventListener = function () {
    if (arguments && arguments[0] === 'beforeunload') {
      return
    }
    return original.apply(this, arguments)
  }

  Object.defineProperty(win, 'onbeforeunload', {
    get: function () { },
    set: function () { }
  })
})
+25
jennifer-shehane on Feb 12, 2020

Started encountering this problem in our CI build. For now going to workaround by monkey patching window.addEventListener:

Cypress.on('window:load', function(window) {
    const original = window.addEventListener;
    window.addEventListener = function() {
        if (arguments && arguments[0] === 'beforeunload') {
            return;
        }
        return original.apply(this, arguments);
    };
});
+17
Obi-Dann on Dec 7, 2018

There is also a situation where, where after visiting the site above, this will exhibit as a Page Load timeout.

Failing test code below:

describe('page', () => {
  it('works', () => {
    cy.visit('http://webdriverjsdemo.github.io/leave/')
    cy.contains('Go Home')
      .click()
  })

  it('works 2', () => {
    cy.visit('http://webdriverjsdemo.github.io/leave/')
      .contains('Go Home')
      .click()
  })
})
Screen Shot 2019-11-04 at 5 03 12 PM Screen Shot 2019-11-04 at 5 00 17 PM

Electron will not display this error in the Console when this is happening also (if you have not manually interacted with the page)

[Intervention] Blocked attempt to show a ‘beforeunload’ confirmation panel for a frame that never had a user gesture since its load. https://www.chromestatus.com/feature/5082396709879808

Workaround

There are 2 possible workarounds.

  1. Run your tests in Chrome using the --chrome flag during cypress run or choosing Chrome during cypress open.

OR

  1. Add the code below to your support/index.js file. This will prevent the prompts from occurring - and not hang Electron.
Cypress.on('window:before:load', function (win) {
  const original = win.EventTarget.prototype.addEventListener

  win.EventTarget.prototype.addEventListener = function () {
    if (arguments && arguments[0] === 'beforeunload') {
      return
    }
    return original.apply(this, arguments)
  }

  Object.defineProperty(win, 'onbeforeunload', {
    get: function () { },
    set: function () { }
  })
})
+16
jennifer-shehane on Nov 4, 2019

I was able to work around the issue with the following code in the test:

cy.window().then((win) =>  {
	win.onbeforeunload = null;
})
cy.visit(<the next page goes here>)
+10
bimimicah on Nov 10, 2018

@melibe23 No updates on this. It is still an issue.

+6
jennifer-shehane on Jun 8, 2021

Just chiming in here to say we have an issue within our tests because Cypress doesn’t properly handle the window.onbeforeunload event in Electron w/ Chromium 59, but works perfectly fine using Chrome 70 running the test runner. In our Jenkins env using docker, it also experiences the same issue with the cypress/base:10 image.

My guess is that the version of Chromium used by Electron (59) that ships with Cypress currently (3.1.0) has some major bugs and issues. I see #2559 is acknowledged, any ETA when that might get rolled out? I imagine this would fix a swath of issues being worked around due to an old version of Chromium.

Ya’ll doin’ great work though, I really appreciate Cypress 😃

Cypress: 3.1.0 macOS: 10.14.1 Browsers: Electron 59, Chrome 70

+5
brandonb927 on Nov 14, 2018

@valscion Commenting certainly doesn’t make Cypress less interested in fixing an issue, but for longstanding issues, we do prioritize them based on impact and effort to fix and this is certainly a known issue in our backlog to be prioritized against other work.

There’s this other issue with onbeforeunload alerts that’s popped up and made this prevelant within Chrome browsers which has put this somewhat on our radar. https://github.com/cypress-io/cypress/issues/28553 But I’m not sure they can both be addressed together or not.

+4
jennifer-shehane on Jan 22, 2024

@adnanerlansyah403 No, this hasn’t been fixed yet. It’s on a list of bugs that we’d like to prioritize fixing though, if we find the time.

+3
jennifer-shehane on Dec 13, 2023

This worked for me

Cypress.on('window:before:unload', e => {
    e.stopImmediatePropagation()
})
+3
k4mr4n on Jan 18, 2023

Team any idea if this will get fixed any time soon? This blocker happens in chrome browser too (Both headless & normal).

+3
kbaala88 on Jan 29, 2021

I have pushed another example https://github.com/cypress-io/cypress-test-tiny/tree/test-unload that shows the problem in Electron 61 (Chrome passes, despite showing an error). The website in question is http://webdriverjsdemo.github.io/leave/

and has the following script

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

The error displayed in the browser console:

Screen Shot 2019-07-06 at 6 05 20 PM

This error has docs in https://www.chromestatus.com/feature/5082396709879808 and probably is not disabled in Electron

Funnily, you cannot close the Electron browser in GUI mode - it just keeps showing the error

Screen Shot 2019-07-06 at 6 05 38 PM

Running cypress run --headed shows the error that happens on CI - the test keeps running

Screen Shot 2019-07-06 at 6 08 12 PM
+2
bahmutov on Jul 6, 2019

Putting the code from workaround number 2 into my beforeEach() block solved this for me.

+1
hemaybedead on May 18, 2023

This issue is keeping me from using cy.origin(), since when I click the href to navigate to an external site, I can see the browser is loading the page, but cypress is still failing because of the page load timeout error. Unable to post a reproducer since it’s proprietary code but here’s an excerpt of what I’m doing:

    cy.get('[data-cy="my-external-site"]').click();
    cy.origin('https://my-external-site.com', () => {
      cy.url().should('include', 'my-external-site');
    });

According to the docs, the above code should work, but this page load timeout error is keeping me from using it.

+1
Joelasaur on Feb 3, 2023

Please suggest for any other workarounds and I shall try it!! Thanks in advance!!!

+1
kbaala88 on Nov 17, 2020

Thanks for the quick response. Tried the below workaround, however still not working.

Cypress.on('window:before:load', function (win) {
  const original = win.EventTarget.prototype.addEventListener

  win.EventTarget.prototype.addEventListener = function () {
    if (arguments && arguments[0] === 'beforeunload') {
      return
    }
    return original.apply(this, arguments)
  }

  Object.defineProperty(win, 'onbeforeunload', {
    get: function () { },
    set: function () { }
  })
})
+1
kbaala88 on Nov 18, 2020

Still the same issue occurs. Accessing an URL and throws one pop-up since one file couldn’t be loaded. After that, even after closing the pop-up the tool shows ‘Loading’ progress and keeps waiting for the page to load and throws the below error. image

+1
kbaala88 on Nov 17, 2020

If you’re using window.onbeforeunload=function() {...} instead of window.addEventListener('beforeunload', function() {...}, you can use this workaround:

Cypress.on('window:load', function(window) {
  Object.defineProperty(window, 'onbeforeunload', {
    get: function() {},
    set: function() {}
  });
});
+1
Fonger on Mar 16, 2019
Read more comments on GitHub
← cypress: EEXIST: file already exists - cannot start server on Windows
cypress: ELECTRON_RUN_AS_NODE fails with --browser chrome →