I have written some function in commands.js file for cypress automation testing, out of which I am able to invoke only one i.e."login" but unable to invoke other functions form another .js file. Cypress Test Runner showing

"TypeError: cy.FillAddCaseDetails is not a function"

describe('Adding a Case on CSS Poratal ', function() {

  before(function () {
    cy.login()    // calling login function successfully
  })

  it('open add case',function(){
    cy.wait(9000)
    cy.hash().should('contains','#/home')
    cy.wait(['@GETcontentLoad']);
    cy.wait(['@POSTcontentLoad']);
    cy.get('[uib-tooltip="Add Case"]').click({force:true})
    cy.log('clicked on Add case')
    cy.wait(3000) 
    cy.get('[ng-click="lookup.cancel()"]').click({force: true})
    cy.get('[ng-click="lookup.closeAddCase()"]').click({force: true})
    cy.get('[uib-tooltip="Add Case"]').click({force:true}) 
    cy.wait(3000)
    cy.get('[ng-model="lookup.selectedPartner"]',{force:true})
      .type(AddJob.JobData.Partner,{force: true}) 
    cy.xpath('//input[@ng-model="lookup.selectedPartner"]')
      .should('be.visible').then(() => {
        cy.FillAddCaseDetails()   // unable to call   
        cy.FillCustomerDetails()  // unable to call 
      })

Function:

Cypress.Commands.add("FillCustomerDetails", () => {

  cy.get('[ng-model="lookup.firstName"]')
    .type(AddJob.JobData.FirstName, { force: true}) 

  cy.get('[ng-model="lookup.lastName"]')
    .type(AddJob.JobData.LastName, { force: true })

  cy.get('[ng-model="lookup.customerPhone"]')
    .type(AddJob.JobData.CustomerPhone, { force: true })

  cy.get('[value="NEXT"]').click({ force: true })
})

expected : function will get called
actual : TypeError: cy.FillAddCaseDetails is not a function

I have written some function in commands.js file for cypress automation testing, out of which I am able to invoke only one i.e."login" but unable to invoke other functions form another .js file. Cypress Test Runner showing

"TypeError: cy.FillAddCaseDetails is not a function"

describe('Adding a Case on CSS Poratal ', function() {

  before(function () {
    cy.login()    // calling login function successfully
  })

  it('open add case',function(){
    cy.wait(9000)
    cy.hash().should('contains','#/home')
    cy.wait(['@GETcontentLoad']);
    cy.wait(['@POSTcontentLoad']);
    cy.get('[uib-tooltip="Add Case"]').click({force:true})
    cy.log('clicked on Add case')
    cy.wait(3000) 
    cy.get('[ng-click="lookup.cancel()"]').click({force: true})
    cy.get('[ng-click="lookup.closeAddCase()"]').click({force: true})
    cy.get('[uib-tooltip="Add Case"]').click({force:true}) 
    cy.wait(3000)
    cy.get('[ng-model="lookup.selectedPartner"]',{force:true})
      .type(AddJob.JobData.Partner,{force: true}) 
    cy.xpath('//input[@ng-model="lookup.selectedPartner"]')
      .should('be.visible').then(() => {
        cy.FillAddCaseDetails()   // unable to call   
        cy.FillCustomerDetails()  // unable to call 
      })

Function:

Cypress.Commands.add("FillCustomerDetails", () => {

  cy.get('[ng-model="lookup.firstName"]')
    .type(AddJob.JobData.FirstName, { force: true}) 

  cy.get('[ng-model="lookup.lastName"]')
    .type(AddJob.JobData.LastName, { force: true })

  cy.get('[ng-model="lookup.customerPhone"]')
    .type(AddJob.JobData.CustomerPhone, { force: true })

  cy.get('[value="NEXT"]').click({ force: true })
})

expected : function will get called
actual : TypeError: cy.FillAddCaseDetails is not a function

• javascript
• typescript
• cypress

• You can edit your question, please don't post code in comments – barbsan Commented Sep 11, 2019 at 12:05

5 Answers 5

This is the top result for this error so I would like to add what I did to fix it. This is relevant to version >=10 and typescript. The problem ended up being that the supportFile setting in cypress.config.ts was set to false; I changed my config to this:

import cypress, { defineConfig } from 'cypress'

export default defineConfig({
  
  e2e: {
    'baseUrl': 'http://localhost:4200',
    supportFile: 'cypress/support/e2e.ts'
  },
  
  
})

I created the custom commands in commands.ts

declare namespace Cypress {
  interface Chainable<Subject = any> {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
    */
     clearIndexedDB(): Promise<void>
  }
}

Cypress.Commands.add('clearIndexedDB', async () => {
  const databases = await window.indexedDB.databases();

  await Promise.all(
    databases.map(
      ({ name }) => {
        if (!name) return
        return new Promise((resolve, reject) => {
          const request = window.indexedDB.deleteDatabase(name);

          request.addEventListener('success', resolve);
          request.addEventListener('blocked', resolve);
          request.addEventListener('error', reject);
        })
      },
    ),
  );
});

Then I uncommented this line in my e2e.ts file

import './commands';

If you added your Custom Command to support/commands.js file, You need to import that file from support/index.js file. Create support/index.js, if it's not available and add the line import "./commands.js" to it.

In my case solution was a restart of the cypress test runner.

From the Cypress docs: https://on.cypress.io/typescript#Types-for-custom-commands

if you add the command cy.dataCy into your supportFile like this:

// cypress/support/index.js
Cypress.Commands.add('dataCy', (value) => {
  return cy.get(`[data-cy=${value}]`)
})

Then you can add the dataCy command to the global Cypress Chainable interface (so called because commands are chained together) by creating a new TypeScript definitions file beside your supportFile, in this case at cypress/support/index.d.ts.

// in cypress/support/index.d.ts
// load type definitions that come with Cypress module
/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    /**
     * Custom command to select DOM element by data-cy attribute.
     * @example cy.dataCy('greeting')
    */
    dataCy(value: string): Chainable<Element>
  }
}

cy.xpath("//div[@class='c-navigatorItem-faceplate ng-scope ng-isolate-scope']").click(); Is it a valid to use because I am getting the TypeError cy.xpath is not a function