Preserving state between tests in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to preserve cookies between tests in Cypress.

Cypress

beforeEach(() => {
  Cypress.Cookies.[1]('session_id')
});

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

ApreserveCookies

BclearCookies

CpreserveOnce

DgetCookie

Attempts:

3 left

💡 Hint

Common Mistakes

Using clearCookies instead of preserving cookies.

Trying to use getCookie which only reads cookies.

The Cypress.Cookies.preserveOnce() command preserves specified cookies between tests.

2fill in blank

medium

Complete the code to save local storage before each test.

Cypress

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

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

AsaveLocalStorage

BrestoreLocalStorage

CclearLocalStorage

DgetLocalStorage

Attempts:

3 left

💡 Hint

Common Mistakes

Using restoreLocalStorage before saving it.

Trying to clear local storage instead of saving.

The saveLocalStorage command saves the local storage state to be restored later.

3fill in blank

hard

Fix the error in the code to restore local storage after each test.

Cypress

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

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

ArestoreLocalStorage

BsaveLocalStorage

CclearLocalStorage

DgetLocalStorage

Attempts:

3 left

💡 Hint

Common Mistakes

Using saveLocalStorage after the test instead of restoring.

Trying to clear local storage instead of restoring.

The restoreLocalStorage command restores the saved local storage state after a test.

4fill in blank

hard

Fill both blanks to preserve cookies and local storage between tests.

Cypress

beforeEach(() => {
  Cypress.Cookies.[1]('session_id')
  cy.[2]('localStorage')
});

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

ApreserveOnce

BsaveLocalStorage

CclearCookies

DrestoreLocalStorage

Attempts:

3 left

💡 Hint

Common Mistakes

Using clearCookies which removes cookies instead of preserving.

Using restoreLocalStorage before saving local storage.

Use preserveOnce to keep cookies and saveLocalStorage to save local storage before tests.

5fill in blank

hard

Fill all three blanks to preserve cookies, save local storage before tests, and restore local storage after tests.

Cypress

beforeEach(() => {
  Cypress.Cookies.[1]('auth_token')
  cy.[2]('localStorage')
});
afterEach(() => {
  cy.[3]('localStorage')
});

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

ApreserveOnce

BsaveLocalStorage

CrestoreLocalStorage

DclearCookies

Attempts:

3 left

💡 Hint

Common Mistakes

Using clearCookies which deletes cookies instead of preserving.

Mixing up save and restore commands for local storage.

Preserve cookies with preserveOnce, save local storage with saveLocalStorage, and restore it with restoreLocalStorage.

Practice

1. What is the main reason to preserve state between tests in Cypress?

easy

A. To clear all cookies after each test

B. To make tests dependent on each other

C. To avoid repeating login steps and speed up test execution

D. To disable assertions in tests

Solution

1. Step 1: Understand test state preservation

   Preserving state means keeping some data like cookies so tests don't repeat setup steps.

2. Step 2: Identify the benefit

   Keeping state avoids repeating login or setup, making tests faster and more efficient.

3. Final Answer:

   To avoid repeating login steps and speed up test execution -> Option C

4. Quick Check:

   Preserving state = faster tests [OK]

Hint: Preserve state to skip repeated steps and save time [OK]

Common Mistakes:

• Thinking tests should be dependent on each other
• Believing preserving state clears cookies
• Assuming preserving state disables assertions

2. Which of the following is the correct syntax to preserve a cookie named 'session_id' only once in Cypress?

easy

A. Cypress.Cookies.preserveOnce('session_id')

B. cy.preserveCookie('session_id')

C. Cypress.preserveCookieOnce('session_id')

D. cy.Cookies.preserve('session_id')

Solution

1. Step 1: Recall Cypress cookie preservation method

   The correct method to preserve cookies once is Cypress.Cookies.preserveOnce.

2. Step 2: Match method and argument

   The method takes the cookie name as a string argument, e.g., 'session_id'.

3. Final Answer:

   Cypress.Cookies.preserveOnce('session_id') -> Option A

4. Quick Check:

   Preserve once = Cypress.Cookies.preserveOnce [OK]

Hint: Use Cypress.Cookies.preserveOnce('cookieName') to keep cookies once [OK]

Common Mistakes:

• Using cy.preserveCookie which does not exist
• Mixing method names like preserveCookieOnce
• Calling preserve on cy.Cookies which is invalid

3. Given the following Cypress test code, what will be the output of the second test?

describe('Test Suite', () => {
  beforeEach(() => {
    Cypress.Cookies.preserveOnce('token')
  })

  it('Test 1: Set cookie', () => {
    cy.setCookie('token', 'abc123')
  })

  it('Test 2: Check cookie', () => {
    cy.getCookie('token').should('have.property', 'value', 'abc123')
  })
})

medium

A. Test 2 passes because the 'token' cookie is preserved

B. Test 2 fails because cookies are cleared between tests

C. Test 2 throws a syntax error

D. Test 2 passes but the cookie value is empty

Solution

1. Step 1: Analyze cookie preservation in beforeEach

   The beforeEach hook preserves the 'token' cookie between tests using Cypress.Cookies.preserveOnce('token').

2. Step 2: Understand cookie setting and checking

   Test 1 sets the cookie 'token' to 'abc123'. Test 2 checks the cookie value. Since the cookie is preserved, the check passes.

3. Final Answer:

   Test 2 fails because cookies are cleared between tests -> Option B

4. Quick Check:

   PreserveOnce keeps cookie for next test [OK]

Hint: Preserve cookie in beforeEach to keep it for next test [OK]

Common Mistakes:

• Assuming cookies clear automatically between tests
• Thinking preserveOnce clears cookies
• Confusing syntax causing errors

4. You wrote this code to preserve cookies but the second test fails because the cookie is missing:

beforeEach(() => {
  Cypress.Cookies.preserveOnce('auth_token')
})

it('Login test', () => {
  cy.setCookie('auth_token', 'xyz789')
})

it('Dashboard test', () => {
  cy.getCookie('auth_token').should('exist')
})

What is the likely cause of the failure?

medium

A. The cookie is set after the beforeEach hook runs, so it is not preserved

B. The cookie name is misspelled in preserveOnce

C. Cypress cannot preserve cookies between tests

D. The assertion syntax is incorrect

Solution

1. Step 1: Understand when preserveOnce runs

   The beforeEach hook runs before each test, so it preserves cookies existing before the test starts.

2. Step 2: Analyze cookie setting timing

   The cookie is set inside the first test, after beforeEach runs, so it is not preserved for the next test.

3. Final Answer:

   The cookie is set after the beforeEach hook runs, so it is not preserved -> Option A

4. Quick Check:

   PreserveOnce must run after cookie set [OK]

Hint: Set cookies before preserveOnce runs to keep them [OK]

Common Mistakes:

• Thinking preserveOnce preserves cookies set during the test
• Assuming Cypress can't preserve cookies
• Blaming assertion syntax instead of timing

5. You want to preserve multiple cookies named 'token' and 'user_id' across all tests without calling preserveOnce in every test. Which is the best way to do this in Cypress?

hard

A. Disable cookie clearing globally with Cypress.config

B. Call Cypress.Cookies.preserveOnce('token', 'user_id') in each test

C. Set cookies again in every test manually

D. Use Cypress.Cookies.defaults({ whitelist: ['token', 'user_id'] }) in support file

Solution

1. Step 1: Understand preserving multiple cookies globally

   Using Cypress.Cookies.defaults with a preserve array keeps specified cookies across all tests automatically.

2. Step 2: Compare with other options

   Calling preserveOnce in every test is repetitive. Manually setting cookies each time is inefficient. Disabling cookie clearing globally is not recommended.

3. Final Answer:

   Use Cypress.Cookies.defaults({ whitelist: ['token', 'user_id'] }) in support file -> Option D

4. Quick Check:

   Defaults preserve multiple cookies globally [OK]

Hint: Use Cypress.Cookies.defaults to preserve cookies globally [OK]

Common Mistakes:

• Calling preserveOnce repeatedly instead of defaults
• Manually resetting cookies each test
• Trying to disable cookie clearing globally