Cypress Type into Non Input Elements

In your application, there is not always the case that you have to type your text into an input box or text area. You can type in

• a[href] 
• area[href] 
• select 
• button
• iframe [tabindex] 
• Paragraph or Div etc.

For the Type command to work, these elements or their parent should contain content editable property.

Demo Link: Autopract Selenium Text Area

Example: Div with Content Editable

<div contenteditable="true" id="inputdiv" tabindex="1">This div can receive focus and Input!
</div>

cy.get('#inputdiv').clear().type('Hello1')

You will find several elements like this div with property content editable where you can receive focus and type in the text.

Example: Button Content Editable

cy.get('#mybutton').clear().type('test')

This will update button value to test.

Example: Parent Content Editable

When the content editable attribute is not set on an element, the element will inherit it from its parent if its parent content editable property is set to true.

<div contenteditable="true">
    <div id="mydiv1">Send value to this div</div>
</div> 

<div contenteditable="true">
    <div id="mydiv2" contentEditable="false">Can not send value to this div</div>
</div>

cy.get('#mydiv1').clear().type('Hello2')
cy.get('#mydiv2').clear().type('Hello3')

Here you will get an error for #mydiv2 since its content editable property is set to false. For #mydiv1 it will work because it will inherit the property from the parent, and we are not updating it to false in the child element.