Введение

Система плагинов Cypress — это мощный способ расширить функциональность Cypress, но он имеет некоторые ограничения. Одним из самых больших ограничений является то, что у вас может быть только один слушатель для определенного события. Это означает, что если вы хотите использовать несколько плагинов или репортеров, которые прослушивают одно и то же событие, вы не можете этого сделать. Вот тут и приходит на помощь библиотека cypress-plugin-init. Эта библиотека с открытым исходным кодом упрощает процесс настройки нескольких плагинов или генераторов отчетов Cypress в вашем проекте, упрощая использование нескольких плагинов или генераторов отчетов, которые прослушивают одно и то же событие.

Фон

Прежде чем мы начнем, я хочу сказать несколько слов о системе плагинов Cypress. Это отличный способ расширить функциональность Cypress, добавив собственный код в свои тесты. Плагины могут изменять поведение Cypress, добавлять команды или прослушивать события. Однако система плагинов в некоторых отношениях ограничена. Одним из самых больших ограничений является то, что у вас может быть только один слушатель для определенного события. Это означает, что если у вас есть несколько плагинов или репортеров, которые прослушивают одно и то же событие, будет запущен только один из них. Об этом ограничении сообщалось в репозитории Cypress GitHub в выпусках #22428 и #5240.

Начиная

Чтобы использовать библиотеку cypress-plugin-init, вам необходимо установить ее в свой проект Cypress. Вы можете сделать это с помощью npm:

npm i-D cypress-plugin-init

После того, как вы установили библиотеку, вы можете использовать ее для инициализации нескольких плагинов, которые прослушивают одно и то же событие. Вот пример того, как использовать библиотеку для инициализации двух плагинов, которые прослушивают событие before:run.

В приведенном ниже примере мы используем функцию initPlugins, предоставленную библиотекой cypress-plugin-init. Эта функция принимает три аргумента:

  • on — обязательно
  • plugins[] — обязательно
  • config — необязательно
import { defineConfig } from 'cypress';
import { initPlugins } from 'cypress-plugin-init';

const plugin1 = (on: Cypress.PluginEvents) => {
  on('before:run', () => console.log('[Plugin #1] Running before:run'));
};

const plugin2 = (on: Cypress.PluginEvents) => {
  on('before:run', () => console.log('[Plugin #2] Running before:run'));
};

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      initPlugins(on, [plugin1, plugin2]);
    },
  },
});

И затем, когда вы запустите этот код, вы увидите результат в своем терминале:

(Run Starting)
...
[Plugin #1] Running before:run
[Plugin #2] Running before:run
...
(Run Finished)

Однако, если вы запустите тот же код без функции initPlugins, результат будет таким:

(Run Starting)
...
[Plugin #2] Running before:run
...
(Run Finished)

Реальный рабочий пример

Вы хотите иметь двух репортеров. Первый — registerAIOTestsPlugin для Jira, а второй — cypress-mochawesome-reporter HTML для вашего CI. Итак, в вашем случае невозможно иметь их оба одновременно без библиотеки cypress-plugin-init. Следовательно, вот пример того, как включить эти два репортера в вашу конфигурацию Cypress:

import { initPlugins } from 'cypress-plugin-init';
import { registerAIOTestsPlugin } from 'cypress-aiotests-reporter/src';
import cypressMochawesomeReporter from 'cypress-mochawesome-reporter/plugin';

export default defineConfig({
  e2e: {
    // ...
    setupNodeEvents(on, config) {
      initPlugins(on, [registerAIOTestsPlugin, cypressMochawesomeReporter], config);
    },
    // ...
  },
});

Заключение

Библиотека cypress-plugin-init — это мощный инструмент, упрощающий процесс настройки нескольких плагинов Cypress в вашем проекте. С помощью этой библиотеки вы можете использовать несколько плагинов, которые прослушивают одно и то же событие, что позволяет расширять функциональность Cypress новыми и творческими способами. Я надеюсь, что эта статья показала вам, как использовать библиотеку cypress-plugin-init, и предоставила примеры того, как она может быть полезна в ваших проектах Cypress. Для получения дополнительной информации о библиотеке вы можете прочитать ее документацию на GitHub.