← Back to library
Cypressformsintermediatev10+

Type into a contenteditable div

Use .type() with {selectall} to interact with rich-text editors and contenteditable elements.

1it('types into a rich-text editor', () => {
2  cy.visit('/editor');
3
4  // {selectall} selects all existing content before typing the replacement —
5  // .clear() does not work on contenteditable elements
6  cy.get('[contenteditable="true"]')
7    .click()
8    .type('{selectall}Hello, Cypress!');
9
10  // Assert via invoke('text') — .should('have.value') doesn't work on div
11  cy.get('[contenteditable="true"]')
12    .invoke('text')
13    .should('include', 'Hello, Cypress!');
14});
#contenteditable#rich text#editor#selectall#type