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