typescriptcypresscypress-custom-commands

Cypress Typescript passing optional command parameters


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.


Solution

  • 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)
    }