9

I want to create a custom login command. I've added the command to my commands.js file, and also have the import command added to index.js.

When I create a new test file under my integration folder, I try to reference my new command with cy.loginWith(), but it is not recognizing it as a command.

If I add import ../../../support/commands to the top of my new login spec file, the cy.loginWith() custom command is recognized and invoked correctly.
However I know this is not a good thing to do.

This is my custom command in my commands.js file:

Cypress.Commands.add('loginWith' , (email, password) => {
    cy.get('[name="username"]').type(email)
    cy.get('[name="password"]').type(password)
    cy.get('[name="Login"]').click()
})

This is my index.js file:

import "./commands.js"

This is my list.js spec file that sits under /cypress/integration/clients/client list/lists:

/// <reference types="Cypress" />

import "../../../support/commands"

// login to the app
it('A User logs in and sees a welcome message', () => {
    cy.visit('.../login.cfm')
    cy.loginWith('username', 'password')
    expect(cy.contains('Welcome back!'))

   }
)

Is there something I may have misconfigured that is not recognizing the index.js file?

Improve this question
10
  • 3
    Is the value for supportFile in cypress.json pointing to your index.js file? If it is not set, have you moved index.js from its default location? Commented Jan 10, 2019 at 17:58
  • 1
    The only thing in my cypress.json is: { "requestTimeout": 25000} Commented Jan 10, 2019 at 18:03
  • 1
    is the index.js file located at [project root directory]/cypress/support/index.js? Commented Jan 10, 2019 at 18:30
  • 1
    Yes, it is. Should it be someplace else? Commented Jan 10, 2019 at 19:21
  • 1
    No, that's the default location, where it should be. I was checking that it has not been moved - then Cypress wouldn't be able to hook it up. I am not sure why it can't be found Commented Jan 10, 2019 at 19:26

7 Answers 7

Reset to default
6

My issue was that intellisense worked fine and everything ran perfectly after doing:

import '../support/commands';

My fix was very simple... just add supportFile to your cypress.json:

{
  "supportFile": "cypress/support/index.ts",
  "baseUrl": "http://localhost:3000"
}

// index.ts
import './commands'
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

What is in your index.ts? Because I set my supportFile to e2e.ts and imported the commands into there, but it doesn't seem to work. So I still need to import the commands into every testfile
5

None of the above worked for me, but this worked:

    declare global {
  namespace Cypress {
    interface Chainable {
      customCommand: typeof customCommand;
    }
  }
}

function customCommand(input: MyCustomClass) {
  // ...
}

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

got the answer here: https://github.com/cypress-io/cypress-documentation/issues/2565

Improve this answer

2 Comments

I'm using typescripts and adding the declare global around the namespace fixed the issue for me.
I'm using typescripts and IntelliJ, adding declare global did the trick. Thanks.
0

I restarted Cypress, and selected the proper project folder and now things are working. I guess for me, the solution was to make sure you select the correct project folder. Thanks to all of your suggestions though.

Improve this answer

3 Comments

How did you select correct project folder? What changes you made? I am facing the exact issue.
When opening up Cypress, I made sure to pick the path of where I have Cypress installed. After that, I add this to my index.js :import "./commands.js" so I made sure the command.js was up one location above.
Intelligent Code Completion is different aspect all together from the fact that command is not executing. Reference: docs.cypress.io/guides/tooling/…
0

I had the same problem. Turns out I forgot to prefix the function with cy. Double check to make sure that you are not calling the function with just the name

Improve this answer

Comments

0

I ran into the same problem, but my cause seems to be different. Nevertheless, I add my problem and solution for those that run into the same issue, as the apparent result is the same error.

I had used IntelliJ compile typescript command, this generates a corresponding companion commands.js file next to the source commands.ts file. Intellij hides these files in the ui, but you can click on the > next to the file to show them. For some reason the import './commands' prefers to load the commands.js, which wasn't updated automatically and was missing the function, instead of the .ts file. Deleting the companion .js file resolved my issue.

Improve this answer

Comments

0

I had the same issue but with a different setting, I'm using NX monorepo with many different Cypress 'apps' that share common utilities and libraries in the /libs directory and some of these libraries use custom Cypress commands that I have made. All written in Typescript

My solution was at first to make the external files recognize that they are using Cypress by adding the /// <reference types="cypress" /> but still my custom command was still not recognized so I referred to this and found out using /// <reference path="path/to/your/commands.ts" /> to be very handy and it solved my problem.

Improve this answer

Comments

0

I got this error, heres the fix:

place the true value inside brackets

Cypress.Commands.add('yourCommand', {prevSubject:(true)}, (subject) => { //cy.wrap(subject) //your code here })

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.