Skip to main content

Cypress Screenshot Command

When there is a dire need to take screenshots of tests, the screenshot command in cypress is the one to be used.

Syntax

cy.screenshot()
cy.screenshot(fileName)
cy.screenshot(options)
cy.screenshot(fileName, options)

Arguments Used In Screenshot:

  • Log: Displays the command in the command log, and the default value is true.
  • Blackout: Used to match string elements in the screenshot to be blacked out. Does not apply to runner captures.
  • capture: Used to let cypress know which part of the cypress to be captured, and the default value here is 'fullpage.'
  • clip: Used to crop final shot of the image, should have shape: { x: 0, y: 0, width: 100, height: 100 }
  • disableTimersAndAnimations: Prevents javascript timers when true.
  • Padding: Used to alter dimensions of a screenshot of an element.
  • Scale: Used whether to scale the app to fit into the browser viewport.
  • overwrite: Whether to overwrite duplicate screenshot files with the same file name during saving.
  • onBeforeScreenshot/onAfterScreenshot: A callback before and after non failure screenshot.

Correct Usage Of Screenshot:

cy.screenshot()
cy.get('#edit-pass').screenshot()

Example

The screenshots will be saved in the cypress/screenshots folder by default. However, this can be changed, and for today we will be doing our real-time work over the programs buzz login page.

Screenshot:

describe('Automate PB',()=>{

    it('Next',()=>{

        cy.visit('https://www.programsbuzz.com/user/login')
        cy.get('#edit-name').type('Ash')
        cy.screenshot()
        

        })
    })

  • So this one takes a full screenshot after a test step and stores it in cypress/screenshots in png format.

Filename:

describe('Automate PB',()=>{

    it('Next',()=>{

        cy.visit('https://www.programsbuzz.com/user/login')
        cy.get('#edit-name').type('Ash')
        cy.screenshot('Ash')
        

        })
    })

  • When specified with a name for the screenshot pic, it will fix it for us.

Path Change:

describe('Automate PB',()=>{

    it('Next',()=>{

        cy.visit('https://www.programsbuzz.com/user/login')
        cy.get('#edit-name').type('Ashh')
        cy.screenshot('cypress/downloads')
        

        })
    })

  • Creates a directory in the screenshots folder and saves it as a downloads filename.

Clip:

describe('Automate PB',()=>{

    it('Next',()=>{

        cy.visit('https://www.programsbuzz.com/user/login')
        cy.get('#edit-name').type('Ashh')
        cy.screenshot({ clip: { x: 20, y: 20, width: 400, height: 300 } })
        

        })
    })

  • Crops and clips screenshots to the specified width and height.

Element Screenshot:

describe('Automate PB',()=>{

    it('Next',()=>{

        cy.visit('https://www.programsbuzz.com/user/login')
        cy.get('#edit-name').screenshot()
        

        })
    })

  • In this case, the screenshot pic of the element shows the username field as the element points to it.

Rules:

  • cy.screenshot() can be chained off of cy or off of command that yields DOM elements.
  • cy.screenshot() will only run assertions that are chained once and won't retry.
  • cy.screenshot() never timeouts.
Tags
Submitted by arilio666 on June 3, 2022

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.