Remark: The posts on this page are generally works in progress and subject to changes, therefore comments are disabled.

If we run a cypress test in headless mode we only get screenshots if we run into errors. This makes of course sense because why should we be interested in screenshots if the test passes?

However there might be cases where we are interested to see the state of the web application being tested even if no error happens. This can be achieved with the command cy.screenshot().

Let’s assume we have a test script as follows:

it('Test 1', () => {
  cy.visit('https://www.nasa.gov/');
  cy.contains('Agency Financial Reports').click();
})

If we run this test script in headless mode and then check the content of the cypress\screenshots\ folder, we discover that its empty. So because the test passes without any errors, no screenshot is stored in that folder.

But let’s assume we want to have a screenshot from the page https://www.nasa.gov and another one from the page we land on once we click on the link “Agency Financial Reports”. This could be achieved as follows:

it('Test 1', () => {

  cy.visit('https://www.nasa.gov/');
  cy.screenshot('Test point 1', { capture: 'runner' })
  cy.contains('Agency Financial Reports').click();
  cy.screenshot('Test point 2', { capture: 'runner' })
})

If we then run the script again, two screenshots are stored under the cypress\screenshots\ folder.

$Tag.Cypress.”cy.screenshot”.capture.fullPage, $Tag.Cypress.”cy.screenshot”.capture.runner

The option { capture: ‘runner’ } provided to the cy.screenshot() command in the above code, ensures that the Cypress logs on the left side are included in the screenshot (figure1). If we would leave out that option, the default option { capture: ‘fullPage’} would be appied and the screenshot would be without the Cypress logs on the left side (figure2):

Figure 1:

Figure 2: