Skip to main content

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!

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


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 contenteditable="true">
    <div id="mydiv2" contentEditable="false">Can not send value to this div</div>

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.

Cypress Type in Div, Paragraph, Label and other non-input elements

Submitted by tgoswami on April 1, 2022

Tarun has 11+ years of experience in Quality Assurance in different domains like Banking, E-commerce, Health and Education.


At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.