Useful debugging code for Cypress

I ran into an issue where I couldn't exactly tell what was going on with the script I was writing. I stumbled on a post on StackExchange and found that adding this to commands.js will highlight the element you're working with:

Cypress.Commands.add('highlight', { prevSubject: 'element' }, (Sel) => { $el.css('border', '5px solid red') })

Usage:

cy.get('[class="someclass"]')

.highlight()

.pause()

So what this does is it puts a 5px wide red line (box or circle depending on the element) around whatever it is you're just defined and then pauses the script so you can inspect the output.