How to take screenshots of automated tests with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-24 13:09:11

## Today, in "Pinches of Cypress", learn how to take screenshots while running tests, even for specific components

This pinch goes to André Souza, who once asked:

> How do I take screenshots with Cypress for web testing?

Good question, André!

First of all, it's worth mentioning that such knowledge can be of great value when debugging failures, creating test artifacts, or even tutorials like this.

To exemplify, I will show a test of the [**basic course of Cypress**](https://www.udemy.com/course/test-automation-with-cypress-basic/), from the [**Talking About Testing School**](https://udemy.com/user/walmyr), where I test the successful submission of a form.

```js
it('successfully submits the form', () => {
  const customer = {
    firstName: 'John',
    lastName: 'Doe',
    email: 'johndoe@example.com'
  }

  cy.screenshot('empty-form')
  cy.fillMandatoryFields(customer)
  cy.screenshot('form-filled')
  cy.contains("Confirm Tickets").click()

  cy.get('.success p')
    .should('contain', 'Ticket(s) successfully ordered.')
  cy.screenshot('success-message')
})
```

Before filling the form, I take a screenshot, where the file's name is `empty-form`. See the screenshot below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yckttqqovy3iivy5tz71.png)

After filling out all the required fields, I take another screenshot called `form-filled`, right before submitting it. See the screenshot below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkg488lo6p6xbegkskns.png)

Finally, after checking the success message, I take a screenshot with the `success-message` name. See the screenshot below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4fudc8jbg3u4sgw6732.png)

**Note:** When running tests in headless mode, [**by default Cypress takes screenshots in case of failures**](https://docs.cypress.io/api/commands/screenshot.html#Test-Failures), but now you know how to do it even if tests pass!

### Bonus

And if you want, you can even take a screenshot of a specific HTML element. See.

```js
cy.get('.success p')
  .should('contain', 'Ticket(s) successfully ordered.')
  .screenshot('success-message-component')
```

See below the screenshot taken, which I named `success-message-component`.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5v2vtzzeu7picjzs27rj.png)

Cool, isn't it?

That's it for today.

**Note 2:** For more details on `cy.screenshot()`'s usage, read [**Cypress's official documentation**](https://docs.cypress.io/api/commands/screenshot.html).
___

Did you like today's “**Pinch of Cypress**”?

I'm curious to know what you'd like to learn in the next content. Leave a comment, and I might write about it!

___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/02/24/como-tirar-screenshots-ao-longo-dos-testes-com-cypress/) blog.
___

Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr). Happy testing! 🎉