Технология создания эффектных видео-инструкций посредством DevTools Protocol

Публикация № 1225820

Методология - DevOps - Сценарное тестирование

Конфигурация демонстрирует применение технологий интеграции 1C с браузером Google Chrome для создания эффектных видео-инструкций при помощи инструментов сценарного тестирования. Поддерживаются все версии платформы от 8.3.10 и выше до 8.3.17.

Порядок развертывания решения

  1. Создайте новую пустую информационную базу 1С.
  2. В режиме конфигуратора загрузите конфигурацию из файла 1ChromeVA.cf.
  3. Опубликуйте конфигурацию на локальном веб-сервере, используйте имя публикации TEST.
  4. В корневой папке локального веб-сервера разместите папку wwwroot/vanessa.

Если публикация выполнена правильно, должны успешно открываться следующие ссылки:

 

Запустите информационную базу 1С в режиме менеджера тестирования, используя параметр запуска: /TESTMANAGER.

При открытии формы производится попытка обнаружить установленный на компьютере браузер Google Chrome. Если браузер не найден, укажите в диалоге выбора файла полный путь к исполняемому файлу Chrome, либо браузеру Chromium, если вы предпочитаете использовать его. Перед началом демонстрации закройте открытые окна Google Chrome, убедитесь что все экземпляры браузера закрыты. Последовательно нажмите кнопки «Запустить браузер» и далее «Запустить клиент тестирования» для запуска веб-клиента «1С:Предприятие» в режиме клиента тестирования.

Демонстрация представляет собой простейший тестовый сценарий из последовательности шагов, снабженных различными визуальными эффектами. Вы наблюдаете подсветку элементов формы, всплывающее окно с текстовой подсказкой, выделение рамками и стрелками полей ввода. Каждый визуальный эффект представляет собой вызов функции JavaScript, которую менеджер тестирования отправляет веб-клиенту через соединение WebSocket по посредством DevTools Protocol.

Подробно рассмотрим технологию работы сценария. После запуска браузера и установки HTTP соединения по порту 9222 мы программно открываем страницу веб-публикации http://localhost/test/ с необходимыми ключами для запуска в режиме клиента тестирования. При этом получаем адрес WebSocket для управления браузером и целочисленный идентификатор фрейма. Далее командой Page.createIsolatedWorld создается изолированный контекст выполнения JavaScript, чтобы скрипты визуальных эффектов не конфликтовали с программным кодом веб-клиента «1С:Предприятие». Расположенные в папке wwwroot/vanessa скрипты подключаются командой Runtime.evaluate и следующей функцией.

(function (base, files) {
    files.forEach(file => fetch(base + file)
        .then(response => response.text())
        .then(text => eval.apply(null, [text]))
    )
    let node = document.createElement('link');
    node.href = '/vanessa/enjoyhint.css';
    node.rel = 'stylesheet';
    window.top.document.body.appendChild(node);
}('http://localhost/vanessa/', [
    'jquery.min.js',
    'enjoyhint.min.js',
    'leader-line.min.js',
    'library.js',
]));

Как вы уже поняли, в примере используются библиотеки: jQuery, Leader Line, Enjoy Hint. Но вы можете подключить любые скрипты без ограничений, если разместите их на локальном веб-сервере. При этом вам остаются доступными стандартные инструменты разработчика Google Chrome: консоль JavaScript с отладчиком и обозреватель элементов. Только обратите внимание, что отладку скриптов визуальных эффектов необходимо производить в соответствующем изолированном контексте.

Несколько полезных функций вы найдете в поставляемом программном коде: поиск элемента формы по имени, получение активного элемента формы. Полагаю, вы легко сможете создать собственные визуальные эффекты, отладить их в консоли JavaScript и встроить в свою конфигурацию. Хорошая новость, что описанная технология создания визуальных эффектов будет включена в очередной релиз инструмента сценарного тестирования прикладных решений Vanessa Automation.

Скачать файлы

Наименование Файл Версия Размер
1ChromeVA.zip

.zip 1,31Mb
17.04.20
3
.zip 1,31Mb 3 Скачать

Специальные предложения

Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Pr-Mex 128 18.04.20 09:27 Сейчас в теме
2. FreeArcher 98 23.04.20 06:57 Сейчас в теме
Т.е. в Vanessa Automation запрограммирован сценарий, который демонстрируется в Crome, правильно я понял?
3. kandr 78 23.04.20 10:38 Сейчас в теме
(2) Да, в следующем релизе Vanessa Automation появится возможность запрограммировать сценарий с визуальными эффектами, например:
И я показываю подсказку "Произвольный текст" у элемента с именем "ФормаНаименование"
Оставьте свое сообщение

См. также

Автотесты алгоритмов по работе со сторонними http сервисами через юнит-тесты и мок сервер soapUI

Сценарное тестирование WEB v8 8.3.14 1cv8.cf Россия Абонемент ($m)

Полезный кейс по использованию скриптов в soapui и тестированию http-сервиса с конкретным практическим примером.

1 стартмани

02.11.2020    600    0    dvissarov5    5    

Генерация кода для автоматизированного тестирования

Инструментарий разработчика Практика программирования Сценарное тестирование v8 v8::УФ 1cv8.cf Россия Абонемент ($m)

Генератор кода - дополнение к оригиналу. Генерация данных на основе существующих экземпляров объектов системы. Генерация данных на основе метаданных конфигурации.

1 стартмани

28.07.2020    1799    4    rsamt    0    

СППР. Интерактивный запуск дерева процессов

Сценарное тестирование v8 1cv8.cf Россия Абонемент ($m)

Расширение для СППР (система проектирования прикладных решений ред. 2.0.1.58) позволяющее запускать фреймворк тестирования Vanessa Automation не только с текущим процессом, но и с предшествующими ему.

1 стартмани

23.03.2020    1638    1    check2    2