Screenshot capture (cy.screenshot) in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this Cypress screenshot command?

Consider the following Cypress test code snippet:

cy.visit('https://example.com')
cy.get('button#submit').click()
cy.screenshot('after-submit')

What will Cypress do when it runs cy.screenshot('after-submit')?

Cypress

cy.visit('https://example.com')
cy.get('button#submit').click()
cy.screenshot('after-submit')

A Throw an error because the screenshot name must not contain dashes.

B Take a screenshot only of the button with id 'submit' and save it as 'after-submit.png'.

C Take a screenshot and save it as 'after-submit.jpg' in the default screenshots folder.

D Take a screenshot of the viewport and save it as 'after-submit.png' in the default screenshots folder.

💡 Hint

Think about what cy.screenshot() captures by default and the file format it uses.

The cy.screenshot() command takes a screenshot of the viewport by default. The name given ('after-submit') is used as the filename with a .png extension. It does not limit the screenshot to a specific element unless chained with .get() or .within().

❓ assertion

intermediate

Which assertion correctly verifies a screenshot was taken?

You want to check that a screenshot file named 'homepage.png' exists after running cy.screenshot('homepage'). Which assertion code is correct in Cypress?

Cypress

cy.screenshot('homepage')
// Which assertion below correctly verifies the screenshot file exists?

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

B cy.readFile('cypress/screenshots/homepage.png').should('be.visible')

C cy.get('cypress/screenshots/homepage.png').should('exist')

D cy.screenshot('homepage').should('exist')

💡 Hint

Remember that screenshots are saved as files, not DOM elements.

The screenshot is saved as a file on disk. To verify its existence, cy.readFile() is used to read the file, and should('exist') confirms the file is present. cy.get() is for DOM elements, so option A is invalid. Option A uses be.visible which applies to DOM elements, not files. Option A tries to assert on the command itself, which is incorrect.

🔧 Debug

advanced

Why does this screenshot command fail with an error?

Look at this Cypress code:

cy.get('div.content').screenshot()

It throws an error: Cannot read property 'screenshot' of undefined. What is the most likely cause?

Cypress

cy.get('div.content').screenshot()

A The <code>screenshot()</code> command is not valid on elements, only on <code>cy</code> itself.

B The <code>cy.get()</code> command returned no elements, so <code>screenshot()</code> is called on undefined.

C The selector <code>'div.content'</code> is invalid syntax causing the error.

D The screenshot command requires a filename argument and fails without it.

💡 Hint

Think about what happens if cy.get() finds no matching elements.

If cy.get() finds no matching elements, it retries but eventually yields an empty set. Calling screenshot() on an empty or undefined element causes the error. The screenshot() command is valid on elements and cy. The selector syntax is correct. The filename argument is optional.

🧠 Conceptual

advanced

What is the effect of using capture: 'viewport' in cy.screenshot()?

In Cypress, what does setting capture: 'viewport' in the options of cy.screenshot() do?

Cypress

cy.screenshot('view', { capture: 'viewport' })

A It captures only the element that triggered the screenshot command.

B It captures the entire page including parts outside the visible area.

C It captures only the visible part of the page currently shown in the browser window.

D It disables the screenshot and logs a message instead.

💡 Hint

Think about the difference between viewport and full page screenshots.

The capture: 'viewport' option tells Cypress to take a screenshot of only the visible area of the page (the viewport). The default is also 'viewport'; capture: 'fullPage' captures the entire page. It does not limit to a single element or disable the screenshot.

❓ framework

expert

How to configure Cypress to automatically take screenshots on test failure?

You want Cypress to automatically take a screenshot whenever a test fails, without adding cy.screenshot() commands manually. Which configuration setting enables this behavior?

A Set <code>"screenshotOnRunFailure": true</code> in <code>cypress.config.js</code> under <code>e2e</code> settings.

B Add <code>cy.screenshotOnFail()</code> in every test's <code>afterEach</code> hook.

C Set <code>"autoScreenshot": true</code> in <code>cypress.json</code> file.

D Use <code>cy.screenshot({ onFail: true })</code> inside each test.

💡 Hint

Check Cypress official config options for screenshots on failure.

The correct way is to set screenshotOnRunFailure: true in the cypress.config.js file under the e2e configuration. This tells Cypress to automatically capture screenshots on test failures. The other options are invalid commands or config keys.