Clear Input Field Flake
📺 Watch the explanation for this recipe at Clear Input Element Flake.
<input id="answer" placeholder="Enter your answer" value="00" />
<script>
setTimeout(() => {
const input = document.getElementById('answer')
input.value = 777
}, 1000)
</script>
At first, we try to clear the input field and type our value as quickly as we can.
// 🚨 INCORRECT
// has race condition with the application
cy.get('#answer').clear().type(42).should('have.value', 42)
Instead we want to check if the application has finished setting its initial value.
// ✅ CORRECT
// wait for the app to finish setting the initial value
// which is different from the static attribute
cy.get('#answer')
.should('have.attr', 'value')
.then((staticValue) => {
cy.get('#answer')
.invoke('val')
.should('not.equal', staticValue)
})
// now we can clear the input field safely
cy.get('#answer').clear().type(42).should('have.value', 42)