Setting the content of TinyMCE Editor in Cypress and Typescript

Question

I am building a React Js application using Typescript. I am writing integration tests for my application using Cypress. I am also using Typescript for writing Cypress tests. I am now trying to set the content of the tiny MCE editor in the Cypress test. I am trying to use this library, https://github.com/ForeachOS/cypress-tinymce. But I cannot use that library with TypeScript as it is only for JavaScript. So I had a look at the underlying code that sets the value of the editor. It is as follow.

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

So I tried to create the TypeScript version of that command in my support/index.js file as follow.

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

But it is complaining as follow.

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

How can I fix it?

Fody · Answer 1 · 2022-06-23T02:22:55.287

If you take a look in cypress.d.ts there's a declaration for AUTWindow

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

and underneath that is ApplicationWindow for user-defined properties

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

You can add your own properties via declaration merging.

In your /cypress/support/e2e.d.ts (Cypress v10) or /cypress/support/index.d.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
  } 
}

There's also @types/tinymce which may be useful down the line.

thanks it solve that runtime error. But the package itself is throwing another error. I will post another question. — Wai Yan Hein, Jun 23 '22 at 17:14

Lukáš Stach · Answer 2 · 2023-08-16T08:00:11.603

Thanks @JohnyDevNull, but in my case i had to do some changes

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

Also i prepared command for reading a value

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

in cypress steps then you can check value with:

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

I guess you missed the point of the question? It's about typescript error - how did you solve it? — A.Pearsson, Aug 16 '23 at 09:40
I used (win as any).tinymce.... instead of win.tinymce..... and after that i added '''declare namespace Cypress { interface Chainable { tinymce: any; } }''' into declarations.d.ts — Lukáš Stach, Aug 16 '23 at 14:41

score -1 · Answer 3 · answered Jul 19 '23 at 09:43

Here a robust solution wich handles the dynamic editor ID's:

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

Setting the content of TinyMCE Editor in Cypress and Typescript

3 Answers3

Linked