Data cleanup approaches in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to clear cookies after each test in Cypress.

Cypress

afterEach(() => {
  cy.[1]();
});

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

AclearCookies

BclearCookie

CclearCookiesAndLocalStorage

DclearAllCookies

Attempts:

3 left

💡 Hint

Common Mistakes

Using a command that only clears cookies but not local storage.

Using a non-existent Cypress command.

The clearCookies command clears all cookies, ensuring a clean state after each test.

2fill in blank

medium

Complete the code to reset the database before each test using a custom Cypress task.

Cypress

beforeEach(() => {
  cy.task('[1]');
});

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

AcleanDatabase

BclearDb

CresetDb

DresetDatabase

Attempts:

3 left

💡 Hint

Common Mistakes

Using a task name that does not match the backend implementation.

Forgetting to define the task in the Cypress plugins file.

The custom task resetDb is commonly used to reset the database state before tests.

3fill in blank

hard

Fix the error in the code to delete a user via API after each test.

Cypress

afterEach(() => {
  cy.request('DELETE', '/api/users/[1]');
});

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

Auser_id

Buserid

Cid

DuserId

Attempts:

3 left

💡 Hint

Common Mistakes

Using snake_case or all lowercase instead of camelCase.

Using a generic 'id' which may not be recognized by the API.

The API expects the parameter userId to identify which user to delete.

4fill in blank

hard

Fill both blanks to clear local storage and session storage before each test.

Cypress

beforeEach(() => {
  cy.window().then(win => {
    win.[1]();
    win.[2]();
  });
});

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

AlocalStorage.clear

BsessionStorage.clear

CclearLocalStorage

DclearSessionStorage

Attempts:

3 left

💡 Hint

Common Mistakes

Using Cypress commands instead of window methods.

Forgetting to include parentheses to call the functions.

To clear storage in the browser window, call localStorage.clear() and sessionStorage.clear().

5fill in blank

hard

Fill all three blanks to create a custom command that resets test data by calling an API and clearing cookies.

Cypress

Cypress.Commands.add('resetTestData', () => {
  cy.request('[1]', '/api/reset');
  cy.[2]();
  cy.[3]();
});

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

APOST

BclearCookies

CclearLocalStorage

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST for the API call.

Mixing up the order of clearing storage.

Using non-existent Cypress commands.

The reset API is called with a POST request. Then cookies and local storage are cleared using clearCookies() and clearLocalStorage().

Practice

1. Why is data cleanup important in Cypress tests?

easy

A. It makes tests run slower

B. It increases the number of test failures

C. It keeps tests independent and reliable

D. It removes the need for assertions

Solution

1. Step 1: Understand test independence

   Tests should not depend on data left by previous tests to avoid false results.

2. Step 2: Recognize reliability benefits

   Cleaning data ensures each test starts fresh, making results trustworthy.

3. Final Answer:

   It keeps tests independent and reliable -> Option C

4. Quick Check:

   Data cleanup = test independence and reliability [OK]

Hint: Data cleanup ensures fresh start for each test [OK]

Common Mistakes:

• Thinking cleanup slows tests
• Believing cleanup causes more failures
• Assuming cleanup removes assertions

2. Which Cypress hook is best to use for cleaning test data after each test?

easy

A. afterEach

B. beforeEach

C. before

D. after

Solution

1. Step 1: Identify hooks for cleanup timing

   afterEach runs after every test, ideal for cleanup after each test.

2. Step 2: Compare other hooks

   before and beforeEach run before tests; after runs once after all tests.

3. Final Answer:

   afterEach -> Option A

4. Quick Check:

   Cleanup after each test = afterEach [OK]

Hint: Use afterEach to clean after every test [OK]

Common Mistakes:

• Using before for cleanup
• Confusing beforeEach with cleanup hook
• Using after which runs only once

3. What will happen if you use this code snippet in Cypress?

after(() => {
  cy.request('DELETE', '/api/test-data')
})

medium

A. Test data is never cleaned

B. Test data is cleaned once after all tests finish

C. Test data is cleaned after each test

D. Test data is cleaned before each test

Solution

1. Step 1: Understand after hook behavior

   after runs once after all tests in the suite complete.

2. Step 2: Analyze the API request timing

   The DELETE request runs only once after all tests, cleaning data once at the end.

3. Final Answer:

   Test data is cleaned once after all tests finish -> Option B

4. Quick Check:

   after = cleanup once after all tests [OK]

Hint: after runs once after all tests finish [OK]

Common Mistakes:

• Thinking after runs after each test
• Confusing after with afterEach
• Assuming cleanup runs before tests

4. You wrote this code to clean test data after each test:

afterEach(() => {
  cy.request('DELETE', '/api/test-data')
})

But test data is not cleaned properly. What is the likely problem?

medium

A. The API endpoint URL might be incorrect or unavailable

B. The afterEach hook is not supported in Cypress

C. You should use beforeEach instead of afterEach

D. The DELETE method is not allowed in HTTP

Solution

1. Step 1: Verify afterEach hook validity

   afterEach is valid and commonly used for cleanup in Cypress.

2. Step 2: Check API request issues

   If data is not cleaned, the DELETE request may fail due to wrong URL or server issues.

3. Final Answer:

   The API endpoint URL might be incorrect or unavailable -> Option A

4. Quick Check:

   Failed cleanup often means API endpoint problem [OK]

Hint: Check API URL if cleanup fails [OK]

Common Mistakes:

• Thinking afterEach is unsupported
• Using wrong HTTP method assumptions
• Switching hooks unnecessarily

5. You want to ensure test data is cleaned efficiently before and after each test in Cypress. Which approach is best?

hard

A. Manually delete data in each test without hooks

B. Use only before hook to clean data once before all tests

C. Use after hook to clean data once after all tests finish

D. Use beforeEach to create data and afterEach to delete data via API requests

Solution

1. Step 1: Understand test data lifecycle

   Creating data before each test and cleaning after each test keeps tests isolated and reliable.

2. Step 2: Use API requests in hooks

   API calls in beforeEach and afterEach efficiently manage test data per test.

3. Final Answer:

   Use beforeEach to create data and afterEach to delete data via API requests -> Option D

4. Quick Check:

   Setup and cleanup per test = beforeEach + afterEach [OK]

Hint: Use beforeEach and afterEach with API calls [OK]

Common Mistakes:

• Cleaning data only once before or after all tests
• Not using hooks for cleanup
• Manually deleting data inside tests