Wrong behaviour of draft editor when quick typing (using cypress)

[bonyeck]

bug When typing text in a div with role='textbox', it's not going to be handled correctly. First letter goes to newly created block but rest of the text is going directly to the div.

current behavior video recording screenshot

steps to reproduce run in cypress (tool to run GUI tests)

describe('Draft tests', function(){

    it('Should type in one line', function(){
        cy.visit('https://draftjs.org')
            .get('.public-DraftEditor-content')
            .wait(1000)
            .type('Text in one line ')
            .wait(3000)
    })
})

expected behavior Text should be in one line and whole in one div.

version of Draft.js 0.10.3

browser / OS Chrome 62, macOS 10.12.6

[vasilesmartup]

My workaround for this is very ugly, I usually type a space before the actual test.

[mitermayer]

This is something I would love to get fixed, was hoping to explore the possibility of using cypress to run some end-to-end tests in draft itself

[vicusbass]

Here's a recording: https://youtu.be/hdEglh3qdsY And a demo test:

describe('Smoke tests', function() {

  it.only('type stuff in draftJs control', function() {
    cy.visit('https://draftjs.org/')
    cy.get('[contenteditable="true"]').click().type('My first card is awesome')
  })
})

[thibaudcolas]

I'm not experiencing this with Puppeteer, so I think it's most likely due to how Cypress implements type and not a bug in Draft.js. Here's an example test, entering two blocks in the editor and taking a screenshot:

    describe('simple editor', () => {
        it('renders', async () => {
            await page.type(
                '[data-mount] [role="textbox"]',
                'My first card is',
            );
            await page.keyboard.press('Enter');
            await page.type('[data-mount] [role="textbox"]', 'awesome');

            const clip = await page.evaluate(() =>
                document
                    .querySelector('[data-mount]')
                    .getBoundingClientRect()
                    .toJSON(),
            );

            expect(await page.screenshot({ clip })).toMatchImageSnapshot({
                failureThresholdType: 'percent',
                // // 0.1% difference to account for font rendering.
                failureThreshold: '0.001',
            });
        });
    });

Result:

---

I'm not familiar with how the Puppeteer type implementation might be different from other frameworks', but here's what the docs say about it: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-keyboard.

[WickyNilliams]

Thought I'd post this here for anyone arriving from google...

Through trial and error, and some DOM event trickery, i was able type into draft editor via cypress. See here: https://github.com/cypress-io/cypress/issues/596#issuecomment-366969418. Hope this helps someone.

I'm convinced this is an issue with cypress' implementation, as webdriver-based test frameworks have no issue.