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.

Practice

1. What does cy.screenshot({ capture: 'fullPage' }) do in Cypress testing?

easy

A. Clears all previous screenshots

B. Takes a screenshot of the entire webpage, including parts not visible on screen

C. Records a video of the test run

D. Takes a screenshot only of the visible part of the webpage

Solution

1. Step 1: Understand the capture option in cy.screenshot()

   The capture option controls what part of the page is captured. Setting it to 'fullPage' means the entire page, not just the visible viewport.

2. Step 2: Compare with other options

   By default, cy.screenshot() captures only the visible part. 'fullPage' extends this to the whole page including scrollable areas.

3. Final Answer:

   Takes a screenshot of the entire webpage, including parts not visible on screen -> Option B

4. Quick Check:

   Full-page screenshot = entire webpage [OK]

Hint: Remember 'fullPage' means capture everything, not just visible [OK]

Common Mistakes:

• Thinking it captures only visible viewport
• Confusing screenshot with video recording
• Assuming it clears previous screenshots

2. Which of the following is the correct syntax to take a full-page screenshot in Cypress?

easy

A. cy.fullPageScreenshot()

B. cy.screenshot('fullPage')

C. cy.screenshot({ capture: 'fullPage' })

D. cy.screenshot.capture('fullPage')

Solution

1. Step 1: Recall the correct method signature

   The cy.screenshot() command accepts an options object where capture: 'fullPage' is the correct way to specify full-page capture.

2. Step 2: Eliminate incorrect syntax

   Passing 'fullPage' as a string argument directly, using non-existent commands like cy.fullPageScreenshot(), or trying to chain .capture('fullPage') are not valid Cypress syntax for full-page screenshots.

3. Final Answer:

   cy.screenshot({ capture: 'fullPage' }) -> Option C

4. Quick Check:

   Correct syntax uses options object with capture key [OK]

Hint: Use curly braces and capture key for full-page screenshots [OK]

Common Mistakes:

• Passing 'fullPage' as a string argument directly
• Using non-existent commands like cy.fullPageScreenshot()
• Trying to chain .capture() method

3. Consider this Cypress test code snippet:

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

What will happen if the page is still loading when the screenshot is taken?

medium

A. The screenshot will capture the fully loaded page anyway

B. The test will fail with an error

C. Cypress will wait automatically until the page loads before screenshot

D. The screenshot may capture an incomplete or partially loaded page

Solution

1. Step 1: Understand Cypress behavior on page load

   Cypress does not automatically wait for all page content to load unless explicitly told. If cy.screenshot() runs immediately after cy.visit(), the page might still be loading.

2. Step 2: Effect on screenshot

   If the page is not fully loaded, the screenshot will capture whatever is visible at that moment, possibly incomplete content.

3. Final Answer:

   The screenshot may capture an incomplete or partially loaded page -> Option D

4. Quick Check:

   Screenshot timing affects completeness [OK]

Hint: Always wait for page load before screenshot to avoid partial capture [OK]

Common Mistakes:

• Assuming Cypress waits automatically for full load
• Expecting error if page not loaded
• Thinking screenshot always captures full content

4. You wrote this Cypress test:

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

Why does the full-page screenshot not work as expected?

medium

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

B. You must call cy.fullPageScreenshot() instead

C. The cy.screenshot() command does not support options

D. You need to add wait() before screenshot

Solution

1. Step 1: Check the option value spelling and case

   The correct option value is 'fullPage' with capital P. 'fullpage' is invalid and ignored.

2. Step 2: Understand Cypress option sensitivity

   Cypress options are case-sensitive. Using wrong case causes fallback to default behavior (visible viewport only).

3. Final Answer:

   The option value 'fullpage' is case-sensitive and should be 'fullPage' -> Option A

4. Quick Check:

   Option values are case-sensitive in Cypress [OK]

Hint: Check option spelling and case carefully [OK]

Common Mistakes:

• Ignoring case sensitivity in option values
• Using non-existent commands
• Assuming wait fixes option errors

5. You want to capture a full-page screenshot only after a dynamic content section finishes loading. Which Cypress code snippet correctly waits for the content and then takes a full-page screenshot?

hard

A. cy.get('#dynamic-section').should('be.visible')
.then(() => cy.screenshot({ capture: 'fullPage' }))

B. cy.screenshot({ capture: 'fullPage' })
cy.get('#dynamic-section').should('be.visible')

C. cy.wait(5000)
cy.screenshot({ capture: 'fullPage' })

D. cy.get('#dynamic-section').click()
cy.screenshot({ capture: 'fullPage' })

Solution

1. Step 1: Wait for dynamic content visibility

   Using cy.get('#dynamic-section').should('be.visible') waits until the dynamic section is visible, ensuring content is loaded.

2. Step 2: Take full-page screenshot after wait

   Chaining .then(() => cy.screenshot({ capture: 'fullPage' })) ensures the screenshot runs only after the wait condition passes.

3. Final Answer:

   cy.get('#dynamic-section').should('be.visible') .then(() => cy.screenshot({ capture: 'fullPage' })) -> Option A

4. Quick Check:

   Wait for content visible, then screenshot [OK]

Hint: Wait for element visible before screenshot using should('be.visible') [OK]

Common Mistakes:

• Taking screenshot before waiting for content
• Using fixed wait times instead of element checks
• Clicking element unnecessarily before screenshot