'Cypress testing: How to type text into a Froala editor?

I've been struggling with this issue - recently introduced Froala editors to a page on our site, and I'm updating the Cypress tests so that they'll pass. The problem I'm having is how to 'type' or even set invisibly the text in these editors.

For example, in the browser dev tools console I can run this:

$('#successfullySubmittedTextArea')[0]['data-froala.editor'].html.insert('new text!');

How do I translate this over to my Cypress test? I've tried:

Cypress.$('#successfullySubmittedTextArea')[0]['data-froala.editor'].html.insert('new text!');

which doesn't error, but doesn't work. Please help, sure I'm missing something fundamental and obvious!

cypress froala

Solution 1:^[1]

To translate this to Cypress commands

$('#successfullySubmittedTextArea')[0]['data-froala.editor'].html.insert('new text!')

you want

cy.get('#successfullySubmittedTextArea')
  .eq(0)
  .its('data-froala.editor')
  .type('new text!')

because ['data-froala.editor'] references the elements property named data-froala.editor.

This is probably not the best Cypress command sequence. Ideally, look at the HTML to decide the best strategy, for example (Froala v4)

cy.get('.fr-wrapper')
  .eq(0)
  .find('.fr-element') 
  .then($el => {
    $el.innerHTML = 'new text!'  // better than `.type()` because you can add formatting
  })

Solution 2:^[2]

Assuming that you have no iframe, you can do something like this:

cy.get('#successfullySubmittedTextArea')
  .eq(0)
  .find('data-froala.editor')
  .clear()
  .type('new text!')

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	TesterDick
Solution 2	Alapan Das

'Cypress testing: How to type text into a Froala editor?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]