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

user_1617533 0
Viewed 178

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!

froala cypress
2 Answers

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
  })
user_183667490

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!')
user_45712710
Related