Full-page screenshots in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this Cypress command?

Consider the following Cypress test code snippet that takes a full-page screenshot. What will be the outcome after running this test?

Cypress

cy.visit('https://example.com')
cy.screenshot({ capture: 'fullPage' })

A A full-page screenshot of https://example.com is saved in the default screenshots folder.

B The screenshot is saved but only includes the header section of the page.

C The test throws an error because 'capture' is not a valid option for cy.screenshot.

D Only the visible viewport area of https://example.com is captured and saved.

💡 Hint

The 'capture' option controls what part of the page is captured in the screenshot.

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

❓ assertion

intermediate

Which assertion correctly verifies a full-page screenshot was taken?

You want to confirm that a full-page screenshot was saved with the correct file name pattern after running cy.screenshot({ capture: 'fullPage' }). Which assertion is correct?

Cypress

cy.screenshot('homepage', { capture: 'fullPage' })
// Which assertion below correctly checks the screenshot file?

A cy.get('screenshot').should('have.attr', 'data-capture', 'fullPage')

B cy.task('findScreenshot', 'homepage').should('include', 'fullPage')

C cy.screenshot('homepage').should('have.property', 'capture', 'fullPage')

D cy.readFile('cypress/screenshots/homepage.png').should('exist')

💡 Hint

Screenshots are saved as files in the screenshots folder.

The screenshot is saved as a file. Using cy.readFile to check the file exists is a valid way to assert the screenshot was taken.

🔧 Debug

advanced

Why does this full-page screenshot command fail?

This Cypress test tries to take a full-page screenshot but fails with an error. What is the most likely cause?

Cypress

cy.visit('https://example.com')
cy.screenshot({ capture: 'fullpage' })

A cy.screenshot does not support the 'capture' option at all.

B The option value 'fullpage' is case-sensitive and should be 'fullPage'.

C The URL https://example.com does not allow screenshots.

D The test must scroll the page manually before taking a full-page screenshot.

💡 Hint

Check the exact spelling and casing of option values.

The 'capture' option value is case-sensitive. It must be 'fullPage' with capital P, not 'fullpage'.

❓ framework

advanced

How to configure Cypress to always take full-page screenshots on test failure?

You want Cypress to automatically take full-page screenshots whenever a test fails. Which configuration snippet achieves this?

A In cypress.config.js, set: { screenshotsFolder: 'cypress/screenshots', screenshotOnRunFailure: true, screenshotOptions: { capture: 'fullPage' } }

B In cypress.config.js, set: { screenshotOnRunFailure: true, screenshot: { capture: 'fullPage' } }

C In cypress.config.js, set: { screenshotOnRunFailure: true, screenshotOnFailureOptions: { capture: 'fullPage' } }

D In cypress.config.js, set: { screenshotOnRunFailure: true, screenshotOnRunFailureOptions: { capture: 'fullPage' } }

💡 Hint

Look for the official Cypress config option names for screenshots.

The correct config uses screenshotOnRunFailure: true and screenshotOptions with capture: 'fullPage'.

🧠 Conceptual

expert

What is a limitation of full-page screenshots in Cypress?

Which of the following is a known limitation when using Cypress to capture full-page screenshots?

A Full-page screenshots automatically scroll the page but do not stitch images together.

B Full-page screenshots always include browser UI elements like address bar and tabs.

C Full-page screenshots may not capture content inside iframes correctly.

D Full-page screenshots cannot be taken on pages with any scrollable content.

💡 Hint

Think about what content is outside the main page DOM.

Cypress cannot capture content inside iframes in full-page screenshots because iframes are separate documents.