Cypress e2e tests should also watch actual project files for changes

TekSiDoT commented 6 years ago

I'm running cypress via ng e2e app-e2e --watch.

Expected behavior: After changing files in the original app folder, the app is reloaded and the tests are automatically rerun.

Actual behavior: When changing files in the original app folder, an app reload is triggered by the Angular dev server, however, cypress does not recognize this change and does not automatically rerun the tests.

TekSiDoT commented 6 years ago

Possibly linked to https://github.com/cypress-io/cypress/issues/456

bcabanes commented 6 years ago

Hey @TekSiDoT,

In the mean time, you can run your tests in watch mode while using the headless property. Cypress will then look for the change of your spec files and will rerun your test when the application will change too.

You can do that with:

npm run e2e -- --watch --headless

TekSiDoT commented 6 years ago

Hey @bcabanes,

thanks for the info. As far as I can see, Cypress.io will also respect the --watch flag in its 'headed' UI mode.

Anyhow, including Cypress.io has been a huge benefit for us, thanks guys! I'll keep an eye on the blocking issue.

TekSiDoT commented 5 years ago

Can potentially be solved by integrating https://github.com/TheBrainFamily/cypress-app-watcher-preprocessor

shlomiassaf commented 5 years ago

This is probably fixed, in my setup updating the application source will trigger a re-run of all tests.

haskelcurry commented 5 years ago

It's not fixed, I have 8.4.13.
Changing the app files reloads the browser viewport, but not re-runs the tests. While in Nrwl docs it says "Change your tests or your application code, and Cypress will rerun the tests." which is seemingly not true.
This ruins the benefit of using Cypress watch mode for our team...
Any progress on this?
Thanks for your great work in any case!

haskelcurry commented 5 years ago

@TekSiDoT did you manage to leverage https://github.com/TheBrainFamily/cypress-app-watcher-preprocessor to overcome this?

TekSiDoT commented 5 years ago

I haven't pursued this issue any further. I think that the aforementioned preprocessor can help, but I haven't actually tested it.

vsavkin commented 5 years ago

Hey folks. It looks like https://github.com/bahmutov/cypress-watch-and-reload can address it. Would you be interested in exploring it and maybe potentially submitting a PR?

haskelcurry commented 5 years ago

@vsavkin Hi Viktor, I've tried it out and it didn't do the trick... The page reloads, but the tests do not rerun.

jdpearce commented 5 years ago

I know the docs say that changing the application code will re-run the tests, but this isn't the way Cypress works or can currently work afaict. 😞

Given that, I'd say this shouldn't be listed as a bug at the moment. I'm happy to relabel this as a feature request though. 📝

In the meantime, unsatisfying as it might be, I think changing the documentation to be clearer would be the simplest option. 📚

(NB - I also haven't been able to get the cypress-watch-and-reload package to work. There is an open issue in that repo about this, I think)

TekSiDoT commented 5 years ago

Just tried the repo created in the aforementioned cypress-watch-and-reload issue.

The problem seems to be platform related, I can confirm it's working fine for MacOS. There's also a related PR that seems to alleviate a part of the problem.

jdpearce commented 5 years ago

@TekSiDoT - I'm actually running macOS and I couldn't get cypress-watch-and-reload to work with an Nx app. I don't think that's down to Nx itself, but I'm open to ideas.

The PR you referenced has already been merged but it doesn't seem to fix that issue, at least not for me.

TekSiDoT commented 5 years ago

Ah ok, sorry for the confusion. I'll attempt to reproduce the behaviour in a vanilla Nx app.

TekSiDoT commented 5 years ago

So, I got it working with a vanilla Nx workspace using a new web-components app.

Steps required for configuration:

Create Nx workspace and app
Install cypress-watch-and-reload
Install @types/node(was missing in my new installation, required for 'require')
Append to your apps/{appName}-e2e/src/plugins/index.js file: require('cypress-watch-and-reload/plugins')
Append to your apps/{appName}-e2e/src/support/index.ts file: require('cypress-watch-and-reload/support')
Change filetype: apps/{appName}-e2e/src/support/index.ts to .js
In your apps/{appName}-e2e/config.json:
- Change "supportFile" from false to "./src/support"
- Append the folder to be watched: "cypress-watch-and-reload": { "watch": "../../apps/{appName}/**/*" }
Start cypress with nx e2e {appName}-e2e --watch
Run the respective .spec
Change files in your app, Cypress should rerun its tests
Profit

On my machine(tm), this works on MacOS and a Parallels VM running W10 (even watches across systems via file shares).

I've also created a repo with the respective setup.

jdpearce commented 5 years ago

@TekSiDoT - I've just cloned your repo locally and it doesn't seem to work. I've also followed the steps you listed using a standard angular workspace and that didn't work either. 😞

TekSiDoT commented 5 years ago

Ugh, ok. @mtuzinskiy could you try and reproduce?

haskelcurry commented 5 years ago

@TekSiDoT How come you don't have the angular.json file in your repo? Only the workspace.json, first time seeing this... After npm i I run ng e2e cypress-repro and it complains (no surprises)

Local workspace file ('angular.json') could not be found.

UPD: Oh yes, I get it... It's not always Angular now. So, here's thing that we need to clarify: which framework do we use?
I have an issue with Angular. @jdpearce @TekSiDoT what did you guys tested it on?

jdpearce commented 5 years ago

@mtuzinskiy I've tried this with both Angular and Web Components workspaces.

TekSiDoT commented 5 years ago

I usually work with Angular, I've tried it with a web component workspace because I felt I could try something new & simple.

However, cypress shouldn't really be impacted by the actual framework used. I'll attempt to apply the suggested approach to a bigger (internal) repo that uses Angular a lot.

einSelbst commented 5 years ago

Hey guys. just stumbled over this issue but I'm not using angular. Just wanted to say that cypress run is not intended for watching, in case this is used here, cypress open should be used. See https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Configuration

vsavkin commented 5 years ago

Just to clarify: the cypress builder should work same with/without Angular.
@jdpearce have we decided to simply update the docs instead of changing the behavior?
@einSelbst nx e2e myproj-e2e --watch will use cypress open. The watch flag determines if we use run or open. https://github.com/nrwl/nx/blob/master/packages/cypress/src/builders/cypress/cypress.impl.ts#L144

jdpearce commented 5 years ago

@vsavkin - I updated the docs but the change has yet to filter through into live. I left this issue open as a feature request, but I wasn't sure if there was anything we could do as I couldn't get cypress-watch-and-reload to work. 😞

kuceb commented 5 years ago

Hi everyone, I mentioned this over at the Cypress issue for this feature https://github.com/cypress-io/cypress/issues/456

I have a gross hack that listens to logs by webpack-dev-server

Reloading alongside webpack-dev-server

This is what I use: I listen for webpack-dev-server HMR logs in the console, and trigger a re-run, as described here https://stackoverflow.com/questions/52231111/re-run-cypress-tests-in-gui-when-webpack-dev-server-causes-page-reload/57980326#57980326

in cypress/support/index.js or top of spec file:

Cypress.on('window:before:load', (win)=>{
  const _consoleInfo = win.console.info
  win.console.info = function () {
    if (arguments[0].includes('App updated.')) {
      cy.$$('.restart', top.document).click()
    }
    return _consoleInfo.apply(win.console, arguments)
  }
})

This will work as long as you have webpack-dev-server info being printed to the console (there are no other hooks into the webpack reloading behavior I could find)

FrozenPandaz commented 4 years ago

Hi, sorry about this.

This was mislabeled as stale. We are testing ways to mark not reproducible issues as stale so that we can focus on actionable items but our initial experiment was too broad and unintentionally labeled this issue as stale.

github-actions[bot] commented 3 years ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

Areen3 commented 3 years ago

Here You are smoe soluction, (for now) -> using second configuration in angular.json:

"e2eSrv": { "builder": "@nrwl/cypress:cypress", "options": { "cypressConfig": "apps/af/example-e2e/cypress.json", "tsConfig": "apps/af/example-e2e/tsconfig.e2e.json" }, "configurations": { "production": {} } }, I remove section devServerTarget and on one terminal I run nx serve and on anohter termina run nx e2eSrv it works good

github-actions[bot] commented 3 years ago

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

github-actions[bot] commented 1 year ago

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.

nrwl / nx

Cypress e2e tests should also watch actual project files for changes #870

Reloading alongside webpack-dev-server