Full-page screenshots in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to take a full-page screenshot in Cypress.

Cypress

cy.visit('https://example.com')
cy.screenshot([1])

Drag options to blanks, or click blank then click option'

A{ capture: 'fullPage' }

B{ capture: 'viewport' }

C{ capture: 'runner' }

D{ capture: 'element' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'viewport' captures only the visible part, not the full page.

Forgetting to pass an options object causes default screenshot behavior.

Using { capture: 'fullPage' } tells Cypress to capture the entire page, not just the visible part.

2fill in blank

medium

Complete the code to wait for the page to load before taking a full-page screenshot.

Cypress

cy.visit('https://example.com')
cy.get('body').should([1])
cy.screenshot({ capture: 'fullPage' })

Drag options to blanks, or click blank then click option'

Abe.enabled

Bbe.visible

Cexist

Dcontain.text

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'be.visible' might fail if the body is hidden temporarily.

Not waiting for the page can cause incomplete screenshots.

Waiting for body to exist ensures the page has loaded before taking the screenshot.

3fill in blank

hard

Fix the error in the code to correctly take a full-page screenshot with a custom file name.

Cypress

cy.screenshot([1]: 'homepage', capture: 'fullPage' })

Drag options to blanks, or click blank then click option'

Afilename

Bname

CfileName

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fileName' or 'filename' causes the option to be ignored.

Using 'title' is not a valid option for screenshot naming.

The correct option key for naming the screenshot file is name.

4fill in blank

hard

Fill both blanks to take a full-page screenshot only after an element with id 'main' is visible.

Cypress

cy.get('#main').should([1])
cy.screenshot([2])

Drag options to blanks, or click blank then click option'

Abe.visible

B{ capture: 'fullPage' }

C{ capture: 'viewport' }

Dexist

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'exist' instead of 'be.visible' might not guarantee the element is shown.

Using 'viewport' captures only the visible area, not the full page.

We wait for the element to be visible, then take a full-page screenshot.

5fill in blank

hard

Fill all three blanks to take a full-page screenshot with a custom name and disable animations and timers.

Cypress

cy.screenshot([1]: 'custom-shot', [2]: 'fullPage', [3]: true)

Drag options to blanks, or click blank then click option'

Aname

Bcapture

ConFail

DdisableTimersAndAnimations

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onFail' instead of 'disableTimersAndAnimations' does not work.

Forgetting to set 'capture' to 'fullPage' results in partial screenshots.

The correct options are name for the file name, capture for full page, and disableTimersAndAnimations: true to disable animations and timers before taking the screenshot.