如何使用量角器在 monaco 编辑器中插入代码？答案

【问题标题】：How to insert code in monaco editor using the protractor?如何使用量角器在 monaco 编辑器中插入代码？
【发布时间】：2017-04-11 08:22:33
【问题描述】：

我正在尝试使用量角器测试包含 monaco 编辑器的代码，但找不到如何以编程方式编辑代码。

这是我的测试

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');
  }
}

帮助了解如何在摩纳哥编辑代码或将代码粘贴到摩纳哥。

【问题讨论】：

标签： javascript angularjs typescript protractor monaco-editor

【解决方案1】：

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

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

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

browser.switchTo().frame(iframeSelector);

【讨论】：