Screenshot capture (cy.screenshot) in Cypress - Build an Automation Script

Capture screenshot after successful login

Preconditions (2)

Step 1: Open the login page at 'https://example.com/login'

Step 2: Enter '[e-mail]' in the email input field with id 'email'

Step 3: Enter 'Password123!' in the password input field with id 'password'

Step 4: Click the login button with id 'loginBtn'

Step 5: Wait for the dashboard page to load

Step 6: Capture a screenshot of the dashboard page

✅ Expected Result: Screenshot file is saved with the dashboard page visible after login

Automation Requirements - Cypress

Assertions Needed:

Verify URL contains '/dashboard' after login

Verify screenshot file is created

Best Practices:

Use cy.get() with id selectors for locating elements

Use cy.url().should() for URL assertion

Use cy.screenshot() after page load

Avoid hardcoded waits; use implicit waits with cy commands

Automated Solution

Cypress

describe('Login and capture screenshot', () => {
  it('should login and take a screenshot of the dashboard', () => {
    cy.visit('https://example.com/login');
    cy.get('#email').type('[e-mail]');
    cy.get('#password').type('Password123!');
    cy.get('#loginBtn').click();
    cy.url().should('include', '/dashboard');
    cy.screenshot('dashboard-page');
  });
});

This test script uses Cypress to automate the login process and capture a screenshot.

First, cy.visit() opens the login page.

Then, cy.get() locates the email and password fields by their IDs and types the credentials.

The login button is clicked using cy.get() and .click().

We verify the URL contains '/dashboard' to confirm successful login using cy.url().should().

Finally, cy.screenshot() captures the current page screenshot named 'dashboard-page'.

All commands use Cypress's built-in waiting, so no explicit waits are needed.

Common Mistakes - 3 Pitfalls

Using hardcoded waits like cy.wait(5000) before taking screenshot

Using non-unique or complex selectors instead of simple IDs

Not verifying page state before taking screenshot

Bonus Challenge

Now add data-driven testing to login with 3 different sets of valid credentials and capture screenshots for each dashboard.

Show Hint