Cypress: Is there a way to highlight/border a specific element when taking a cypress screenshot?

[tnrich]

Hey there, we're using cypress's great screenshot functionality to generate documentation for our apps. It would be nice to be able to highlight (or put a red border around or have an arrow pointing to) a certain element while taking a full page screenshot. It would be nice if the method would also work when taking a cropped screenshot or a screenshot of a larger containing element.

For example, in the following screenshot, it would be nice to be able to have say the "Submit" button get a red outline:

Does anyone know of a good way of doing this? Is this possible right now or does cypress need to add some functionality to make this happen. Thanks!

[bahmutov]

@tnrich you can do it yourself. For example we highlight elements the tests have interacted with in https://www.cypress.io/blog/2018/12/20/element-coverage/ Of course in your case this is much simpler

cy.get('button#my-button')
  .then($button => {
    $button.css('border', '1px solid magenta')
  })
cy.screenshot('press this button')

[tnrich]

Thanks very much @bahmutov !!