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.