Cypress custom commands not recognized

user_185896 0
Viewed 9724

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?

cypress
6 Answers

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'
user_13637720

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

user_137550070

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.

user_1858960

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

user_51260470

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.

user_21457690

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.

user_112840420
Related