How to enter text into monaco-editor control using Playwright.

[raiajithkumarr]

Hi Team,
please tell me how enter text into .monaco-editor.

I tried below options but no use.
await page.fill('#monaco-editor-selector', 'YOUR_CODE');
or
await page.fill(".view-lines monaco-mouse-cursor-text","tests");

please help here.

[mxschmitt]

Monaco editor has no native input element which you can automate, but you can issue keyboard events, see the following example:

// @ts-check
const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch({
    headless: false,
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://microsoft.github.io/monaco-editor/playground.html', { waitUntil: 'networkidle' });
  const monacoEditor = page.locator(".monaco-editor").nth(0);
  await monacoEditor.click();
  await page.keyboard.press("Meta+KeyA")
  await page.keyboard.type('This is a line of text\n');
  await page.keyboard.type('This is another line of text\n');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

[mofojed]

The above method works, but sometimes instead of entering the text I have inputted, the new-line (or Enter key) will select the first autocomplete suggestion instead, changing the text intended to be inputted.

[hashboard-charlie]

We have been bumping into this problem for awhile and felt that all the proposed solutions overtested Monaco. We don't care about how Monaco works, or how it responds to keystrokes. So we just attach a handler directly to the element that Playwright can call. For example:

In the app code:

// attach an imperative method to the element so tests can programmatically update
// the value of the editor without dealing with how Monaco handles the exact keystrokes
monacoElement.__uiTestingSetValue = (text: string) => {
  onChange(text);
 // or however you want to mutate the underlying stored value...
 // you could change the editor's `model` instead
};

In Playwright:

export async function setMonacoEditorText(locator: Locator, text: string) {
  await locator.evaluate(
    (el, passedText) => (el as any).__uiTestingSetValue(passedText),
    text,
  );
}

It isn't "pure" in that we're changing our app's code to suit the test suite... but it beats having flakes, and it allows people to just drop text into Monaco inputs without needing to figure out the precise set of keystrokes and inner containers to send them to.

[mofojed]

We ended up using paste to paste text into monaco, but it is pretty obtuse: https://github.com/deephaven/web-client-ui/blob/9d905fca86aa8ba4ff53debd1fd12dcc9132299b/tests/utils.ts#L107

[Verten]

Monaco editor has no native input element which you can automate, but you can issue keyboard events, see the following example:

// @ts-check
const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch({
    headless: false,
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://microsoft.github.io/monaco-editor/playground.html', { waitUntil: 'networkidle' });
  const monacoEditor = page.locator(".monaco-editor").nth(0);
  await monacoEditor.click();
  await page.keyboard.press("Meta+KeyA")
  await page.keyboard.type('This is a line of text\n');
  await page.keyboard.type('This is another line of text\n');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

Thanks, you saved me all day

[StuartAtmosi]

Monaco editor has no native input element which you can automate, but you can issue keyboard events, see the following example:

// @ts-check
const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch({
    headless: false,
  });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://microsoft.github.io/monaco-editor/playground.html', { waitUntil: 'networkidle' });
  const monacoEditor = page.locator(".monaco-editor").nth(0);
  await monacoEditor.click();
  await page.keyboard.press("Meta+KeyA")
  await page.keyboard.type('This is a line of text\n');
  await page.keyboard.type('This is another line of text\n');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

Where can I find a list of the key press commands please?
I am currently looking for CTRL+V for paste, but would be interested in other commands at a later date! 😊

[naltatis]

Struggled a bit to get this code running in GitHub actions just to find out the modifier key has to be adapted depending on operating system. This works on mac and linux:

await page.keyboard.press("ControlOrMeta+KeyA")

[StuartAtmosi]

I have foud the .FillAsync to be the best and simplest approach for my needs.

await Page.GetByLabel("Editor content;Press Alt+F1").FillAsync(Variables.TextToFillExample);

Typing takes too long.

The other fallback method is CTRL+V

            var monacoEditor = Page.Locator(".monaco-editor").Nth(0);
            await monacoEditor.ClickAsync();
            await Page.EvaluateAsync("text => navigator.clipboard.writeText(text)", TextToPasteExample);
            await Page.Keyboard.PressAsync("Control+V");