cy.clear() for input fields in Cypress - Build an Automation Script

Clear text from an input field using cy.clear()

Preconditions (2)

Step 1: Navigate to the web page containing the input field

Step 2: Type 'testuser' into the input field with id 'username'

Step 3: Use cy.clear() to clear the input field

Step 4: Verify that the input field is empty after clearing

✅ Expected Result: The input field with id 'username' is empty after calling cy.clear()

Automation Requirements - Cypress

Assertions Needed:

Verify the input field contains 'testuser' after typing

Verify the input field is empty after cy.clear()

Best Practices:

Use cy.get() with id selector for locating the input field

Chain commands properly to ensure correct execution order

Use should('have.value', '') assertion to verify clearing

Avoid hardcoded waits; rely on Cypress automatic waits

Automated Solution

Cypress

describe('Input field clear test', () => {
  it('should clear the input field using cy.clear()', () => {
    cy.visit('https://example.com');
    cy.get('#username')
      .type('testuser')
      .should('have.value', 'testuser')
      .clear()
      .should('have.value', '');
  });
});

This test visits the target page, selects the input field by its id username, types the text testuser, and asserts the input contains that text. Then it calls cy.clear() to clear the input field and asserts that the input is empty by checking its value is an empty string. Using chaining ensures commands run in order and Cypress waits automatically for each step to complete.

Common Mistakes - 3 Pitfalls

Using cy.clear() without first selecting the input field

{'mistake': 'Not asserting the input value after clearing', 'why_bad': 'Without an assertion, you cannot confirm if the input was actually cleared, reducing test reliability.', 'correct_approach': "Use should('have.value', '') after cy.clear() to verify the input is empty."}

Using hardcoded waits like cy.wait() instead of relying on Cypress automatic waits

Bonus Challenge

Now add data-driven testing with 3 different input values to verify clearing works for each

Show Hint

Practice

1. What does the cy.clear() command do in Cypress when used on an input field?

easy

A. It empties the text inside the input field.

B. It submits the form containing the input field.

C. It disables the input field.

D. It highlights the input field.

Solution

1. Step 1: Understand the purpose of cy.clear()

   The cy.clear() command is designed to remove any existing text from an input field.

2. Step 2: Compare with other options

   It does not submit forms, disable, or highlight fields; it only empties the text.

3. Final Answer:

   It empties the text inside the input field. -> Option A

4. Quick Check:

   cy.clear() empties input text [OK]

Hint: Remember: cy.clear() empties input text before typing [OK]

Common Mistakes:

• Thinking cy.clear() submits the form
• Assuming cy.clear() disables the input
• Confusing cy.clear() with highlighting

2. Which of the following is the correct syntax to clear an input field with id username using Cypress?

easy

A. cy.get('username').clear();

B. cy.clear('#username');

C. cy.clearInput('#username');

D. cy.get('#username').clear();

Solution

1. Step 1: Identify correct Cypress chaining syntax

   To clear an input, first select it with cy.get(), then call .clear() on the element.

2. Step 2: Check selector correctness

   The id selector requires a '#' prefix, so cy.get('#username').clear(); is correct.

3. Final Answer:

   cy.get('#username').clear(); -> Option D

4. Quick Check:

   Use cy.get('#id').clear() syntax [OK]

Hint: Always use cy.get() before .clear() with correct selector [OK]

Common Mistakes:

• Using cy.clear() directly with selector
• Missing '#' for id selector
• Using non-existent commands like clearInput()

3. Given the following Cypress code, what will be the value of the input field after execution?

cy.get('#email').type('[e-mail]');
cy.get('#email').clear();
cy.get('#email').type('[e-mail]');

medium

A. '[e-mail]'

B. '[e-mail]@domain.com'

C. '' (empty string)

D. The test will fail with an error

Solution

1. Step 1: Analyze the commands in order

   First, the input gets '[e-mail]' typed in. Then clear() empties the input. Finally, '[e-mail]' is typed.

2. Step 2: Determine final input value

   Because clear() removes previous text, the final input contains only '[e-mail]'.

3. Final Answer:

   '[e-mail]' -> Option A

4. Quick Check:

   clear() empties before typing new text [OK]

Hint: clear() removes old text before new typing [OK]

Common Mistakes:

• Assuming text appends instead of replacing
• Thinking clear() does not work
• Expecting an error from clear()

4. You wrote this Cypress test:

cy.get('#search').clear;

Why does this test fail to clear the input field?

medium

A. Because clear() cannot be used on input fields.

B. Because the selector #search is incorrect.

C. Because clear is missing parentheses to call the function.

D. Because Cypress requires cy.clear() instead.

Solution

1. Step 1: Check the method call syntax

   The code uses clear without parentheses, so the function is not executed.

2. Step 2: Understand Cypress command chaining

   To clear the input, you must call clear() with parentheses to invoke the method.

3. Final Answer:

   Because clear is missing parentheses to call the function. -> Option C

4. Quick Check:

   Always use parentheses to call .clear() [OK]

Hint: Use parentheses: .clear() not .clear [OK]

Common Mistakes:

• Forgetting parentheses on .clear()
• Assuming selector is wrong without checking
• Thinking clear() is invalid on inputs

5. You want to test a form where the input field with class .user-input might already contain text. Which Cypress code snippet correctly clears the input and types 'new text' ensuring no leftover text remains?

hard

A. cy.get('.user-input').type('new text');

B. cy.get('.user-input').clear().type('new text');

C. cy.get('.user-input').invoke('attr', 'value', '').type('new text');

D. cy.get('.user-input').clearText().type('new text');

Solution

1. Step 1: Identify the correct method to clear input

   cy.clear() is the Cypress command designed to empty input fields before typing.

2. Step 2: Verify chaining with type()

   Using .clear().type('new text') ensures the field is emptied before new text is entered.

3. Step 3: Check other options

   Typing without clearing may append to existing text; clearText() does not exist; invoke('attr', 'value', '') sets the HTML attribute but does not clear the current input value.

4. Final Answer:

   cy.get('.user-input').clear().type('new text'); -> Option B

5. Quick Check:

   Use .clear() before .type() to avoid leftover text [OK]

Hint: Always clear input before typing new text [OK]

Common Mistakes:

• Typing without clearing first
• Using invalid commands like clearText()
• Using invoke('attr', 'value', '') instead of clear()