Angular component test reload after code change doesn't work anymore

[JETiCODEV]

Current behavior

We are planning to use the Cypress Angular component testing in a large scale project, but first we started to create a test application to figure out how everything works. Most of the stuff looks ok except for the fact that when making code changes and waiting for Cypress to rerun the test doesn't fully work.

The component defined in the test file doesn't render anymore, it does when doing a full page reload of the Cypress browser through for example F5.

Desired behavior

Cypress renders the component correctly after making changes to the test.

Test code to reproduce

Attached is the example project which we have created:
cypress.zip

Cypress Version

12.3.0

Node version

16.16.0

Operating System

Windows 11

Debug Logs

No response

Other

No response

[marktnoonan]

This is likely related to #25438 which I'm investigating today.

@JETiCODEV I have a few questions for you if you don't mind:

• Is this 100% consistent - all team members, all machines, all the time?
• Does the test update properly if you use the internal "rerun" button in Cypress or do you have to reload the page? Attaching image of the reload button.
• Do you open cypress and then choose a testing type in the UI, then open the browser through Cypress, or do you use CLI flags to go directly to component testing, like npx cypress --component --browser chrome? I can only ever reproduce this effect when I am using the flags. But I suspect it's possible without them too.

For us, we tested your example project and had no problem with live reloading, so it is nothing in your project's setup or configuration.

[JETiCODEV]

Hi @marktnoonan,

First of all thanks for the response !

I haven't asked another person to run the test, will do it tomorrow, also will try it in a different machine myself. The tests are started by executing the npx cypress open command.

Today I did another test run and saw that it actually executed Firefox, so I switched to Edge and there it works without any issue. Also tried it on my Macbook and there it also works without any issue. It seems to be that the problem is actually related to Firefox, this is the output of the screen:

Clicking on the "rerun" button results in the same output.

[marktnoonan]

Thanks so much for the info @JETiCODEV ... no at all what I expected. Which version of firefox are you testing in?

[JETiCODEV]

Sorry for answering so late, but have been very busy. In the meantime I was able to start writing some component tests in Angular. Was mainly testing against Edge and from time to time also had the same issue where Cypress suddenly doesn't render the component anymore, after doing a full reload F5 it just works again.

With Firefox it seems to be a different story, have tested in on version v91 and v109 and with these version the reload doesn't work.

[warrensplayer]

@JETiCODEV I have picked up the issue to work. I am able to reproduce your issue in Firefox with your supplied sample project. Do you have any updates since your last comment? I will get back to you as soon as possible with my findings.

[JETiCODEV]

Hi @warrensplayer, I haven't been using it with Firefox currently, what I can tell is that we also get the same issue with Edge.

In this case a reload from the Cypress UI fixes it, it also just happens after a couple of iterations. When fully restarting Cypress it then works again for a couple of iterations.

[marktnoonan]

I'm going to route this now @warrensplayer since it's reproducible, if your investigation turned up any other information you can add it here.

[kryshac]

I have the same behavior in firefox, after changing a file, the component is no longer mounted

[cg-roling]

Chrome 116 and Electron 106 produce the same issue here.
Cypress 12.17.4

Once I modify a file and it attempts to reload, I need to refresh the browser to get it to run again. The internal refresh button doesn't work.

No CLI flags, navigating via the UI.

[sureMOISE]

Any update? Same issue while working on angular components. After file changes, test auto reload are not working until browser page refresh,

[jordanpowell88]

@sureMOISE do you have an example repo? I've never encountered this behavior before