cypress: Cannot type in draftjs-based editors

Current behavior:

image

Desired behavior:

image

How to reproduce:

https://github.com/dziamid/cypress-draftjs

Test code:

describe('React RTE', function(){

  it('i cannot simply type', function () {

    cy
        .visit('https://react-rte.org/demo')
        .get('[contenteditable]').eq(0).type('I am typing')
        .get('textarea').eq(0).contains('I am typing')
  });


})
  • Operating System: Ubuntu 16.04
  • Cypress Version: Cypress CLI: 0.13.1 Cypress App: 0.19.4
  • Browser Version: Chrome 59 Electron 53

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 3
  • Comments: 22 (8 by maintainers)

Commits related to this issue

Most upvoted comments

I managed to get typing working by dropping down to using DOM directly. Our RichTextEditor component fires changes on blur (only internal state is updated on change), so we needed to focus, then type, then blur the editor. Here is the code. Hope it helps someone:

export const typeIntoDraftEditor = (selector, text) => {
  cy.get(selector).then(input => {
    var textarea = input.get(0);
    textarea.dispatchEvent(new Event("focus"));
 
    var textEvent = document.createEvent("TextEvent");
    textEvent.initTextEvent("textInput", true, true, null, text);
    textarea.dispatchEvent(textEvent);
 
    textarea.dispatchEvent(new Event("blur"));
  });
};

@dolyst sure!

Draft’s Editor component can accept a webDriverTestID prop. This is output as a data-testid attribute.

So, assuming an editor like:

<Editor webDriverTestID="foo" />

Then the following would work with my function above:

typeIntoDraftEditor(`[data-testid="foo"]`, "hello world")

Hope that helps 😃

@brettimus on quirk is that typing {enter} does not trigger in input event. That’s getting fixed in #311