Screenshots and Videos in Cypress

Cypress is a very popular testing framework used for testing web applications. In Cypress, developers can write code for test cases in JavaScript, which is most common among developers. Cypress provides various features, but Screenshots and videos are features that are easy to implement. This feature helps the tester to easily debug and understand test failures.

What are Cypress Screenshots?

Cypress Screenshots are the feature that automatically captures images of our application at different stages of your test execution. These screenshots can be taken. When a test fails at specific points in your tests where you want to capture the application's state, you can explicitly take screenshots. When a test fails, these images serve as a visual record of the application's appearance at that moment, aiding in the swift diagnosis and resolution of issues View them to understand the application's state during test execution.

How do you Capture Screenshots Explicitly during a Test Run in Cypress?

We can capture screenshots at any step or time, without depending on cypress for capturing the test upon failure of test. For this, the tester specifies with command that at this point take screenshots, this can be achieved by command cy.screenshot at any point.

To capture screenshots explicitly during a test, write this command in the test step at which you want to take screenshots.

cy.screenshot('Custom name')

Example of Taking Screenshots explicitly:

describe('My first Test suite',function(){
    it('ViewPort Test',function(){
cy.visit('https://write.geeksforgeeks.org/')
cy.screenshot('homepage')
cy.wait(2000)
    })
    it('Tc-1 ViewPort Test',function(){
        cy.viewport(990,760)
        cy.visit('https://write.geeksforgeeks.org/')
        //this is first point where we want to take screenshot
        cy.screenshot('homepage')
        cy.wait(1500)
            })
            it('Tc-2 ViewPort Test',function(){
                cy.viewport(800,600)
                cy.visit('https://write.geeksforgeeks.org/')
                //this is Second point where we want to take screenshot
                cy.screenshot('homepage')
                cy.wait(1500)
                    })
                    it('Tc-3 ViewPort Test',function(){
                        cy.viewport(600,500)
                        cy.visit('https://write.geeksforgeeks.org/')
                        //this is third point where we want to take screenshot
                        cy.screenshot('homepage')
                        cy.wait(1500)
                            })
                            
})

Output:

Different Naming Conventions Used for Screenshots in Cypress

Naming Conventions in cypress are used for naming screenshots, Videos and other files. this naming conventions help to enhance the readability and clarity of the test in cypress. these naming conventions are of Different types like, Default Naming, Custom Naming, With Prefix Naming,

1. Default Naming: When we don't specify any name to the screenshot, Cypress generates name automatically based on the test suite, test case names and viewport-Size.

Format:

 cypress/screenshots/[test-file-path]/[test-name] ([viewport-size]).png

Example:

cypress/screenshots/login.spec.js/User Login Test (1280x720).png

2. Custom Naming: We can assign a custom name to the screenshot using this command, Custom names are the names that is assigned by a tester for easy identification.

Format:

cypress/screenshots/[custom-name].png

Example:

cy.screenshot('custom-login-page')

saves as,

cypress/screenshots/custom-login-page.png.

3. Dynamic Naming Based on Context: In this naming conventions there are two components of name one is variables and the other is context, these two components are used to generate dynamic and meaningful names.

Format:

 [context-based-name]-[timestamp].png

Example:

cy.screenshot(Login-${Date.now()})

saves as

Login-1627874523000.png.

4. Using File Path Naming: In this type of naming the relative path of file is included in the file name for storing file in different directories.

Format:

cypress/screenshots/[relative-path]/[custom-name].png

Example:

cy.screenshot('screenshots/login/custom-login')

saves as

cypress/screenshots/screenshots/login/custom-login.png.

5. With Prefix: We can also use the blackout option which hides the sensitive information before taking screenshots command.

cy.screenshot('custom-name', { blackout: ['selector'] });

6. Multiple Screenshots: Cypress automatically appends a number to the screenshot name if you take multiple screenshots with the same name within the same test run, e.g., custom-name.png, custom-name-1.png, etc.

How do we get Automatic Screenshots of Test Failures in Cypress?

Automatic screenshots of test failures in cypress are enabled by default. This helps in capturing visuals to analyze why test failed at any instant. When a test fails it will capture automatically screenshots and save this screenshot in screenshots folder with name tag 'randomTest(failed).png'. Cypress automatically captures screenshots on the failure of test. for manually enabling this feature by enabling screenshotOnRunFailure option in file cypress.config.js/cypress.json.

Add the following code to your cypress.config.js/cypress.json:

{
screenshotOnRunFailure: true,
}

With this configuration, Cypress will automatically capture screenshots whenever a test fails and save them in the specified screenshots Folder.

Output:

We can view failure test screenshots in the file named screenshots. The naming convention for failure screenshots typically includes the test suite name, test case name, and a timestamp to help identify them easily.

What are Cypress Videos?

Cypress Videos is a feature that records a video of your entire test run. This video captures everything that happens in the browser, providing a complete visual log of the test execution. by this feature we can record the whole test process and we can review it. This automatic video recording feature is used for Debugging test failures, Understanding complex interactions and for sharing the test results with team members

How we Can Capture Video of complete test Automatically?

Step1: Write this code in file: "Cypress.config.js" and save it.

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  video: true,
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

Step 2: Write this on terminal of Cypress

npx cypress run

It will automatically start running all tests in your file and captures videos, automatically create a video file and store all videos in it.

Output:

How to Upload and Verify Screenshots, Videos on Cypress Dashboard?

First of all, we have setup the cloud dashboard and link this dashboard with project after that all videos and screenshots can be uploaded and viewed on the cloud-hosted Cypress Dashboard after that for uploading videos and screenshots on cloud we use this command "--record" flag with the key of the project, and it will automatically upload all the screenshots and videos to the Project Dashboard. So, you can just run the below command to upload the screenshots and videos to the Cypress Dashboard.

npx cypress run --record --key "d1902b21-dad8-4e12-8aa1-cddd1a4e320e"

Step 1: Open cypress and click on connect your project.

Step2: Choose the visibility of your project either public or private its up to you. After that, click on create project.

Step3: A unique key will be assigned to project. Copy this command and run in terminal of your vs code in which cypress file is stored.

Step4: Click on the test that you performed.

Step5: after clicking it shows failed test and passed test with check and cross.

Step6: When we click on the failed test it shows detailed report of test. After that, click on Test replay in bottom.

Step7: So, now we can review your test by playing videos or screenshots.

Conclusion

Cypress's screenshot and video features are powerful tools for enhancing the test debugging process. Screenshots capture the application's state at specific points, while videos provide a comprehensive visual log of the test execution. These features help developers quickly identify and resolve issues, ensuring that web applications function as expected

{
  "screenshotsFolder": "my-screenshots",
  "videosFolder": "my-videos"
}

How do I capture a screenshot with obscured elements?

Use the blackout option with the cy.screenshot() command to obscure specific elements before capturing the screenshot.

cy.screenshot('screenshot-name', { blackout: ['#element1', '.element2'] });

How can we disable video recording for specific test runs?

we can disable video recording for specific test runs by setting the video option to false in the cypress.json configuration file.