Порядок развертывания решения
- Создайте новую пустую информационную базу 1С.
- В режиме конфигуратора загрузите конфигурацию из файла 1ChromeVA.cf.
- Опубликуйте конфигурацию на локальном веб-сервере, используйте имя публикации TEST.
- В корневой папке локального веб-сервера разместите папку 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.