Cypress: Cannot type in draftjs-based editors

[dziamid]

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

[brian-mann]

We'll take a look but we have a ton of cy.type improvements coming in 0.20.0 which are already done. This has likely already been fixed but we'll double check today.

[jennifer-shehane]

Can confirm, is a bug, still happens in 0.20.0

[tomekbonior]

looks like issue still occurs
@dziamid Did you sort it out somehow?

[vasilesmartup]

I can type in draft.js component, but no events are triggered, so the text is not being persisten by the app. Tried also triggering manually the events, no luck

[WickyNilliams]

This is still happening in cypress 1.4.1. This is the major blocker for us adopting cypress, as our app relies heavily on draft-js

[zth]

Same here, it's happening for us as well, and also a major blocker for using Cypress unfortunately. I'd love to be able to help out somehow here, is there anything we can do to help? Open to anything really, we currently just need a way to input simple text and a few key strokes like enter etc.

[jennifer-shehane]

Fixing this would likely entail knowing the implementation of draft.js, what events they are expecting, seeing what and when events are triggered natively when typing into draft.js and comparing that to our type implementation to see what events we are not triggering or not triggering correctly.

Draft.js code: https://github.com/facebook/draft-js

Our cy.type() code: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/actions/type.coffee

Also, native events will be helpful when that is out: #311

[WickyNilliams]

In case this information is of use to you: webdriver/selenium-based testing frameworks do not have this problem. webdriverio's setValue works as expected

[WickyNilliams]

I may not understand the type() code correctly, but could this line be to blame? Since draftjs uses contenteditable https://github.com/cypress-io/cypress/blob/99302267dfd37cf6e8ff69b7b2542a89c9203abf/packages/driver/src/cy/commands/actions/type.coffee#L292

[jennifer-shehane]

@WickyNilliams No, that code basically means that Cypress does not emit a change or submit event during typing or when pressing 'enter' on contenteditable DOM. Those are indeed not fired when typing or pressing enter when manually typing into draft.js (I am using their demo as reference).

[WickyNilliams]

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]

@WickyNilliams thanks for the function! Any chance you could provide an example call please, I'm struggling to determine what selector to use. Thanks!

[WickyNilliams]

@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 :)

[dolyst]

@WickyNilliams. Thanks very much!

[andreyvital]

@jennifer-shehane any progress?

[jennifer-shehane]

No, we are not currently working on this. We welcome pull requests though, even if they are 'work in progress'!

[averboe]

Having the same issue. Many people are complaining about it. Is there any fix for that?

[Bkucera]

This issue will be fixed in upcoming patch release, along with many other cy.type improvements mentioned in #1241

[MrDismal]

Having same issue or at least a similar issue as to others here.
I am able to get Cypress to type in the JS Draft Editor, but once out of the editing state, the text is not saved, but I am able to select all remove the text.

[Bkucera]

Changes are in PR #2016 , with added support for {uparrow} and {downarrow}. Here's an example:

cy.visit('https://draftjs.org/')
cy.get('[contenteditable]').click()
cy.contains('.RichEditor-styleButton', 'Monospace').click()
cy.get('[contenteditable]')
   .type(`
foo
bar
baz{leftarrow}{leftarrow}{uparrow}11{uparrow}22{downarrow}{downarrow}33`
.replace(/\n/g, '{enter}')
   )
   .should('have.prop', 'innerText', '\nfoo22\nb11ar\nbaz33\n')

[brettimus]

Hallo! I know this is closed, but I wanted to ask the draft users on this thread if they

1. have example repos with cypress tests, and/or
2. they found any quirks testing draft editors with cypress

@averboe @MrDismal @WickyNilliams @dziamid

[Bkucera]

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