Adding additional custom commands

Moving code that is reused across the project into a single location allows for updating a single source when changes are made as opposed to having to modify each script.

You can add additional commands to commands.js but I noticed that at some point, it’s possible to have too many and Cypress would have issues. To combat this, I added additional command files with commands that were related. In order to make these additional commands available without having to add an import statement to the tests, you add them to the index.js like so

import './commands';
import './adminOpsCommands';
import './renterCommands';
import './paymentCommands';
import './toastCommands';
import './APIwaitCommands';
import './invalidCardCommands';
import 'cypress-real-events/support'; //Simulates real typing
import './css';

Sample from renterCommands.js

Cypress.Commands.add('renterAddOns', () => {
 // ******** Ad Ons
 // FIRST ADD ON
 cy.get('[class="MuiInputBase-input MuiFilledInput-input"]')
 .eq(1)
 .focus()
 .clear()
 .type('151') // INPUT FIELD
 cy.contains('Maximum exceeded')
 cy.wait(1000)
 cy.get('[class="MuiButtonBase-root MuiIconButton-root"]')
 .eq(0)
 .click() // Minus button. Value = 150
})

Example call-back to this command within in a script would be

cy.renterAddOns()