Screenshot capture (cy.screenshot) in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to take a screenshot of the current page.

Cypress

cy.[1]()

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

Avisit

Bclick

Cscreenshot

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using commands like 'click' or 'type' instead of 'screenshot'.

Forgetting the parentheses after the command.

The cy.screenshot() command captures a screenshot of the current page.

2fill in blank

medium

Complete the code to take a screenshot with a custom file name 'home-page'.

Cypress

cy.screenshot({ name: '[1]' })

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

Alogin-page

Bhome-page

Cdashboard

Derror-page

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong or unrelated name.

Not passing the name as a string.

Setting the name option to 'home-page' names the screenshot file accordingly.

3fill in blank

hard

Fix the error in the code to correctly capture a screenshot of an element with selector '#submit-btn'.

Cypress

cy.get('#submit-btn').[1]()

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

Ascreenshot

Bclick

Ctype

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' or 'type' instead of 'screenshot'.

Trying to call screenshot without chaining it to an element.

The screenshot() command can be chained after cy.get() to capture a screenshot of a specific element.

4fill in blank

hard

Fill both blanks to take a screenshot with the name 'login-form' and capture only the element with selector '.form-container'.

Cypress

cy.get('[1]').screenshot({ name: '[2]' })

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

A.form-container

B.submit-button

Clogin-form

Dhome-page

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up selectors and names.

Using unrelated selectors or names.

We select the element '.form-container' and name the screenshot 'login-form'.

5fill in blank

hard

Fill all three blanks to take a full-page screenshot named 'full-home' with the option to capture beyond the viewport.

Cypress

cy.screenshot('[1]', { [2]: 'fullPage', [3]: 500 })

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

Afull-home

Bcapture

Ctimeout

Dhome-page

Attempts:

3 left

💡 Hint

Common Mistakes

Not setting 'capture' to 'fullPage'.

Using wrong option names or missing the timeout.

The first blank is the screenshot name 'full-home'. The second blank is the option 'capture' set to 'fullPage' to capture the entire page. The third blank is 'timeout' set to 500 milliseconds.

Practice

1. What is the primary purpose of using cy.screenshot() in Cypress tests?

easy

A. To capture a picture of the app's current state during a test

B. To pause the test execution

C. To clear the browser cache

D. To simulate user clicks

Solution

1. Step 1: Understand the function of cy.screenshot()

   This command takes a screenshot of the app at the moment it is called during the test.

2. Step 2: Compare with other options

   Options B, C, and D describe actions unrelated to capturing images.

3. Final Answer:

   To capture a picture of the app's current state during a test -> Option A

4. Quick Check:

   Screenshot = Capture app image [OK]

Hint: Screenshots = pictures of app state during tests [OK]

Common Mistakes:

• Confusing screenshot with pausing tests
• Thinking it clears cache
• Assuming it simulates clicks

2. Which of the following is the correct syntax to take a screenshot with a custom file name in Cypress?

easy

A. cy.screenshot = 'homepage'

B. cy.screenshot: 'homepage'

C. cy.screenshot('homepage')

D. cy.screenshot['homepage']

Solution

1. Step 1: Recall the correct method call syntax

   In Cypress, methods are called with parentheses and arguments inside, like cy.screenshot('filename').

2. Step 2: Check each option's syntax

   cy.screenshot('homepage') uses correct function call syntax. Options A, C, and D use invalid JavaScript syntax for method calls.

3. Final Answer:

   cy.screenshot('homepage') -> Option C

4. Quick Check:

   Method call uses parentheses [OK]

Hint: Use parentheses to pass file name in cy.screenshot() [OK]

Common Mistakes:

• Using assignment (=) instead of function call
• Using colon (:) instead of parentheses
• Using brackets [] incorrectly

3. Consider this Cypress code snippet:

cy.get('button.submit').click();
cy.screenshot('after-click');

What will happen when this test runs?

medium

A. The test fails because cy.screenshot needs no arguments.

B. The test clicks the submit button but does not take any screenshot.

C. The test takes a screenshot before clicking the button.

D. The test clicks the submit button and saves a screenshot named 'after-click'.

Solution

1. Step 1: Analyze the code sequence

   The code first clicks the button with class 'submit', then calls cy.screenshot('after-click') to take a screenshot with that name.

2. Step 2: Understand the effect of cy.screenshot()

   The screenshot is taken after the click, so the file will be named 'after-click'.

3. Final Answer:

   The test clicks the submit button and saves a screenshot named 'after-click'. -> Option D

4. Quick Check:

   Click then screenshot with name [OK]

Hint: Commands run in order; screenshot after click saves named image [OK]

Common Mistakes:

• Thinking screenshot happens before click
• Believing screenshot requires no arguments
• Assuming no screenshot is taken

4. You wrote this code:

cy.screenshot('login-page', { capture: 'viewport' });

But the screenshot file is not saved. What is the likely problem?

medium

A. The capture option value is incorrect; it should be 'runner'.

B. The capture option 'viewport' is valid; the problem is elsewhere.

C. The cy.screenshot command must be chained after cy.get().

D. The file name must not have a dash ('-').

Solution

1. Step 1: Check the capture option values

   Cypress supports 'viewport', 'runner', and 'fullPage' as valid values for capture. 'viewport' is valid.

2. Step 2: Review other options

   File names can include dashes. cy.screenshot does not require chaining after cy.get(). So these are not issues.

3. Final Answer:

   The capture option 'viewport' is valid; the problem is elsewhere. -> Option B

4. Quick Check:

   Valid options mean issue is not in syntax [OK]

Hint: Check option values; 'viewport' is valid for capture [OK]

Common Mistakes:

• Assuming 'viewport' is invalid
• Thinking file names cannot have dashes
• Believing chaining is mandatory

5. You want to take a screenshot only of a specific element with class .profile-pic and save it as 'profile.png'. Which code snippet correctly does this?

hard

A. cy.get('.profile-pic').screenshot('profile');

B. cy.screenshot('.profile-pic', { capture: 'element', fileName: 'profile.png' });

C. cy.get('.profile-pic').screenshot('profile.png.png');

D. cy.screenshot('profile.png', { element: '.profile-pic' });

Solution

1. Step 1: Understand element screenshot syntax

   To screenshot a specific element, first select it with cy.get(), then call .screenshot() on that element. The argument is the file name without extension.

2. Step 2: Evaluate each option

   cy.get('.profile-pic').screenshot('profile.png.png'); uses file name with extension, which is incorrect; Cypress adds extension automatically. cy.screenshot('.profile-pic', { capture: 'element', fileName: 'profile.png' }); uses invalid syntax; cy.screenshot does not accept selector as first argument. cy.get('.profile-pic').screenshot('profile'); correctly selects element and calls .screenshot('profile'). cy.screenshot('profile.png', { element: '.profile-pic' }); uses invalid options.

3. Final Answer:

   cy.get('.profile-pic').screenshot('profile'); -> Option A

4. Quick Check:

   Element screenshot = get element then .screenshot(name) [OK]

Hint: Select element first, then call .screenshot with name (no extension) [OK]

Common Mistakes:

• Passing file extension in screenshot name
• Calling cy.screenshot with selector argument
• Using invalid options for element capture