CODEWITHSUNDEEP
vue.jscypress
Harish Krishnan
Harish Krishnan

Reputation: 1823

cy.clear() not clearing input field properly - Cypress

When I perform

cy.get('#fsp-name').clear().type('random text');

If the text already has value lets say 'assd asd adsdsd' and I perform above command I get something similar to 'random textassd'

I also tried using

cy.get('#fsp-name').clear().should('have.value', '').type('random text');

It works some time and in other times it complains it does not equal to ' '.

And I am trying to do this in a each loop like below

const data = [
{selector:'#name', newValue: 'John'},
{selector:'#phone', newValue: '1234567'}
];
cy.wrap(data).each(field => {
cy.get(field.selector).clear().should('have.value', '').type(field.newValue);
cy.contains('Save').click();
cy.visit('/abc/sdd');
cy.get(field.selector).invoke('val').should('equal', field.newValue);
});

enter image description here

Upvotes: 18

Views: 45259

Answers (11)

boylec1986
boylec1986

Reputation: 589

In my case, I had a number input with min set.

This field cannot be cleared. Therefore I used:

cy.get("#my-field").click().type("{selectall}3")

In order to replace the existing value with the number 3.

Upvotes: 0

Sverissimo
Sverissimo

Reputation: 356

Official docs states that:

It is unsafe to chain further commands that rely on the subject after .clear().

That's probably why the code in the original question didn't work, it was chaining clear and type commands:

cy.get('#fsp-name').clear().type('random text');

So, a simple alternative would be something like:

cy.get('#fsp-name').clear()
cy.get('#fsp-name').type('some text')

More about the clear command:

https://docs.cypress.io/api/commands/clear

Upvotes: 1

Mohammad Shafaque Khan
Mohammad Shafaque Khan

Reputation: 21

Try this, it worked for me:

cy.get('#fsp-name').clear({ force: true }).then(() => {
  cy.wait(3000)
  cy.get('#fsp-name').invoke('val', '').type(`${valueToBeTyped}{enter}`)
})

Upvotes: 1

CS7
CS7

Reputation: 73

I, too, faced a similar issue while using with react-ace editor. I wind up with

function typeContentOnSelectingExistingContent(elementId, content) {
  return cy.get(`#${elementId}`).type(`{selectAll}{selectAll}${content}`)
}

Upvotes: 0

Antonio Abajo
Antonio Abajo

Reputation: 11

I've had the same problem using Mui React with Cypress and when I called clear an ";" was added.

I've applied the same @Steven Vachon solution calling clear() function of cypress first.

Here my solution:

const clearInputElement = (input) => {
  const input2Search = input;
  cy.get(input2Search).clear();
  cy.get(input2Search).then(($elm) => {
    const event = new Event(input2Search, { bubbles: true, cancelable: true });
    const input = $elm.get(0); // `as HTMLInputElement` for TypeScript
    input.value = "";
    input.dispatchEvent(event);
  });
};

Upvotes: 1

smiths54
smiths54

Reputation: 141

.clear() is an alias of .type('{selectall}{backspace}') however depending upon the input field set up this would not work in all cases.

I solved this by using .type('{selectall}{backspace}{selectall}{backspace}') instead of the .clear()

Upvotes: 10

Nik
Nik

Reputation: 508

Tried the solutions provided above, but all did not help. I've ended up using this:

cy.get('#my-input-element').focus().clear();

If that doesn't work, the not so happy workaround is:

cy.get('#my-input-element').invoke('val', '');

When .type somehow did not finish the given string (rare cases):

cy.get('#my-input-element').invoke('val', 'Some text here');

Upvotes: 23

Steven Vachon
Steven Vachon

Reputation: 3980

I ended up having to do clear manually via the DOM:

cy.get('input').then($elm => {
  const event = new Event('input', { bubbles: true, cancelable: true });
  const input = $elm.get(0); // `as HTMLInputElement` for TypeScript
  input.value = '';
  input.dispatchEvent(event);
});

Upvotes: 0

René Winkler
René Winkler

Reputation: 7088

I'm using Cypress version 3.8.3 and I noticed that I have to invoke clear() sometimes two times in a row:

cy.get('#fsp-name').clear();
cy.get('#fsp-name').clear();

Upvotes: 3

Harish Krishnan
Harish Krishnan

Reputation: 1823

Seems like the cypress test runner is getting ahead of app initialization and some helpful article links below

https://www.cypress.io/blog/2018/02/05/when-can-the-test-start/ https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/

As of now adding wait before clearing makes the test pass. Let me know if anyone has better solutions

Upvotes: 3

N..
N..

Reputation: 956

I had a similar problem and It was related to focused and click related. I can suggest trying the following two option. I DON'T know it is right or wrong.

cy.get('#fsp-name').click().clear().type('random text');

OR

cy.get('#fsp-name').click().focused().clear().type('random text');

I was talking to the developer and according to him we are using MaterialUI and have some default component using focused and click event differently. After having both options resolved my problem

Upvotes: 10

Related Questions