cy.clear() for input fields in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does cy.clear() do in Cypress?

cy.clear() removes all text from an input field or textarea, making it empty.

beginner

How do you use cy.clear() on an input field with id username?

You select the input using cy.get('#username') and then call .clear() like this: cy.get('#username').clear().

intermediate

Can cy.clear() be chained with other commands? Give an example.

Yes. For example, you can clear an input and then type new text: cy.get('input').clear().type('new text').

intermediate

What happens if you use cy.clear() on a disabled input field?

The command will fail because disabled inputs cannot be cleared or typed into.

beginner

Why is it important to clear input fields before typing in tests?

Clearing ensures no leftover text interferes with the test, making the input exactly what you want to test.

What does cy.clear() do in Cypress?

A Deletes the input element from the page

B Clears the text inside an input or textarea

C Refreshes the page

D Clicks on the input field

cy.clear() empties the text inside input or textarea fields.

Which command correctly clears an input with class email?

A cy.get('.email').clear()

B cy.clear('.email')

C cy.clearInput('.email')

D cy.get('.email').empty()

You must first get the element, then call .clear() on it.

What happens if you try to cy.clear() a disabled input?

A The command fails

B The input is cleared anyway

C The test skips the command

D The input becomes enabled

Disabled inputs cannot be cleared; Cypress will throw an error.

Why chain .clear() before .type() in tests?

A To select the input field

B To speed up the test

C To submit the form

D To ensure the input is empty before typing

Clearing first avoids leftover text affecting the test input.

Which is a valid Cypress command to clear and type 'hello' in an input with id 'search'?

A cy.type('#search').clear('hello')

B cy.clear('#search').type('hello')

C cy.get('#search').clear().type('hello')

D cy.get('#search').type('hello').clear()

You must get the element, clear it, then type the new text.

Explain how and why you use cy.clear() in a Cypress test for input fields.

Think about preparing the input before typing.

What issues might arise if you skip using cy.clear() before typing in an input field during testing?

Consider what happens if the input already has text.

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()