Cypress custom commands not recognized

3
votes

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?

5
cypress
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? – Brendan
The only thing in my cypress.json is: { "requestTimeout": 25000} – tonyrocks
is the index.js file located at [project root directory]/cypress/support/index.js? – Brendan
Yes, it is. Should it be someplace else? – tonyrocks
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 – Brendan

5 Answers

3
votes

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"
}
0
votes

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.

0
votes

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

0
votes

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.

0
votes

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