Cypress Typescript passing optional command parameters

Question

I'm new to Cypress and Typescript and wondering if someone could point me into the right direction. I'm creating a custom commands like this:

declare namespace Cypress {
    interface Chainable {
        customerDetails(
            fullName?: string,
            email?: string,
            address1?: string,
            city?: string,
            state?:string,
            zip?: string,
            country?: string
            ): Chainable<Element>
    }
}

then I add the new command like this:

Cypress.Commands.add('customerDetails', (fullName, email, address1, city, state, zip, country) => {    
        cy.get('#Full_Name_id').type(fullName)
        cy.get('#Email_id').type(email)
        cy.contains('Address Line 1').type(address1)
        cy.get('#City_id').type(city)
        cy.contains('State').type(state)
        cy.contains('Zip').type(zip)
        cy.get('.MuiSelect-select').click()
        cy.contains(country).click() 
})

now when calling the command I'd like to specify which parameter I'm passing since all of them are optional.

cy.customerDetails(undefined, undefined, undefined, undefined, undefined, undefined, 'Great Britain')

What I would like to achieve is clearer code so I could actually do something like this:

cy.customerDetails(country: 'Great Britain')

I'm more of a Python guy which is quite straightforward there but cannot figured out how to do this in typescript. Anyone who could help?

I've tried the above and then was looking online but gave up since I didn't find anything to solve my problem.

score 3 · Accepted Answer · answered Feb 16 '23 at 14:04

You can use an object as parameter of your function, instead of the multiple single properties:

      customerDetails(params: {
        fullName?: string
        email?: string
        address1?: string
        city?: string
        state?: string
        zip?: string
        country?: string
      }): Chainable<Element>

Cypress.Commands.add(
  'customerDetails',
  ({ fullName, email, address1, city, state, zip, country }) => {
    cy.get('#Full_Name_id').type(fullName)
    cy.get('#Email_id').type(email)
    cy.contains('Address Line 1').type(address1)
    cy.get('#City_id').type(city)
    cy.contains('State').type(state)
    cy.contains('Zip').type(zip)
    cy.get('.MuiSelect-select').click()
    cy.contains(country).click()
  }
)

cy.customerDetails({ fullName: 'John Doe', country: 'Great Britain' })

Obs.: this way you'll need a conditional for each optional param usage, to assert the variable is not undefined before using it, for example:

if(fullName){
  cy.get('#Full_Name_id').type(fullName)
}

Cypress Typescript passing optional command parameters

1 Answers1