Получить объект, назначенный в HTML файле с Cypress

Question

Я пытаюсь использовать Cypress для взаимодействия с JS библиотекой, которая отображает пользовательский интерфейс для DOM. Пользователь взаимодействует с библиотекой через экземпляр объекта, который представляет GUI.

let editor = new Formr.Editor(...);

. Вышеуказанная строка находится в теге <script> на странице индекса. html. Я звоню cy.visit(./index.html) и страница загружается нормально, но при использовании cy.wrap(editor) жалуется на неопределенность editor.

Причина, по которой мне нужен доступ к экземпляру editor, заключается в проверке его состояния после взаимодействия с DOM.

Как я могу получить доступ к editor из кипариса?

Обновление: предложение Ричарда

Итак, я попробовал это:

index. html: const editor = window.editor = new Formr.Editor(...)

Cypress test:

it("Should add a row when clicked", () => {
    cy.visit('http://localhost:63342/formr');

    const editor = cy.state('window').editor;

    cy.get("#feditor-add-row-button")
    .click();

    cy.wrap(editor)
        .invoke('Data')
        .its('rows')
        .should('eq', 1);
});

К сожалению, он все еще не работает. Достаточно ли умен кипарис, чтобы ждать, пока window станет ready?

Answer 1

В теге скрипта вы можете установить ссылку на editor в окне,

<script>
  let editor = new Formr.Editor(...);
  window.editor = editor;

, затем в тесте захватить его

const editor = cy.state('window').editor;`. 

Для получения дополнительной информации см. Тестирование Vue веб-приложений с хранилищем данных Vuex и бэкэндом REST , где Vuex добавляется в окно, чтобы сделать его доступным в тестах.

Answer 2

Решением было использование .its в сочетании с предложением Ричарда Матсена присвоить editor переменной window.

cy.window()
    .its('editor.rows.length')
    .should('equal', 2);