How to Perform Screenshots & Videos in cypress

Reading Time: 2 minutes

Hello Readers,
In this blog, we will learn about Cypress screenshots and videos & how to take them manually in cypress.

Screenshot in cypress-

Cypress is a free-open source automation tool that automatically takes screenshots when a test failure occurs during running npx cypress open or cypress run. To manually take a screenshot in cypress, we can use cy.screenshot().

And Screenshots are saved in the screenshot folder which is set  cypress/screenshots by default.

How to perform Screenshots in cypress-

• Cypress provides a feature to automatically take a screenshot when our test case fails. Here, we have defined our test cases in the demo.spec.js file, and when we run the command cypress run then a screenshot automatically gets stored in the screenshot folder as the test case is failed.

describe("Google search",function(){
  it("perform cypress video on demo site",function(){
    cy.visit('https://www.google.co.in/')
    cy.get('input[title=Search').type('Testing{enter}')
    cy.get(':nth-child(1)>.g>.jtfYYd>.yuRUbf>a>.LC20lb').should('contain','Nothing')
  })
})

2. To manually take a screenshot, we can use cy.screenshot().

///<reference types = "cypress"/> 
describe("Google search",function(){
  it("perform cypress screenshot",function(){
    
    cy.visit('https://www.google.co.in/')
    cy.screenshot()
  })
})

Here, we have taken a screenshot of google manually.

Videos in cypress-

Cypress records a video for each spec file when running tests during the cypress run. But cypress doesn’t take videos automatically when we run the command cypress open.

All the videos are stored in the Video folder which is set to cypress/video by default.

How to perform videos in cypress-

To perform videos in cypress, we have to create a demo.spec.js file and inside that file, we will define our test cases as shown below:

///<reference types = "cypress"/> 
describe("Google search",function(){
  it("perform cypress video on demo site",function(){
    cy.visit('https://www.google.co.in/')
    cy.get('input[title=Search').type('Testing{enter}')
    cy.get(':nth-child(1)>.g>.jtfYYd>.yuRUbf>a>.LC20lb').should('contain','Wikipedia')
  })
})

Here, we have taken google as a visiting site and on google search, we have searched Testing and placed an assertion that contains Wikipedia.

Now, Run the command cypress run --spec "cypress/integration/demo.spec.js".

In the videos folder, we can see demo.spec.js.mp4 video is available.

References-

https://docs.cypress.io/guides/guides/screenshots-and-videos#What-you-ll-learn

https://glebbahmutov.com/blog/test-video-play/

Related