nx: New nx workspace doesn't support custom cypress commands

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.

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.