javascript - 如何使用 Protractor 在 Monaco Editor 中插入代码？

Question

我正在尝试使用 Protractor 来测试包含 Monaco Editor 的代码，但找不到如何以编程方式编辑代码。

这是我的测试

import {CodelabPage} from './app.po';
import {browser, element, by} from 'protractor';

describe('codelab App', function () {
  let page: CodelabPage;

  beforeEach(() => {
    page = new CodelabPage();
  });

  it('should display message saying app works', () => {
      page.navigateTo();
      page.openMilestone(1);
      page.openExercise('TypeScript');
      browser.pause(2000);
      page.editCode('Dog.ts', `HopHeyLalalay`);
      browser.pause();
    }
  );
});

这是我的功能

import {browser, element, by} from 'protractor';
import {By} from "protractor/built/index";

export class CodelabPage {
  navigateTo() {
    return browser.get('/');
  }

  getMilestoneDescriptionText() {
    element(by.css('.milestone')).click();

    return element(by.css('.description')).getText();
  }

  getElementText(nameElement) {
    return element(by.css(nameElement)).getText();
  }


  openMilestone(index) {
    return element(by.cssContainingText('.milestone', index)).click();
  }

  openExercise(text) {
    return element(by.cssContainingText('.exercise', text)).click();
  }

  editCode(filename: string, code: string) {
    return element(by.css('.monaco-editor-background textarea'))
      .sendKeys('njnj');
  }
}

帮助了解如何在 Monaco Editor 代码或仅在摩纳哥粘贴代码。

Answer 1

Monaco 编辑器公开了一个 API，您可以使用它来编辑文本区域。你可以试试这个:

  browser.executeScript('this.monaco.editor.getModels()[0].setValue("' + yourStringHere + '"));

如果您使用 iframe，则需要在尝试编辑代码之前切换到 iframe，如下所示:

browser.switchTo().frame(iframeSelector);