Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New nx workspace doesn't support custom cypress commands #1609

Closed
ca136 opened this issue Jul 22, 2019 · 16 comments · Fixed by #1920
Closed

New nx workspace doesn't support custom cypress commands #1609

ca136 opened this issue Jul 22, 2019 · 16 comments · Fixed by #1920
Assignees
Labels
outdated scope: testing tools Issues related to Cypress / Jest / Playwright / Vitest support in Nx type: bug

Comments

@ca136
Copy link

ca136 commented Jul 22, 2019

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:
ca136/cypress-nx-commands@d999139

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.

@yglin
Copy link

yglin commented Jul 24, 2019

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
Copy link
Collaborator

You can specifically set the path

Yup, please do this manually for the time being.

@bcabanes Do you remember why this was changed in this PR? #853

@ca136
Copy link
Author

ca136 commented Jul 27, 2019

I think it might be more of a documentation issue or just user error. Something broke with our typings.d.ts for custom commands during the migration, but moving the typings inside commands.ts eventually worked.

Seems like Cypress custom commands and TypeScript don't play super well together at the moment. Feel free to close to reduce noise @FrozenPandaz!

@Amakaev
Copy link

Amakaev commented Sep 24, 2019

@FrozenPandaz after adding custom commands, for instance :
Cypress.Commands.add('login', login) and run ng test <project> using Karma
got an error Cannot use namespace 'Cypress' as a value.

@vsavkin
Copy link
Member

vsavkin commented Sep 27, 2019

@FrozenPandaz @bcabanes any update on this?

@Foxandxss
Copy link

Foxandxss commented Oct 4, 2019

I was going to open a related issue to this so I add my information in here.

There should be a support file for custom commands typing or documentation in how to do it yourself.

If you open commands.ts and you write a custom one, say:

const approverLogin = () => {
  return cy.get('#foo');
};

Cypress.Commands.add('approverLogin', approverLogin);

Something silly, but just to get the point.

You get an expected Property 'approverLogin' does not exist on type 'cy'.ts(2339) if you try to use it.

Some pages recommends you to create a index.d.ts at support/ to do something like:

declare namespace Cypress {
  interface Chainable {
    approverLogin: Chainable;
  }
}

and perhaps wire it with a typeRoots in the tsconfig file. That doesn't fix it. The typing I wrote may be wrong, but it is still not something typescript would find. Moving the declaration to commands.ts would probably make it work but I believe that NX should offer a specific d.ts file for custom commands.

EDIT: Following the official cypress recommendation:

https://docs.cypress.io/guides/tooling/typescript-support.html#Transpiling-TypeScript-test-files

VScode starts recognizing the command, the fact that it has parameters but when running the tests, it fails saying the method doesn't exist (but if you leave out the param, running the tests will fail saying that there was a parameter expected but got 0).

So not even using the /// <reference tag (the idea is not to use it either)

bcabanes added a commit to bcabanes/nx that referenced this issue Oct 4, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Oct 4, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
@bcabanes
Copy link
Member

bcabanes commented Oct 4, 2019

@FrozenPandaz @vsavkin I created a PR adding the capability and default examples.

bcabanes added a commit to bcabanes/nx that referenced this issue Oct 4, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
@Foxandxss
Copy link

Not a big fan of that solution tho. I would love to have a separate d.ts file. To keep things simple, but I guess that would work as well.

@Foxandxss
Copy link

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.

bcabanes added a commit to bcabanes/nx that referenced this issue Oct 6, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Oct 6, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
@prudhvidandamudi
Copy link

prudhvidandamudi commented Oct 21, 2019

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.

image

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

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

@bcabanes
Copy link
Member

Hi @prudhvidandamudi
We are looking currently at this issue.

bcabanes added a commit to bcabanes/nx that referenced this issue Oct 21, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Oct 21, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Oct 22, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Oct 22, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Oct 22, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Oct 22, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
@prudhvidandamudi
Copy link

Hi @bcabanes
Thanks for replying. Is there any specific timeline for this issue to be fixed.
Our team is blocked here, as our tests are failing when we are running through CI, as we are using the command line to trigger our tests.

bcabanes added a commit to bcabanes/nx that referenced this issue Oct 22, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Nov 15, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
bcabanes added a commit to bcabanes/nx that referenced this issue Nov 15, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to nrwl#1609
@bcabanes bcabanes added the scope: testing tools Issues related to Cypress / Jest / Playwright / Vitest support in Nx label Nov 15, 2019
FrozenPandaz pushed a commit that referenced this issue Nov 15, 2019
This update the Cypress schematic to handle by default the `supportFile` option
in `cypress.json` with an example for _custom commands_.

Related to #1609
@EugeneCh
Copy link

@FrozenPandaz can you please release this fix?

@dherges
Copy link
Contributor

dherges commented Jan 31, 2020

With @nrwl/[email protected] the problem continuied to exist for me.

Error Message

Oops...we found an error preparing this test file:

  src/integration/app.spec.ts

The error was:

<...>/apps/frontend-e2e/src/integration/app.spec.ts
ERROR in <...>/apps/frontend-e2e/src/integration/app.spec.ts(22,14):
TS2339: Property 'matchImageSnapshot' does not exist on type 'Chainable<JQuery<HTMLElement>>'.

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

Solution

commands.ts:

export {}

declare global {
  namespace Cypress {
    interface Chainable<Subject> {
      login(email: string, password: string): void;
      matchImageSnapshot(): Chainable<Subject>;
      matchImageSnapshot(name: string): Chainable<Subject>;
      matchImageSnapshot(options: any): Chainable<Subject>;
      matchImageSnapshot(name: string, options: any): Chainable<Subject>;
    }
  }
}

Version Info

$ node_modules/.bin/nx --version
8.12.0

$ node_modules/.bin/cypress --version
Cypress package version: 3.8.3
Cypress binary version: 3.8.3

$ node_modules/.bin/tsc --version
Version 3.5.3
"@cypress/[email protected]":
  version "0.4.1"
  resolved "https://<npm>/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a"
  integrity sha1-p3SS9LEdzHxEajSz4ochr9M8ZCo=
  dependencies:
    chalk "^1.1.3"
    cli-cursor "^1.0.2"
    date-fns "^1.27.2"
    figures "^1.7.0"

"@cypress/webpack-preprocessor@~4.1.0":
  version "4.1.1"
  resolved "https://<npm>/@cypress/webpack-preprocessor/-/webpack-preprocessor-4.1.1.tgz#3c0b5b8de6eaac605dac3b1f1c3f5916c1c6eaea"
  integrity sha512-SfzDqOvWBSlfGRm8ak/XHUXAnndwHU2qJIRr1LIC7j2UqWcZoJ+286CuNloJbkwfyEAO6tQggLd4E/WHUAcKZQ==
  dependencies:
    bluebird "3.7.1"
    debug "4.1.1"
  optionalDependencies:
    "@babel/core" "^7.0.1"
    "@babel/preset-env" "^7.0.0"
    babel-loader "^8.0.2"

"@cypress/[email protected]":
  version "1.2.4"
  resolved "https://<npm>/@cypress/xvfb/-/xvfb-1.2.4.tgz#2daf42e8275b39f4aa53c14214e557bd14e7748a"
  integrity sha512-skbBzPggOVYCbnGgV+0dmBdW/s77ZkAOXIC1knS8NagwDjBrNC1LuXtQJeiN6l+m7lzmHtaoUw/ctJKdqkG57Q==
  dependencies:
    debug "^3.1.0"
    lodash.once "^4.1.1"


"@nrwl/[email protected]":
  version "8.12.0"
  resolved "https://<npm>/@nrwl/cypress/-/cypress-8.12.0.tgz#e98fee9da0229e044242e88b8a573f7840261a29"
  integrity sha512-g8qT7Q7IvR1axwQDkmq/PC78JkwygruhIb9cnZA+dLwpkKSO7tiuXzTlyMczEZwsmivkk2+eUgUi4v3WZNhLIA==
  dependencies:
    "@angular-devkit/architect" "0.803.23"
    "@angular-devkit/core" "8.3.23"
    "@cypress/webpack-preprocessor" "~4.1.0"
    fork-ts-checker-webpack-plugin "^3.1.1"
    tree-kill "1.2.2"
    ts-loader "^5.3.1"
    tsconfig-paths-webpack-plugin "3.2.0"
    webpack-node-externals "1.7.2"


webpack-core@^0.6.8:
  version "0.6.9"
  resolved "https://<npm>/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
  integrity sha1-/FcViMhVjad76e+23r3Fo7FyvcI=
  dependencies:
    source-list-map "~0.1.7"
    source-map "~0.4.1"

[email protected], webpack-dev-middleware@^3.7.2:
  version "3.7.2"
  resolved "https://<npm>/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
  integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
  dependencies:
    memory-fs "^0.4.1"
    mime "^2.4.4"
    mkdirp "^0.5.1"
    range-parser "^1.2.1"
    webpack-log "^2.0.0"

[email protected]:
  version "3.9.0"
  resolved "https://<npm>/webpack-dev-server/-/webpack-dev-server-3.9.0.tgz#27c3b5d0f6b6677c4304465ac817623c8b27b89c"
  integrity sha512-E6uQ4kRrTX9URN9s/lIbqTAztwEPdvzVrcmHE8EQ9YnuT9J8Es5Wrd8n9BKg1a0oZ5EgEke/EQFgUsp18dSTBw==
  dependencies:
    ansi-html "0.0.7"
    bonjour "^3.5.0"
    chokidar "^2.1.8"
    compression "^1.7.4"
    connect-history-api-fallback "^1.6.0"
    debug "^4.1.1"
    del "^4.1.1"
    express "^4.17.1"
    html-entities "^1.2.1"
    http-proxy-middleware "0.19.1"
    import-local "^2.0.0"
    internal-ip "^4.3.0"
    ip "^1.1.5"
    is-absolute-url "^3.0.3"
    killable "^1.0.1"
    loglevel "^1.6.4"
    opn "^5.5.0"
    p-retry "^3.0.1"
    portfinder "^1.0.25"
    schema-utils "^1.0.0"
    selfsigned "^1.10.7"
    semver "^6.3.0"
    serve-index "^1.9.1"
    sockjs "0.3.19"
    sockjs-client "1.4.0"
    spdy "^4.0.1"
    strip-ansi "^3.0.1"
    supports-color "^6.1.0"
    url "^0.11.0"
    webpack-dev-middleware "^3.7.2"
    webpack-log "^2.0.0"
    ws "^6.2.1"
    yargs "12.0.5"

webpack-log@^2.0.0:
  version "2.0.0"
  resolved "https://<npm>/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
  dependencies:
    ansi-colors "^3.0.0"
    uuid "^3.3.2"

[email protected]:
  version "4.2.1"
  resolved "https://<npm>/webpack-merge/-/webpack-merge-4.2.1.tgz#5e923cf802ea2ace4fd5af1d3247368a633489b4"
  integrity sha512-4p8WQyS98bUJcCvFMbdGZyZmsKuWjWVnVHnAS3FFg0HDaRVrPbkivx2RYCre8UiemD67RsiFFLfn4JhLAin8Vw==
  dependencies:
    lodash "^4.17.5"

[email protected]:
  version "1.7.2"
  resolved "https://<npm>/webpack-node-externals/-/webpack-node-externals-1.7.2.tgz#6e1ee79ac67c070402ba700ef033a9b8d52ac4e3"
  integrity sha512-ajerHZ+BJKeCLviLUUmnyd5B4RavLF76uv3cs6KNuO8W+HuQaEs0y0L7o40NQxdPy5w0pcv8Ew7yPUAQG0UdCg==

[email protected], webpack-sources@^1.1.0, webpack-sources@^1.2.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
  version "1.4.3"
  resolved "https://<npm>/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
  dependencies:
    source-list-map "^2.0.0"
    source-map "~0.6.1"

[email protected]:
  version "1.1.0-rc.6"
  resolved "https://<npm>/webpack-subresource-integrity/-/webpack-subresource-integrity-1.1.0-rc.6.tgz#37f6f1264e1eb378e41465a98da80fad76ab8886"
  integrity sha512-Az7y8xTniNhaA0620AV1KPwWOqawurVVDzQSpPAeR5RwNbL91GoBSJAAo9cfd+GiFHwsS5bbHepBw1e6Hzxy4w==
  dependencies:
    webpack-core "^0.6.8"

[email protected]:
  version "4.39.2"
  resolved "https://<npm>/webpack/-/webpack-4.39.2.tgz#c9aa5c1776d7c309d1b3911764f0288c8c2816aa"
  integrity sha512-AKgTfz3xPSsEibH00JfZ9sHXGUwIQ6eZ9tLN8+VLzachk1Cw2LVmy+4R7ZiwTa9cZZ15tzySjeMui/UnSCAZhA==
  dependencies:
    "@webassemblyjs/ast" "1.8.5"
    "@webassemblyjs/helper-module-context" "1.8.5"
    "@webassemblyjs/wasm-edit" "1.8.5"
    "@webassemblyjs/wasm-parser" "1.8.5"
    acorn "^6.2.1"
    ajv "^6.10.2"
    ajv-keywords "^3.4.1"
    chrome-trace-event "^1.0.2"
    enhanced-resolve "^4.1.0"
    eslint-scope "^4.0.3"
    json-parse-better-errors "^1.0.2"
    loader-runner "^2.4.0"
    loader-utils "^1.2.3"
    memory-fs "^0.4.1"
    micromatch "^3.1.10"
    mkdirp "^0.5.1"
    neo-async "^2.6.1"
    node-libs-browser "^2.2.1"
    schema-utils "^1.0.0"
    tapable "^1.1.3"
    terser-webpack-plugin "^1.4.1"
    watchpack "^1.6.0"
    webpack-sources "^1.4.1"

@panraj01
Copy link

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.

image

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

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

I have this same issue. Is there a solution? only difference in my case is - I moved my entire test folder outside apps/. If i reference the cypress.json under apps in workspace.json the tests work fine, but if i reference client specific cypress.json in the standalone folder like below then my test fails after 4 min saying cannot fetch the supportFile. The same test work fine in watch mode.

image

@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
outdated scope: testing tools Issues related to Cypress / Jest / Playwright / Vitest support in Nx type: bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.