Кастомизация GUI

Обзор

warning

Данный способ кастомизации GUI устарел.

Вместо него рекомендуется использовать плагины для отчета.

Используйте опцию customGui в конфиге плагина html-reporter, чтобы добавить собственные элементы управления для GUI-режима.

Для элементов управления задается их тип (кнопка или радиокнопка), надписи и значения, а также функции инициализации и основного действия по нажатию. Элементы управления должны быть разбиты на отдельные разделы в зависимости от их назначения. Как минимум, должен быть указан один раздел.

По умолчанию значение опции customGui: {}.

Настройка

Опция customGui требует для своего значения объект следующего формата:

customGui: {
    '<название раздела>': [
        {
            type: '<тип элементов управления>', // 'button' или 'radiobutton'
            controls: [
                {
                    label: '<надпись на элементе управления>',
                    value: '<значение элемента управления>'
                },

                // другие элементы управления...
            ],
            initialize: async ({ testplane, ctx }) => {
                // код инициализации
                // возвращаемое значение будет проигнорировано
            },
            action: async ({ testplane, ctx, control }) => {
                // код действия
                // возвращаемое значение будет проигнорировано
            }
        },

        // другие группы элементов управления...
    ],

    // другие разделы...
}

Расшифровка параметров конфигурации

Название	Тип	Описание
type	String	Обязательный параметр. Тип элементов управления. Доступные значения: 'button' и 'radiobutton'.
controls	Array	Массив объектов, каждый из которых описывает элемент управления. Объект должен состоять из двух ключей: label и value, которые задают надпись на элементе управления и его значение.
initialize	Function	Необязательный параметр. Асинхронная функция, которая будет выполнена на серверной стороне при старте Testplane в GUI-режиме. В функцию будет передан объект вида { testplane, ctx }, где testplane — это инстанс testplane, а ctx — объект, описывающий группу элементов, для которых вызывается функция инициализации.
action	Function	Обязательный параметр. Асинхронная функция, которая будет выполнена на серверной стороне, когда пользователь нажмет на элемент управления. В функцию будет передан объект вида { testplane, ctx, control }, где testplane — это инстанс testplane, ctx — объект, описывающий группу элементов, для которых вызывается action-функция, и control — ссылка на элемент управления, по которому кликнул пользователь.

Пример использования

Добавляем радиокнопки для изменения baseUrl'а в GUI-режиме:

customGui: {
    'some-meaningful-name-of-section': [
        {
            type: 'radiobutton',
            controls: [
                {
                    label: 'Dev',
                    value: 'http://localhost/development/'
                },
                {
                    label: 'Prod',
                    value: 'http://localhost/production/'
                }
            ],
            initialize: async ({ testplane, ctx }) => {
                const { config } = testplane;
                const browserIds = config.getBrowserIds();

                if (browserIds.length) {
                    const { baseUrl } = config.forBrowser(browserIds[0]);

                    ctx.controls.forEach((control) => {
                        control.active = (baseUrl === control.value);
                    });
                }
            },
            action: async ({ testplane, ctx, control }) => {
                const { config } = testplane;

                config
                    .getBrowserIds()
                    .forEach((browserId) => {
                        config.forBrowser(browserId).baseUrl = control.value;
                    });
            }
        }
    ]
}