contenteditable="false" on Placeholder of CodeMirror component prevents input via typeText

[Thomas-Haider]

What is your Scenario?

We want to type text in a code mirror components that has a placeholder defined.

What is the Current behavior?

Input in code mirror component only works when no placeholder is defined or when we manually override contenteditable property of the placeholder dom element and then input the wanted text.

What is the Expected behavior?

I would expect that with testcafe I can enter text into code mirror components that have a placeholder defined without manipulating a dom element.

What is your public website URL? (or attach your complete example)

https://codesandbox.io/s/winter-glitter-8k9pct?file=/src/App.js

What is your TestCafe test code?

It is reproducible in the following example:

import {Selector} from "testcafe";

fixture('code mirror issue').page('https://codesandbox.io/s/winter-glitter-8k9pct?file=/src/App.js');

test('reproduce code mirror issue', async (tc) => {
    await tc.expect(Selector('iframe#sandbox-preview').visible).ok()
        .switchToIframe(Selector('iframe#sandbox-preview'))
        .typeText(Selector('div#placeholder').find('div.cm-content'), 'ddd')
});

test('working code mirror input', async (tc) => {
    await tc.expect(Selector('iframe#sandbox-preview').visible).ok()
        .switchToIframe(Selector('iframe#sandbox-preview'))
        .typeText(Selector('div#value').find('div.cm-content'), 'ddd')
});

Your complete configuration file

no config file used

Your complete test report

Screenshots

No response

Steps to Reproduce

1. copy paste example I provided in "What is your TestCafe test code" section
2. run testcafe chrome ./test.spec.ts --live --skip-js-errors
3. Note: the --skip-js-errors is not related to the issue. That is just needed due to an issue on the code sandbox.

TestCafe version

3.0.0

Node.js version

16.18.1

Command-line arguments

testcafe chrome ./test.spec.ts --live --skip-js-errors

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

When you look at the screenshot below you see that the contenteditable property is only set to false on the placeholder and is set to true on the code mirror component. Logically, this means I should be able type something there but sadly, TestCafe is checking also child components for that value and therefore, prevents me from typing something.

[github-actions]

We appreciate you taking the time to share the information about this issue. We replicated it, and it is currently in our internal queue. Please note that the research may take time. We'll update this thread once we have news.

[github-actions]

We appreciate you taking the time to share the information about this issue. We replicated it, and it is currently in our internal queue. Please note that the research may take time. We'll update this thread once we have news.

[AlexKamaev]

I managed to overcome the issue with a workaround. The cause of the incorrect behavior is in the placeholder div located inside the content-editable element. Currently, TestCafe cannot handle this exact usage scenario, so please use the following approach:

import { Selector } from "testcafe";

fixture('code mirror issue').page('https://8k9pct.csb.app/');

test('reproduce code mirror issue', async (tc) => {
    await tc
        .click(Selector('div#placeholder').find('div.cm-content'))
        .pressKey('d')
        .typeText(Selector('div#placeholder').find('div.cm-content'), 'dd')
        .debug()
});

The trick is that before typing we focus our editable content element and execute the pressKey action. After that the placeholder disappears and TestCafe can continue typing as expected.
This workaround should work starting from TestCafe v3.0 in Chromium-based browsers.
We recommend using the described workaround on a permanent basis.
I'll close the issue since there is a workaround. If the workaround is not appropriate for you for some reason, please describe your usage scenario in greater detail.

[Thomas-Haider]

Thanks!

@AlexKamaev you said that testcafe currently can't handle this use case, is it planned to support such functionality in the future?

[christian-kreuzberger-dtx]

Appreciate the workaround, thanks!

If the workaround is not appropriate for you for some reason, please describe your usage scenario in greater detail.

It's possible to include it, but for sure it has some side effects (e.g., the additional character / keyDown event is triggering additional behavior).

Other then that, think about a normal development workflow. We have an existing TestCafe based test that types into a CodeEditor field without a placeholder. Someone adds a placeholder to this CodeEditor field, which will make an existing test fail, as TC is no longer able to type a text into this field. It's not obvious to the developer as to why the test fails.

[Thomas-Haider]

During tryouts, i saw that the workaround is only working when native automation is activated. Any chance to get this workaround for proxy mode?
As we're currently not able to use the native automation mode due to iframe navigation issues when it is enabled.

[AlexKamaev]

@christian-kreuzberger-dtx @Thomas-Haider
I understand your concerns. Unfortunately, at present we are fully focused on other issues, so we cannot give you any estimates on when we will be able to start working on this one.

Any chance to get this workaround for proxy mode?

I did not manage to make the workaround work in proxy mode.
I can only recommend you split your tests into two parts as mentioned in the following comment:
#7661 (comment)