Cannot type into ProseMirror editor with placeholder

[tamlyn]

Are you requesting a feature or reporting a bug?

Bug

What is the current behavior?

Using typeText in an editor with a placeholder doesn't work (no text is entered).

What is the expected behavior?

Manually interacting with the editor works as expected and I would expect TestCafe to behave the same.

How would you reproduce the current behavior (if this is a bug)?

Here's a repro repo https://github.com/tamlyn/prosecafe

Specify your

• operating system: MacOS 10.11
• testcafe version: 0.19
• node.js version: 8.9
• browsers: chrome and firefox

[hdorgeval]

Hi @tamlyn, I have refactored your code in the repo (see the PR).
@AlexanderMoskovkin : is there a better way to solve this case?

[AlexKamaev]

Hi @tamlyn @hdorgeval
I found that the ProseMirror editor contains this markup inside

<div class="placeholder ProseMirror-widget" contenteditable="false">Type here...</div>

When testcafe performs the type action, it checks an element's 'contenteditable' attribute. For this reason, it does not work as expected.
I recommend using @hdorgeval 's solution or take a look at my workaround based on hdorgeval's one. See the listing below:

test('empty editor with placeholder', async t => {
  const selector = Selector('#with-placeholder div[contenteditable]');
  await t
    await typeTextInEditor(selector, "Hello World", t);
    await t.expect(selector.innerText).contains('Hello');
})

async function typeTextInEditor(selector, text, t) {
  await goToEditMode(selector.find('p'));
  await t.typeText(selector, text, { replace : true });
}

const goToEditMode = ClientFunction(selector => {
    selector().innerHTML += '_';
});

In this case, we update the element's inner text in this function:

goToEditMode function

and the Prose editor removes div with the contenteditable='false' attribute, so that you can use our type action.

[tamlyn]

Thank you both for the rapid response and suggested workarounds. I don't think reaching into the DOM and manipulating innerHTML is a very robust long term solution. Could you help me understand why focusing the contenteditable=true div doesn't hide the placeholder as one would expect?

[tamlyn]

I noticed yesterday that just appending an empty string to innerHTML is enough to make it editable:

selector().innerHTML += '';

[AlexKamaev]

Could you help me understand why focusing the contenteditable=true div doesn't hide the placeholder as one would expect?

To hide a placeholder, it's required to click on the selector before typing.
So I think the correct version of the test should be the following:

test('empty editor with placeholder', async t => {
  const selector = Selector('#with-placeholder div[contenteditable]');
  await t
    await t.click(selector);
    await t.typeText(selector, 'Hellow world', { replace : true });
    await t.expect(selector.innerText).contains('Hello');
})

After the click placeholder is hidden as expected, however the test failed, so this behavior is incorrect and should be fixed.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.