cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.76k stars 3.16k forks source link

Cypress stuck at cy.visit() on saucedemo.com #27501

Open esbarila opened 1 year ago

esbarila commented 1 year ago

Current behavior

I have experienced the following issue before and reported it here #27185 but the website in question was really problematic and the discussion went anywhere but to the point.

I am now experiencing it in the most simple webapp possible: saucedemo.com

The error is this

Your page did not fire its load event within 60000ms

It seems to work is some cases, but I'll provide instructions on how to reproduce it consistently.

Desired behavior

Cypress should not get stuck at cy.visit()

Test code to reproduce

Run both tests in this repo headed (npx cypress run --headed), or open the suite and run the tests. https://github.com/esbarila/crowdar/tree/master

Cypress Version

12.17.3

Node version

18.16.0

Operating System

Linux (tried in Ubuntu 22.10 and Linux Mint 21)

Debug Logs

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

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

Other

No response

jordanpowell88 commented 1 year ago

I can confirm this is happening in the example repo provided. There are a couple ways I'm able to reproduce the issue show below where the AUT url is not displaying even though the AUT itself appears to have loaded:

cy.visit() error

I can trigger this when running the following command:

npx cypress run --headed

Note: this only appears to happen in electron

I can also trigger it in open mode using the following command:

npx cypress open

Note: this appears to happen in every browser

esbarila commented 1 year ago

@jordanpowell88 happens to me in chrome, electron and firefox. Somehow it seems Firefox is a little bit more resillient but ends up failing as well.

jennifer-shehane commented 1 year ago

I am seeing this error in headless electron as well, so I'm not sure it's isolated to headed only. Maybe it is more intermittent in headless.

Screen Shot 2023-08-10 at 9 46 30 AM
sumabala9 commented 1 year ago

I am too facing similar issue inspite of upgrading cypress to latest version , I also observed this behaviour in some other websites as well , this is really frustrating to use it from terminal every-time 👎

error
MikeMcC399 commented 1 year ago
MikeMcC399 commented 1 year ago

The website https://www.saucedemo.com/ is deployed from the source repo https://github.com/saucelabs/sample-app-web to https://saucelabs.github.io/sample-app-web/.

MikeMcC399 commented 1 year ago

This issue is mentioned on https://filiphric.com/how-to-wait-for-page-to-load-in-cypress together with a resolution:

image

I was not able to get this to work, but perhaps this hint may help in some way?

sumabala9 commented 1 year ago

@MikeMcC399 I tried above work-around https://filiphric.com/how-to-wait-for-page-to-load-in-cypress by using as below in my e2e.js file in support folder but still no luck . can you check and let me know if am doing anything mistake here

import './commands'

beforeEach(()=> {

    Cypress.on('uncaught:exception',()=> {
       return false;

  })
    cy.intercept('https://www.saucedemo.com/').as('todos')
    cy.visit('/',{headers: { "Accept-Encoding": "gzip, deflate" },});
    cy.wait('@todos')
    // page is loaded, continue with the test

  })
MikeMcC399 commented 1 year ago

@sumabala9

can you check and let me know if am doing anything mistake here

Sorry for any confusion! I was also not able to get the workaround to solve the problem. We need to wait for further feedback from the Cypress team.

sweikenb commented 1 year ago

Any update on this issue?

Szymon-dziewonski commented 1 year ago

Hello everybody, I've noticed that while I unregister service worker (using pwa in nuxt) everything works. So with this founding I used

beforeEach(() => {
  if (!window.navigator || !navigator.serviceWorker) {
    return null;
  }
  const cypressPromise = new Cypress.Promise((resolve, reject) => {
    navigator.serviceWorker.getRegistrations().then((registrations) => {
      if(!registrations.length) resolve();
      Promise.all(registrations).then(() => {
        resolve();
      });
    });
  });
  cy.wrap('Unregister service workers').then(() => cypressPromise)
});

and my tests seems to work, hope that will help you all :)

senpl commented 1 year ago

In my case downgrading cypress from 13.0.0 to 12.17.4 fix the issue. Still this might not be same issue.

MikeMcC399 commented 1 year ago

@omartaghlabi

This issue is about the site https://www.saucedemo.com/ producing the error message

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

You have a different error message, so it would be better for you to open a different issue so that you can supply all the relevant details, including, for instance, which browser isn't connecting.

sweikenb commented 1 year ago

In our case the problem was caused by an external resource that had no route in our internal network, so it ran into a connection timeout which in turn used up the 60 seconds of the Cypress connection test before the actual tests gets executed.

So I am not sure if this is actually the problem described in this issue but I was able to debug it using the DEBUG env-variable to get extended debug information:

DEBUG="cypress:*" cypress ...

I hope this helps someone with the same issue.

MikeMcC399 commented 1 year ago

@sweikenb

Many thanks for describing the reason for your problem and how you solved it! 👍🏻

It is a different root cause than the one in this issue, however, as you say, it may well help somebody else with the same symptoms.

renzho7 commented 1 year ago

I was facing this issue. My solution was cypress->developer tools -> View Appdata. here I deleted the "production" folder closed cypress and open it again

cypress 12.17.4 node v20.5.0

ArthurPopko commented 1 year ago

I was facing this issue. My solution was cypress->developer tools -> View Appdata. here I deleted the "production" folder closed cypress and open it again

cypress 12.17.4 node v20.5.0

Thank you @renzho7! After removing the production folder it worked for me for the only one test run and I had to remove it every time and rerun cypress. Thanks for your answer I decided to figure out where exactly in that folder is the problem. So I've finally found that you just need to delete this folder: ~/Library/Application Support/Cypress/cy/production/browsers/chrome-stable/interactive/Default/Service Worker/CacheStorage. After removing this folder saucedemo visit constantly works.

The path and the result is here: https://youtu.be/AdcBb6CAofs cc: @MikeMcC399

michelleSeman commented 12 months ago

Any updates on fixes for the original issue?

piotrkiszka commented 11 months ago

Solution provided by @renzho7 is working! Thanks a lot dude! :)

rajputpriyankaa commented 11 months ago

@renzho7 It works. Thank you!!

Haviles04 commented 11 months ago

I'm getting the same issue after setting up vite-pwa on a Vue application. Removing the file provided by @renzho7 fixed it on the GUI, but it still failed headlessly.. currently the only way I got it to work was by deleting the service worker

 cy.visit('/', {
    onBeforeLoad(win) {
      delete win.navigator.__proto__.serviceWorker;
    },
  }); 
CezaryW91 commented 10 months ago

I was facing this issue. My solution was cypress->developer tools -> View Appdata. here I deleted the "production" folder closed cypress and open it again cypress 12.17.4 node v20.5.0

Thank you @renzho7! After removing the production folder it worked for me for the only one test run and I had to remove it every time and rerun cypress. Thanks for your answer I decided to figure out where exactly in that folder is the problem. So I've finally found that you just need to delete this folder: ~/Library/Application Support/Cypress/cy/production/browsers/chrome-stable/interactive/Default/Service Worker/CacheStorage. After removing this folder saucedemo visit constantly works.

The path and the result is here: https://youtu.be/AdcBb6CAofs cc: @MikeMcC399

This works just fine for me :) Thanks!

ghost commented 10 months ago

I have the same issue and none of those workarounds worked for me ;[ the funny thing is that:

williamjameswillis commented 9 months ago

I have the same issue and none of those workarounds worked for me ;[ the funny thing is that:

  • it started 2 weeks ago without any changes on our end
  • the first test runs fine, the problem is with all subsequent tests

I have this same issue and it only happens on Chrome 120 headlessly (headed works fine)

Chrome 118 the exact same test passes fine headless and headed

areeb111 commented 8 months ago

Having the same issue with latest cypress 13.6.2 The tests with Chrome 120, stucks at visit command

MujahidHassan-Tester commented 8 months ago

Having the same issue with latest cypress 13.6.2 The tests with Chrome 120, stucks at visit command

higortorquetti commented 8 months ago

Having the same issue with latest cypress 13.6.2 The tests with Chrome 120 stucks at visit command

the first one runs but all below fail, any work around guys?

Slylex commented 8 months ago

Same issue here, first test passes but the subsequent tests are facing :
"Your page did not fire its load event within 60000ms." Even though my page seems to have loaded. Headed or not does not fix the issue. The tests were running fine before, nothing has changed on my end.

Cypress 13.6.2

MuriellePambou commented 8 months ago

Same. I have tried it on multiple cypress versions from 13.3.0 to 13.6.2 and also on chrome, electron and firefox, it happens on all of them.

baodoanjl commented 7 months ago

Same issue here. The problem with mine was some third party scripts or images wasn't able to fully load on the page correctly. Make sure you check the browser requests to detect those.

After remove/prevent those resources being load, all the tests are working fine.

Manzano07 commented 7 months ago

I was facing this issue. My solution was cypress->developer tools -> View Appdata. here I deleted the "production" folder closed cypress and open it again

cypress 12.17.4 node v20.5.0

tks!!!

AndreaDev14 commented 7 months ago

Hi, I was having the same issue (Chrome) and my solution was : cypress.config added chromeWebSecurity: false

const { defineConfig } = require('cypress')

module.exports = defineConfig({

  chromeWebSecurity: false // add this line
})

Cypress v13.6.4

Solution: https://github.com/cypress-io/cypress/issues/19826 cc: @cachafla

osma commented 6 months ago

I had this issue with Cypress 13.6.6 (latest) and the Electron browser. The first test is working, but some subsequent tests are failing, similar to what @TiltUp-Rad described in https://github.com/cypress-io/cypress/issues/27501#issuecomment-1810392987

In my case (which no doubt is different from many of the other cases described above) I think what happens is this:

  1. The first (successful) test visits /a which is loaded into Electron just fine. The browser JS application then fetches /b based on (Cypress simulated) user interaction; this also works fine. Apparently the /b response is stored in some kind of cache by Electron or otherwise remembered.
  2. The second (unsuccesful) test visits /b, which Electron loads from its cache(?), but the load event is never triggered, so the operation times out after 60 seconds.

There is no problem visiting /c in the second test, because it hasn't been cached by Electron. The second test can also visit /b?foo=bar just fine. It's only when the exact same URL visited in the second test has already been fetched in the first test that the cy.visit gets stuck.

Using --browser chrome works around the problem so this appears to be specific to Electron (but in limited testing, similar problems happen with Firefox as well).

This may be a niche situation, but I think it sheds light on the caching behavior of Electron, which could be the underlying reason for at least some of the problems reported here.

Stephane-Gon commented 6 months ago

I had the same issue @osma described, using version 13.6.6(latest). So I decided to downgrade version by version until I found a stable version.

  1. Both version 13.6.6 and 16.6.5 had the same problem, the first test would run but the second would get stuck at the cy.visit() fetching assets that were already fetched from the first test.
  1. I thought version 13.6.4 would be the one because it had a different electron version, (Electron version got updated at 13.6.5 from 25.8.4 to 27.1.3.) but the problem remained, but not as consistently, sometimes the tests would run other times they would fail at the second test.

  2. Then from version 13.6.3 to 13.0.0 (the last one I tried) everything worked fine, with no more problems on the second test, and during the cy.visit() of the second test it looked like fewer assets were being fetched.

I don't know what the actual problem is but for now, I'm going to stick with version 13.6.3

Furong-Huang commented 6 months ago

Having the same issue with latest cypress 13.7.0 too. Not sure when this issue will be fixed. I've tried this solution and added below configs. Then it's working fine now.

const { defineConfig } = require('cypress')

module.exports = defineConfig({

  chromeWebSecurity: false // add this line
})
omteri commented 5 months ago

en mi caso lo solucione, re instalando cypress

shivamguys commented 5 months ago

Same issue here. The problem with mine was some third party scripts or images wasn't able to fully load on the page correctly. Make sure you check the browser requests to detect those.

After remove/prevent those resources being load, all the tests are working fine.

How do you prevent some resources not to load like some scripts not to load or stylesheets?

baodoanjl commented 5 months ago

Same issue here. The problem with mine was some third party scripts or images wasn't able to fully load on the page correctly. Make sure you check the browser requests to detect those. After remove/prevent those resources being load, all the tests are working fine.

How do you prevent some resources not to load like some scripts not to load or stylesheets?

Use environment variable is an option. Set TEST_ENV = true flag for the CYPRESS run, and use it to control if we want a script to load or not in code.

zbaibolov commented 4 months ago

if you have images try to stub them like this before calling cy.visit("/")

cy.intercept("GET", "**/*.{png,jpg,jpeg,gif}", req => {
    req.reply({
        statusCode: 200,
        body: "",
        headers: {
              "Content-Type": "image/png",
             },
        })
}).as("stubImages")
Mahmaddz commented 4 months ago

I am currently using "cypress": "^13.10.0" Its not working for me. what i observed that it stuck on routes that have route guard attached with them (they use services and services aren't working in my case) . maybe it will be helpful for debugging

I also tried solutions mentioned in the thread, nothing worked for me. i am using windows

GilbertoGNG commented 3 months ago

Nothing worked for me either, I am using latest cypress version (13.12.0). All I can notice is that the first two times the test is executed in headed mode, it works. After a third or fourth attempt, the error happens. I am using macOS and chrome 126.

GilbertoGNG commented 3 months ago

There was a bug with Chromium https://issues.chromium.org/issues/347724924

Updating to the latest version (126.0.6478.127) solved the issue for me.

hkirazrepsrv commented 3 months ago

@GilbertoGNG Great news! We are facing same issue, and we applied 2 temporary solutions:

beforeEach(() => {
  cy.wrap(
    Cypress.automation('remote:debugger:protocol', {
      command: 'Network.clearBrowserCache',
    })
  );
// OR
  cy.window().then((win) => {
    return win.navigator.cookieEnabled;
  });
  cy.document().then((doc) => {
    if (typeof doc.hasStorageAccess === 'function') {
      return doc.hasStorageAccess();
    } else {
      // Return a resolved promise with true if hasStorageAccess is not supported
      return Cypress.Promise.resolve(true);
    }
  });
});
armandoleite commented 2 months ago

In my case, I discovered resources (JS and Images) that:

To resolve this, I added the blockHosts configuration to the cypress.config.js file (example below):

blockHosts: [ "www.googletagmanager.com", "analytics.google.com", "www.google-analytics.com" ],

And it started working normally.

Cypress 13.13.0 Linux Any browser (including electron).

yeus commented 2 months ago

None of the solutions above work for me either. I tried removing loading assets and other things except for the base functionality of the app. all of it.. none works. I am using webpack dev server so I am wondering if that also plays a role. Although I have had the same problem when building the production app as well. Sometimes it works.. mostly it doesn't.

The thing that makes this so hard is that its really hard to debug this. I have no idea, why cypress doesn't detect the "load" event. When I run the chrome profiler on my app, the load event is clearly there. I also get a notification, if I subscribe to that event. So I consider this a bug of cypress. I checked the networking tab and everything gets downloaded and finished + load event. So I have no idea why cypress doesn't detect that my page load is finished.

It would be good to have some debug functionality in cypress which at least tells you why it thinks the loading is blocked.

yuri-pires commented 1 month ago

I fixed the problem with this code:

  e2e: {
    // Configure your E2E tests here
    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,ts}",
    watchForFileChanges: false,
    chromeWebSecurity: false,
    blockHosts: ["https://events.backtrace.io"],
  }

As you can see, the sauce demo site has this broke url that always respond with a HTTP 401 status, so i block then and my sample project works fine now. Solution tested in Chrome and Firefox.

Cypress: 13.13.2

image

The trick is: open the Cypress Runner, find some broken URLs, and block them all. Be careful, you have superpowers now