cypress: Cannot type in draftjs-based editors

Current behavior:

Desired behavior:

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

Fix issues with cy.type (#2016) this grew to a large PR fixing many cy.type issues. fix #365 fix #420 fix #586 fix #593 fix #596 fix #610 fix #651 fix #940 fix #1002 fix #1108 fix #... — committed to cypress-io/cypress by kuceb 6 years ago

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"));
  });
};

+21

WickyNilliams on Feb 20, 2018

@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 😃

+15

WickyNilliams on Mar 6, 2018

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

kuceb on May 10, 2019