Custom Commands in Cypress

You can add your own command or overwrite an existing command using custom commands in cypress.

You can see two '.js' files under support folder,

In command.js file you can add your own commands. To add a new command, you can use,

Cypress.Commands.add('commandName',()=>{
        //Implementation
})

In your test file, you can use

cy.commandName()

to call your own command in test file.

To overwrite an existing command,

Cypress.Commands.overwrite('commandName',(arguments)=>{
        //Implementation
})

to use that overwritten function, write the command as usual and add the options parameter as you custom your command.

Code:

Cypress.Commands.add('contact',()=>{
 cy.visit('https://coderscamp.wixsite.com/codeit')
 cy.contains('Contact').click()
 cy.get('#input_comp-kntvy6i7').type('coderscamp')
 cy.get('#input_comp-kntvy6ir').type('coderscampindia@gmail.com')
 cy.get('#input_comp-kntvy6j4').type('testing custom commands')
 cy.get('#textarea_comp-kntvy6jb').type('All the best',{sensitive:true})
 cy.get('[data-testid=buttonElement]').click()
})

Cypress.Commands.overwrite('type',(originalFn,element,text,options)=>{
if(options && options.sensitive){
 options.log = false

 Cypress.log({
 $el: element,
 name: 'type',
 message: '*'.repeat(text.length),
    })
}

return originalFn(element,text,options)
})

So you have learned how to add or overwrite custom commands in cypress. Happy Testing!!!