在柏树和打字稿中设置Tinymce编辑器的内容

Question

我正在使用Typescript构建React JS应用程序。我正在使用柏树为我的应用程序编写集成测试。我还使用打字稿编写柏树测试。我现在正在尝试在柏树测试中设置小型MCE编辑器的内容。我正在尝试使用此库， https://github.com/foreachos/cypress/cypress-tinymce 。但是我不能将该库与打字稿一起使用，因为它仅适用于JavaScript。因此，我查看了设置编辑器值的基础代码。如下。

Cypress.Commands.add('setTinyMceContent', (tinyMceId, content) => {
  cy.window().then((win) => {
    const editor = win.tinymce.editors[tinyMceId];
    editor.setContent(content);
  });
});

因此，我尝试在我的支持/index.js文件中创建该命令的打字稿版本如下。

Cypress.Commands.add('setTinyMceContent', (tinyMceId: string, content: any) => {
    cy.window().then((win) => {
        const editor = win.tinymce.editors[tinyMceId];
        editor.setContent(content);
    })
})

但是它抱怨如下。

Property 'tinymce' does not exist on type 'AUTWindow'.

我该如何修复？

Answer 1

如果您在cypress.d.ts中查看autwindow

/**
  * Window type for Application Under Test(AUT)
*/
type AUTWindow = Window & typeof globalThis & ApplicationWindow

及其下方的声明，用户定义的属性

/**
 * The interface for user-defined properties in Window object under test.
*/
interface ApplicationWindow { } // tslint:disable-line

您可以添加您自己的属性通过声明合并。

在您的/cypress/support/e2e.d.t.ts（cypress v10）或/cypress/support/support/index.d.t.ts（cypress v9

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject> {
    setTinyMceContent(tinyMceId: string, content: any): void
  }
}

declare namespace Cypress {
  interface ApplicationWindow { 
    tinymce: any
  } 
}

---

） =“ https://www.npmjs.com/package/@types/tinymce” rel =“ noreferrer”>@type/tinymce ，这可能很有用。

Answer 2

谢谢@johnydevnull，但是就我而言，我必须进行一些更改，

Cypress.Commands.add('getBySelector', (selector, timeout?, ...args) => {
    return cy.get(`[data-testid=${selector}]`, { timeout, ...args });
});

Cypress.Commands.add('setTinyMceContent', (selector, content) => {
    // wait for tinymce to be loaded
    cy.window().should('have.property', 'tinymce');
    // wait for the editor to be rendered
    cy.getBySelector(selector)
        .find('textarea')
        .as('editorTextarea')
        .should('exist');
    // set the content for the editor by its dynamic id
    cy.window().then((win) =>
        cy.get('@editorTextarea').then((element) => {
            const editorId = element.attr('id');
            const editorInstance = (win as any).tinymce.EditorManager.get().filter((editor) => editor.id === editorId)[0];
            editorInstance.setContent(content);
        })
    );
});

我还准备了命令以阅读柏树步骤的值

Cypress.Commands.add('getTinyMceContent', (selector) => {
    // wait for tinymce to be loaded
    cy.window().should('have.property', 'tinymce');
    // wait for the editor to be rendered
    cy.getBySelector(selector)
        .find('textarea')
        .as('editorTextarea')
        .should('exist');
    // get the content of the editor by its dynamic id
    cy.window().then((win) =>
        cy.get('@editorTextarea').then((element) => {
            const editorId = element.attr('id');
            const editorInstance = (win as any).tinymce.EditorManager.get().filter((editor) => editor.id === editorId)[0];
            const content = editorInstance.getContent();
            return content;
        })
    );
});

，然后您可以检查值：

cy.getTinyMceContent(<selector>).should('contain','abc');

Answer 3

在这里，一个强大的解决方案可以处理动态编辑器ID：

Cypress.Commands.add('getBySelector', (selector, timeout?, ...args) => {
  return cy.get(`[data-spec=${selector}]`, { timeout }, ...args);
});

Cypress.Commands.add('setTinyMceContent', (selector, content) => {
  // wait for tinymce to be loaded
  cy.window().should('have.property', 'tinymce');
  // wait for the editor to be rendered
  cy.getBySelector(selector).find('editor textarea').as('editorTextarea').should('exist');
  // set the content for the editor by its dynamic id
  cy.window().then(win =>
    cy.get('@editorTextarea').then(element => {
      const editorId = element.attr('id');
      const editorInstance = (win as any).tinymce.EditorManager.get().filter(editor => editor.id === editorId)[0];
      editorInstance.setContent(content);
    }),
  );
});