Как вставить код в редактор Monaco с помощью Playwright?

Question

Я новичок в Playwright, и я пытаюсь протестировать функцию, содержащую редактор Monaco, и не могу найти ничего, связанного с Playwright, в документации и на форумах.

Это мой тест:

      async ({ page }) => {
    const testPage= new TestPage(page);

    await testPage.navigateTo();
    //dosomething
    await page.waitForSelector(#monaco-editor-selector);
    //Paste a script in monaco editor
}

Пожалуйста помоги!

Answer 1

const {test,expect} = require('@playwright / test')

test('Login', async({page}) => {
await page.goto('https: // URL')
await expect (page) .toHaveTitle('someTITLE')
await page.click('selector'); // если нужен шаг
await page.fill('#monaco-editor-selector', 'YOUR_CODE');
})

Попробуйте это - может быть, это поможет

Answer 2

У Драматурга есть закрытая проблема № 14126 по этому поводу с хорошим ответом, вставленным ниже.

      test('Should write content in Monaco Editor', async ({ page }) => {
  const monacoEditor = page.locator(".monaco-editor").nth(0);
  await monacoEditor.click();
  await page.keyboard.type('Hello world!');
})

Если у вас есть несколько редакторов Monaco и вы хотите получить к ним доступ с помощью некоторых из них, вы можете обернуть их в<div>с тестовым идентификатором. К сожалению, вы не можете установитьdata-testidнепосредственно в компонент Monaco Editor.

      <div data-testid="my-test-id">
  <MonacoEditor ... />
</div>

      test('Should write content in Monaco Editor that is wrapped inside a div', async ({ page }) => {
  const monacoEditor = page.getByTestId('my-test-id').locator(".monaco-editor").nth(0);
  await monacoEditor.click();
  await page.keyboard.type('Hello world!');
})