Data cleanup approaches in Cypress - Build an Automation Script

Clean up test data after user creation test

Preconditions (1)

Step 1: Log in as admin user with username 'admin' and password 'AdminPass!'

Step 2: Navigate to the user management page

Step 3: Search for the user with username 'testuser123'

Step 4: Select the user from the search results

Step 5: Click the delete button to remove the user

Step 6: Confirm the deletion in the confirmation dialog

✅ Expected Result: The user 'testuser123' is removed from the system and no longer appears in the user list

Automation Requirements - Cypress

Assertions Needed:

Verify the user 'testuser123' does not appear in the user list after deletion

Verify the confirmation dialog appears before deletion

Best Practices:

Use explicit waits for elements to appear before interacting

Use data attributes for selectors (e.g., data-cy) instead of classes or ids

Use custom commands for repeated actions like login

Clean up test data in afterEach or after hooks to keep tests independent

Automated Solution

Cypress

/// <reference types="cypress" />

// Custom command to login as admin
Cypress.Commands.add('loginAsAdmin', () => {
  cy.visit('/login');
  cy.get('[data-cy=email-input]').type('admin');
  cy.get('[data-cy=password-input]').type('AdminPass!');
  cy.get('[data-cy=login-button]').click();
  cy.url().should('include', '/dashboard');
});

describe('Data cleanup: Delete test user', () => {
  before(() => {
    cy.loginAsAdmin();
  });

  it('Deletes user testuser123 from user management', () => {
    cy.visit('/user-management');

    // Wait for search input and type username
    cy.get('[data-cy=user-search-input]').should('be.visible').type('testuser123');

    // Click search button
    cy.get('[data-cy=user-search-button]').click();

    // Wait for user row to appear
    cy.get('[data-cy=user-row-testuser123]').should('be.visible');

    // Click delete button for the user
    cy.get('[data-cy=delete-user-testuser123]').click();

    // Confirm deletion dialog appears
    cy.get('[data-cy=confirm-delete-dialog]').should('be.visible');

    // Click confirm delete button
    cy.get('[data-cy=confirm-delete-button]').click();

    // Verify user no longer appears in the list
    cy.get('[data-cy=user-row-testuser123]').should('not.exist');
  });
});

The code starts by adding a custom Cypress command loginAsAdmin to reuse the login steps easily. This helps keep the test clean and avoids repeating login code.

In the test suite, the before hook logs in as admin once before running the test. This ensures the test starts with the right user context.

The test visits the user management page, waits for the search input to be visible, and types the username testuser123. It clicks the search button and waits for the user row to appear.

Then it clicks the delete button for that user, waits for the confirmation dialog, and confirms the deletion. Finally, it asserts that the user row no longer exists, confirming the user was deleted.

Selectors use data-cy attributes for stability and clarity. Explicit waits with should('be.visible') ensure elements are ready before interacting, avoiding flaky tests.

This approach follows best practices by using custom commands, explicit waits, and stable selectors to automate data cleanup reliably.

Common Mistakes - 4 Pitfalls

Using CSS classes or IDs that may change as selectors

{'mistake': 'Not waiting for elements before interacting', 'why_bad': 'Trying to click or type before elements appear causes test failures.', 'correct_approach': "Use explicit waits like should('be.visible') to ensure elements are ready."}

Hardcoding login steps in every test

Not cleaning up test data after tests

Bonus Challenge

Now add data-driven testing to delete three different test users: 'testuser123', 'testuser456', and 'testuser789'.

Show Hint