New nx workspace doesn't support custom cypress commands

Please make sure you have read the submission guidelines before posting an issue

Expected Behavior

Adding a custom Cypress command with the generated schematics should not cause an error when the tests run.

Current Behavior

The custom commands aren’t registered to due supportFile: false in the cypress.json file.

Failure Information (for bugs)

Adding the minimal steps to reproduce here: https://github.com/ca136/cypress-nx-commands/commit/d9991391140e6aa826b9242ab70ad04bfaf6bb40

Context

Please provide any relevant information about your setup:

Used nx 8.2.0

A minimal reproduce scenario using allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem. see github repo above

Failure Logs

Either:

[tsl] ERROR in /Users/caleb.amsden/myapp/apps/myapp-e2e/src/integration/app.spec.ts(6,6)
      TS2339: Property 'login' does not exist on type 'Chainable<undefined>'.

Or:

The support file is missing or invalid.

Your `supportFile` is set to `/Users/caleb.amsden/myapp/apps/myapp-e2e/src/support/index`, but either the file is missing or it's invalid. The `supportFile` must be a `.js` or `.coffee` file or, if you're using a preprocessor plugin, it must be supported by that plugin.

Correct your `cypress.json`, create the appropriate file, or set `supportFile` to `false` if a support file is not necessary for your project.

Learn more at https://on.cypress.io/support-file-missing-or-invalid

Other

Any other relevant information that will help us help you.

[prudhvidandamudi]

I had this issue, too, after upgrading to nx 8. You can specifically set the path to your support/index.ts in cypress.json. to me it looks like

"supportFile": "./src/support/index.ts",

And it works for me. @FrozenPandaz

I am facing the same issue, I have manually entered my support file path which is like this "supportFile": "cypress/support/index.ts" When I am running my cypress tests using test runner (ng e2e --watch) the tests are running fine. but when I am trying to run my tests using command line (ng e2e) it’s opening the browser for 4 minutes and not running any tests. I am just seeing the window in the below screenshot for 4 mins without any test execution.

My folder structure contains .d.ts files for interfaces and .ts files for custom commands

Can some help me with this issue, I am actually stuck over here.

[Foxandxss]

As @juristr mentions in another place, He found a solution:

If inside commands.ts you do something like:

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
    */
    dataCy(value: string): Chainable<Element>
  }
}


Cypress.Commands.add('dataCy', (value) => {
  return cy.get(`[data-cy=${value}]`)
});

VScode will say, hey, there is a new command, I won’t give you a red wiggle anymore when you use it. Now, running ng e2e will say… what is that dataCy I don’t know about? But if inside the spec file where you use it, you do a import ../support (or your correct path to the support folder), it will actually find it and work.

So you need to do two extra steps for a command. Create the type and import the file with the type where you use it. In a good world you only need to do the former and even better if it is in its own d.ts file.