How to execute automatic tests with React-monaco and Playwright?

[Torvaldi]

This may be a stupid question, but for a React project tested with Playwright, I would like to be able to edit and add code in a Monaco editor.

I tried using the locator.fill('...'); method, but Monaco is not a "textarea" or "input" element in the DOM.

What approach should I try to use to allow me to test a Monaco editor with Playwight?

[Torvaldi]

After some additional research, I found this comment in an openned issue that inspire me this kind of test code :

import test, { Locator, Page, expect } from "@playwright/test";

let page: Page;

test.beforeAll(async ({ browser }) => {
  page = await browser.newPage();

  await page.goto("/");
});

test.afterAll(async () => {
  await page.close();
});

test.describe("Try the Monaco editor", async () => {
  let editorWrapper: Locator;

  test("Should see the editor", async () => {

    // Get the monaco editor wrapper
    editorWrapper = page.getByTestId("monaco-editor-wrapper");

    expect(editorWrapper).toBeVisible();
  });

  test("Edit the code in the editor", async () => {
    // Get the textbox of the monaco editor
    const editor = editorWrapper.getByRole("textbox");

    expect(editor).toBeVisible();

    const beforeValue = editor.getAttribute("value");
    
    // Remove everything
    await editor.press("Control+a");
    await editor.press("Backspace");

    // Filling with new value
    await editor.pressSequentially("console.log('Hello World!');");

    expect(beforeValue).toBe("return 'Hello world!';");
  });
});