cypress: Receiving "CypressError: Timed out after waiting 60000ms for your remote page to load" when running tests in Chrome Headless

Current behavior

When I run my tests in Chrome Headless I’m facing this error below: Abs: these tests work just fine when I’m running the code using Chrome inside Cypress CLI

CypressError: Timed out after waiting `60000ms` for your remote page to load.

Your page did not fire its `load` event within `60000ms`.

You can try increasing the `pageLoadTimeout` value in `cypress.json` to wait longer.

Browsers will not fire the `load` event until all stylesheets and scripts are done downloading.

When this `load` event occurs, Cypress will continue running commands.
      at timedOutWaitingForPageLoad (http://localhost:9001/__cypress/runner/cypress_runner.js:158036:72)
      at http://localhost:9001/__cypress/runner/cypress_runner.js:159086:16
      at tryCatcher (http://localhost:9001/__cypress/runner/cypress_runner.js:13196:23)
      at http://localhost:9001/__cypress/runner/cypress_runner.js:8318:41
      at tryCatcher (http://localhost:9001/__cypress/runner/cypress_runner.js:13196:23)
      at Promise._settlePromiseFromHandler (http://localhost:9001/__cypress/runner/cypress_runner.js:11131:31)
      at Promise._settlePromise (http://localhost:9001/__cypress/runner/cypress_runner.js:11188:18)
      at Promise._settlePromise0 (http://localhost:9001/__cypress/runner/cypress_runner.js:11233:10)
      at Promise._settlePromises (http://localhost:9001/__cypress/runner/cypress_runner.js:11309:18)
      at _drainQueueStep (http://localhost:9001/__cypress/runner/cypress_runner.js:7903:12)
      at _drainQueue (http://localhost:9001/__cypress/runner/cypress_runner.js:7896:9)
      at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:9001/__cypress/runner/cypress_runner.js:7912:5)
      at Async.drainQueues (http://localhost:9001/__cypress/runner/cypress_runner.js:7782:14)
  From Your Spec Code:
      at Context.eval (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:46592:12)

Desired behavior

I would like that my tests worked in Chrome Headless, just like they do in Chrome inside Cypress CLI.

Test code to reproduce

Unfortunately, this error is happening in in a huge private project and I couldn’t have the time to invest trying to reduce the problem to a single repo that I would be able to share with you guys. Although I will give much more detail about the error in the “Other” section, and if the information isn’t enough to proceed with the investigation, I will be glad to help with Log’s and everything else I may provide.

Cypress Version

9.3.1 (since 8.3.x)

Other

Hi, I’m having an issue when trying to run some specific tests using Cypress in my React application. Most specifically, I’m facing this error:

CypressError: Timed out after waiting `60000ms` for your remote page to load.

Your page did not fire its `load` event within `60000ms`.

You can try increasing the `pageLoadTimeout` value in `cypress.json` to wait longer.

Browsers will not fire the `load` event until all stylesheets and scripts are done downloading.

When this `load` event occurs, Cypress will continue running commands.
      at timedOutWaitingForPageLoad (http://localhost:9001/__cypress/runner/cypress_runner.js:158036:72)
      at http://localhost:9001/__cypress/runner/cypress_runner.js:159086:16
      at tryCatcher (http://localhost:9001/__cypress/runner/cypress_runner.js:13196:23)
      at http://localhost:9001/__cypress/runner/cypress_runner.js:8318:41
      at tryCatcher (http://localhost:9001/__cypress/runner/cypress_runner.js:13196:23)
      at Promise._settlePromiseFromHandler (http://localhost:9001/__cypress/runner/cypress_runner.js:11131:31)
      at Promise._settlePromise (http://localhost:9001/__cypress/runner/cypress_runner.js:11188:18)
      at Promise._settlePromise0 (http://localhost:9001/__cypress/runner/cypress_runner.js:11233:10)
      at Promise._settlePromises (http://localhost:9001/__cypress/runner/cypress_runner.js:11309:18)
      at _drainQueueStep (http://localhost:9001/__cypress/runner/cypress_runner.js:7903:12)
      at _drainQueue (http://localhost:9001/__cypress/runner/cypress_runner.js:7896:9)
      at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:9001/__cypress/runner/cypress_runner.js:7912:5)
      at Async.drainQueues (http://localhost:9001/__cypress/runner/cypress_runner.js:7782:14)
  From Your Spec Code:
      at Context.eval (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:46592:12)

This error showed up when I updated my Cypress version from 5.4.x to 8.3.x, but, at the time that I’ve updated it, I couldn’t have the time to invest investigating this issue, and, right now, I have my Cypress at 9.3.1 and continues to face the problem.

I’ve tried many things to solve it, including increasing the pageLoadTimeout value in cypress.json to wait longer. The fun fact is that when I open the Cypress recording, the page appears to be correctly loaded, and continues to give me the error. Although, I may think is important to mention that this error does not happen every time, below here I’ll paste some of the cases where I’ve faced the error and whether I haven’t:

Browsers that I’ve seen the error:

• Chrome(Headless) - Version: 74
• Chrome(Headless) - Version: 94
• Chrome(Headless) - Version: 96
• Chromium(Headless) - Version: 97

Browsers that I’ve not seen the same error:

• Chrome(Cypress CLI) - Version: 94
• Chrome(Cypress CLI) - Version: 96
• Chromium(Cypress CLI) - Version: 97
• Firefox(Headless) - Version: 89
• Firefox(Cypress CLI) - Version: 89
• Electron(Headless) - Version: 94
• Electron(Cypress CLI) - Version: 94

So, what I’ve done was a narrow investigation in my code, hoping to find a line or a bunch of lines that may be the source of the problem. At the moment, I have two tests that are throwing this error, in one of them I had no luck trying to narrow the lines of code where the problem happens, sometimes with a group of commented lines I could avoid the error and sometimes commenting the same group of lines I keep having the error. But, what really matters, is that in one of my tests I could reduce the error to one single line of code, that is the one that follows:

<img src={image_url} alt={name} />

When I comment this line my test pass without any issues, and when this line in on my code, I have the issue that I’ve mentioned.

So, after figuring out where exactly the error was happening, I’ve tried to switch the dynamic values of the attributes src and alt to string values, so I’ll a JSX tag just like an HTML tag. This is the tag with the values that I’ve used to try:

<img src="https://images-americanas.b2w.io/produtos/01/00/img7/01/00/item/5244/2/5244290P1.jpg"
     alt="alt"
/>

And, with those values, I still had the same problems when running my tests. After this, I had the idea running my tests using the environment variable DEBUG=cypress:*, so I would be able to see a complete log of information when my test was running. Since I had the information that excluding one line of my code I could change the test result from success to the error that I was investigating, I executed the test in each of the cases and compared the two logs, in most part of the beginning, they are practically the same, just changing the order of some logs, but in a certain part of the log, a bunch of requests were aborted, and without apparent reason for it. Right below there is a part of this log:

cypress:server:server-base Getting remote state: { auth: null, props: { port: '9001', tld: 'localhost', domain: '' }, origin: 'http://localhost:9001', strategy: 'http', visiting: false, domainName: 'localhost', fileServer: null } +36ms
  cypress:network:cors Parsed URL { port: '443', tld: 'googleapis.com', domain: 'translate' } +68ms
  cypress:proxy:http:response-middleware injection levels: { isInitial: false, wantsInjection: false, wantsSecurityRemoved: false } +1ms
  cypress:server:server-base Getting remote state: { auth: null, props: { port: '9001', tld: 'localhost', domain: '' }, origin: 'http://localhost:9001', strategy: 'http', visiting: false, domainName: 'localhost', fileServer: null } +0ms
  cypress:server:video capture stderr log { message: 'frame=  279 fps= 64 q=13.0 size=    1024kB time=00:00:10.60 bitrate= 791.4kbits/s dup=165 drop=0 speed=2.42x    ' } +573ms
  cypress:server:video capture stderr log { message: 'frame=  294 fps= 59 q=13.0 size=    1024kB time=00:00:11.20 bitrate= 749.0kbits/s dup=173 drop=0 speed=2.26x    ' } +584ms
  cypress:server:video capture stderr log { message: 'frame=  307 fps= 56 q=12.0 size=    1024kB time=00:00:11.72 bitrate= 715.8kbits/s dup=180 drop=0 speed=2.14x    ' } +499ms
  cypress:server:request aborting { requestId: 'request17' } +2s
  cypress:server:request aborting { requestId: 'request15' } +44ms
  cypress:server:request aborting { requestId: 'request14' } +157ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40776 } +2s
  cypress:server:request aborting { requestId: 'request7' } +39ms
  cypress:server:request aborting { requestId: 'request16' } +1ms
  cypress:server:video capture stderr log { message: 'frame=  319 fps= 53 q=13.0 size=    1280kB time=00:00:12.20 bitrate= 859.5kbits/s dup=186 drop=0 speed=2.04x    ' } +504ms
  cypress:server:request aborting { requestId: 'request19' } +69ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40808 } +109ms
  cypress:server:request aborting { requestId: 'request18' } +1ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40806 } +0ms
  cypress:server:request aborting { requestId: 'request20' } +85ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40810 } +85ms
  cypress:server:request aborting { requestId: 'request30' } +113ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40858 } +113ms
  cypress:server:request aborting { requestId: 'request32' } +132ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40886 } +133ms
  cypress:server:video capture stderr log { message: 'frame=  332 fps= 51 q=12.0 size=    1280kB time=00:00:12.72 bitrate= 824.4kbits/s dup=193 drop=0 speed=1.96x    ' } +496ms
  cypress:server:request aborting { requestId: 'request21' } +246ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40820 } +246ms
  cypress:server:request aborting { requestId: 'request29' } +4ms
  cypress:server:request aborting { requestId: 'request40' } +0ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40846 } +3ms
  cypress:server:request aborting { requestId: 'request25' } +44ms
  cypress:server:request aborting { requestId: 'request44' } +0ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40832 } +44ms
  cypress:server:request aborting { requestId: 'request31' } +72ms
  cypress:server:request aborting { requestId: 'request57' } +0ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40884 } +73ms
  cypress:server:request aborting { requestId: 'request45' } +181ms
  cypress:server:request aborting { requestId: 'request65' } +0ms
  cypress:server:util:socket_allowed allowed socket closed, removing { localPort: 40914 } +180ms
  cypress:server:video capture stderr log { message: 'frame=  346 fps= 49 q=13.0 size=    1280kB time=00:00:13.28 bitrate= 789.6kbits/s dup=200 drop=0 speed=1.88x    ' } +585ms
  cypress:server:request aborting { requestId: 'request26' } +222ms
  cypress:server:request aborting { requestId: 'request54' } +0ms
  cypress:server:request aborting { requestId: 'request80' } +0ms

This part of the log is just above the part where the error shows up in the log, that it this part:

cypress:server:screenshot (s97) save /home/vinicius.resende/Documents/B2W/DEV/Main/b2wads-webapp/tests/cypress/screenshots/list-products.feature/List products -- Navigate to add product (failed).png +2ms
  cypress:server:plugins plugin event registered? { event: 'after:screenshot', isRegistered: false } +1m
  cypress:server:project onMocha fail +1m
  cypress:server:reporter got mocha event 'fail' with args: [ { _testConfig: { testConfigList: [], unverifiedTestConfig: {} }, id: 'r3', order: 1, title: 'Navigate to add product', err: { message: 'Timed out after waiting `60000ms` for your remote page to load.\n' + '\n' + 'Your page did not fire its `load` event within `60000ms`.\n' + '\n' + 'You can try increasing the `pageLoadTimeout` value in `cypress.json` to wait longer.\n' + '\n' + 'Browsers will not fire the `load` event until all stylesheets and scripts are done downloading.\n' + '\n' + 'When this `load` event occurs, Cypress will continue running commands.', name: 'CypressError', stack: 'CypressError: Timed out after waiting `60000ms` for your remote page to load.\n' + '\n' + 'Your page did not fire its `load` event within `60000ms`.\n' + '\n' + 'You can try increasing the `pageLoadTimeout` value in `cypress.json` to wait longer.\n' + '\n' + 'Browsers will not fire the `load` event until all stylesheets and scripts are done downloading.\n' + '\n' + 'When this `load` event occurs, Cypress will continue running commands.\n' + '    at timedOutWaitingForPageLoad (http://localhost:9001/__cypress/runner/cypress_runner.js:158036:72)\n' + '    at http://localhost:9001/__cypress/runner/cypress_runner.js:159086:16\n' + '    at tryCatcher (http://localhost:9001/__cypress/runner/cypress_runner.js:13196:23)\n' + '    at http://localhost:9001/__cypress/runner/cypress_runner.js:8318:41\n' + '    at tryCatcher (http://localhost:9001/__cypress/runner/cypress_runner.js:13196:23)\n' + '    at Promise._settlePromiseFromHandler (http://localhost:9001/__cypress/runner/cypress_runner.js:11131:31)\n' + '    at Promise._settlePromise (http://localhost:9001/__cypress/runner/cypress_runner.js:11188:18)\n' + '    at Promise._settlePromise0 (http://localhost:9001/__cypress/runner/cypress_runner.js:11233:10)\n' + '    at Promise._settlePromises (http://localhost:9001/__cypress/runner/cypress_runner.js:11309:18)\n' + '    at _drainQueueStep (http://localhost:9001/__cypress/runner/cypress_runner.js:7903:12)\n' + '    at _drainQueue (http://localhost:9001/__cypress/runner/cypress_runner.js:7896:9)\n' + '    at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:9001/__cypress/runner/cypress_runner.js:7912:5)\n' + '    at Async.drainQueues (http://localhost:9001/__cypress/runner/cypress_runner.js:7782:14)\n' + 'From Your Spec Code:\n' + '    at Context.eval (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:46592:12)', sourceMappedStack: 'CypressError: Timed out after waiting `60000ms` for your remote page to load.\n' + '\n' + 'Your page did not fire its `load` event within `60000ms`.\n' + '\n' + 'You can try increasing the `pageLoadTimeout` value in `cypress.json` to wait longer.\n' + '\n' + 'Browsers will not fire the `load` event until all stylesheets and scripts are done downloading.\n' + '\n' + 'When this `load` event occurs, Cypress will continue running commands.\n' + '    at timedOutWaitingForPageLoad (http://localhost:9001/__cypress/runner/cypress_runner.js:158036:73)\n' + '    at <unknown> (http://localhost:9001/__cypress/runner/cypress_runner.js:159086:17)\n' + '    at tryCatcher (http://localhost:9001/__cypress/runner/cypress_runner.js:13196:24)\n' + '    at <unknown> (http://localhost:9001/__cypress/runner/cypress_runner.js:8318:42)\n' + '    at tryCatcher (http://localhost:9001/__cypress/runner/cypress_runner.js:13196:24)\n' + '    at Promise._settlePromiseFromHandler (http://localhost:9001/__cypress/runner/cypress_runner.js:11131:32)\n' + '    at Promise._settlePromise (http://localhost:9001/__cypress/runner/cypress_runner.js:11188:19)\n' + '    at Promise._settlePromise0 (http://localhost:9001/__cypress/runner/cypress_runner.js:11233:11)\n' + '    at Promise._settlePromises (http://localhost:9001/__cypress/runner/cypress_runner.js:11309:19)\n' + '    at _drainQueueStep (http://localhost:9001/__cypress/runner/cypress_runner.js:7903:13)\n' + '    at _drainQueue (http://localhost:9001/__cypress/runner/cypress_runner.js:7896:10)\n' + '    at Async.../../node_modules/bluebird/js/release/async.js.Async._drainQueues (http://localhost:9001/__cypress/runner/cypress_runner.js:7912:6)\n' + '    at Async.drainQueues (http://localhost:9001/__cypress/runner/cypress_runner.js:7782:15)\n' + 'From Your Spec Code:\n' + '    at Context.eval (tests/cypress/integration/list-products/index.js:56:12)', parsedStack: [Array], codeFrame: [Object] }, state: 'failed', body: 'function () {\n' + '      const state = window.testState;\n' + '      return cy\n' + '        .then(() => state.onStartScenario(scenario, indexedSteps))\n' + '        .then(() =>\n' + '          resolveAndRunBeforeHooks.call(this, scenario.tags, state.feature.name)\n' + '        )\n' + '        .then(() =>\n' + '          indexedSteps.forEach((step) =>\n' + '            stepTest.call(this, state, step, rowData)\n' + '          )\n' + '        )\n' + '        .then(() => state.onFinishScenario(scenario));\n' + '    }', type: 'test', duration: 61420, wallClockStartedAt: '2022-01-21T17:16:49.608Z', timings: { lifecycle: 32, 'before all': [Array], 'before each': [Array], test: [Object] }, file: null, invocationDetails: { function: 'Object.runTest', fileUrl: 'http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature', originalFile: 'node_modules/cypress-cucumber-preprocessor/lib/createTestFromScenario.js', relativeFile: 'node_modules/cypress-cucumber-preprocessor/lib/createTestFromScenario.js', absoluteFile: '/home/vinicius.resende/Documents/B2W/DEV/Main/b2wads-webapp/node_modules/cypress-cucumber-preprocessor/lib/createTestFromScenario.js', line: 45, column: 1, whitespace: '    ', stack: 'Error\n' + '    at Object.runTest (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:10137:5)\n' + '    at eval (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:10253:15)\n' + '    at Array.forEach (<anonymous>)\n' + '    at createTestFromScenarios (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:10202:16)\n' + '    at createTestsFromFeature (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:10328:3)\n' + '    at Suite.eval (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:46531:5)\n' + '    at Object.265./home/vinicius.resende/Documents/B2W/DEV/Main/b2wads-webapp/node_modules/cypress-cucumber-preprocessor/lib/createTestsFromFeature (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:46527:3)\n' + '    at o (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:1:265)\n' + '    at r (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:1:431)\n' + '    at eval (http://localhost:9001/__cypress/tests?p=tests/cypress/integration/list-products.feature:1:460)' }, currentRetry: 0, retries: 0, _slow: 10000 } ] +1m

After reaching this part of the error investigation, I thought that would be better to open an Issue because in my point of view would be harder to find out the problem. So, I hope that the information that I’ve provided is useful to the investigation and I would like to say that I’ll be glad to contribute with everything my hands can reach.

Since now I’m thankful for the attention and help.