Web-шпион/рекордер

Расширение предназначено для получения селекторов (XPath и CSS) элементов веб-страниц и их передачи в Студию для автоматизации, а также для записи действий пользователя в браузере.

1. Установка

Автоматическая

Установите расширение из официального магазина дополнений (Chrome Web Store или Firefox Add-ons) по ссылке из Студии.

Ручная (режим разработчика)

Для Chrome:

Скачайте и распакуйте архив с расширением.
Перейдите на страницу chrome://extensions/.
Включите «Режим разработчика» (Developer mode).
Нажмите «Загрузить распакованное расширение».
Укажите папку с файлами расширения в проводнике.

Для Firefox:

Перейдите на страницу about:addons.
Нажмите на иконку шестеренки.
Нажмите «Установить дополнение из файла...» в открывшемся меню.
Укажите файл расширения в формате .xpi в проводнике.

2. Интерфейс виджета

По нажатии на иконку расширения открывается виджет.

Вкладка «Web-шпион» – содержит параметры шпиона для захвата элементов страницы.
Вкладка «Web-рекордер» – содержит параметры рекордера для записи действий в браузере.
Кнопка смены режима закрепления – плавающий или в боковой панели.

Вкладка «Web-шпион»

Опции «Полный XPath» / «Полный CSS-селектор» – переключают режим записи между коротким (относительным) и полным (абсолютным) путем.
Кнопка «Указать элемент» – активирует режим выбора объекта на странице.
Поля цXPath» и «CSS-селектор» – отображают полученные данные.
Переключатель «Режим поиска» – выбор типа селектора для проверки.
Кнопка «Найти элемент» – проверяет наличие элемента на странице по введенному селектору.
Кнопка «Сохранить» – передает данные в Студию.

Вкладка «Web-рекордер»

Опции «Полный XPath» / «Полный CSS-селектор» – переключают режим записи между коротким (относительным) и полным (абсолютным) путем.
Опция «Делать скриншоты элементов» – переключает режим создания скриншота захватываемого элемента.
Опция «Вставить после выбранного действия» – переключает режим вставки записанных действий на схему робота.
Индикатор браузера, в котором открыто расширение.
Кнопка «Начать» – активирует запись действий пользователя. Сменяется кнопками:
- «Пауза» – приостанавливает запись, дальнейшие действия не записываются.
- «Стоп» – останавливает запись, отправляет полученные данные в Студию.
- «Отменить» – отменяет запись, имеющиеся данные удаляются.

3. Порядок работы

Шпион

1. Выбор типа селектора
- Короткий путь (по умолчанию): создает лаконичные селекторы (например, //button[@id="login"]). Рекомендуется для стабильной работы.
- Полный путь: если активны чекбоксы «Полный...», генерируется абсолютный путь от корня страницы (/html/body/...). Используйте, если у элемента нет уникальных атрибутов.
Захват элемента
1. Откройте нужную веб-страницу.
2. Откройте виджет шпиона и нажмите «Указать элемент».
3. Наведите курсор на нужный объект (он подсветится) и нажмите ЛКМ.
4. Данные автоматически появятся в полях «XPath» и «CSS-селектор». Кнопка «Сохранить» станет активной.
  - Для отмены режима выбора до клика снова откройте виджет и нажмите «Отменить выбор элемента».
Проверка (валидация)
1. Выберите режим поиска (XPath или CSS-селектор).
2. Введите или измените значение в поле.
3. Нажмите «Найти элемент»:
  - Если элемент один — он подсветится на 2 секунды.
  - Если элементов несколько — отобразится их количество (подсветки не будет).
  - Если элементов нет — отобразится «Найдено элементов: 0».
Сохранение
- Нажмите «Сохранить». Данные будут мгновенно переданы в открытое окно создания/редактирования элемента в Студии.

Рекодер

Настройка параметров
- Короткий путь (по умолчанию): создает лаконичные селекторы (например, //button[@id="login"]). Рекомендуется для стабильной работы.
- Полный путь: если активны чекбоксы «Полный...», генерируется абсолютный путь от корня страницы (/html/body/...). Используйте, если у элемента нет уникальных атрибутов.
Запись действий
1. Откройте нужную веб-страницу.
2. Откройте виджет шпиона и нажмите «Начать».
  1. Если отсутствует открытый проект робота, начать запись не получится.
3. Для приостановки записи откройте виджет, нажмите «Пауза».
4. Для остановки записи нажмите «Стоп». Полученные данные будут переданы в Студию: будут созданы действия робота, повторяющие записанные действия пользователя, а также ресурсы робота, содержащие информацию об элементах, с которыми взаимодействовал пользователь.

4. Особенности работы

Связь со Студией: Для корректной работы не закрывайте Студию до окнчания работы со шпионом/рекордером.
Автономность: Расширение работает без доступа к интернету (в локальных сетях).

<script>
  AJS.toInit(function() {
    var toc        = document.querySelector('.toc-float');
    var aside      = toc.closest('.cell.aside');
    var mainHeader = document.getElementById('main-header');
    var auiHeader  = document.querySelector('nav.aui-header');
    var marginTop  = 10; // дополнительный отступ сверху

    // Вставка заголовка, если ещё не вставлен
    function insertHeader() {
      if (!toc.querySelector('.toc-header')) {
        var header = document.createElement('div');
        header.textContent = 'На этой странице:';
        header.className = 'toc-header';
        header.style.fontWeight = 'bold';
        header.style.marginBottom = '10px';
        toc.insertBefore(header, toc.firstChild);
      }
    }

    // Применение inline-стилей
    function applyStyles() {
      insertHeader();

      // Получаем ширину родителя
      var asideRect = aside.getBoundingClientRect();

      // Вычисляем вертикальный отступ
      var offset = 0;
      if (mainHeader) {
        var mhRect = mainHeader.getBoundingClientRect();
        if (mhRect.bottom > 0 && mhRect.top < window.innerHeight) {
          offset = mhRect.bottom;
        }
      }
      if (offset === 0 && auiHeader) {
        var ahRect = auiHeader.getBoundingClientRect();
        offset = ahRect.bottom;
      }
      var topOffset = Math.max(offset + marginTop, asideRect.top);

      Object.assign(toc.style, {
        position:     'fixed',
        top:          topOffset + 'px',
        left:         asideRect.left + 'px',
        width:        asideRect.width + 'px',
        maxHeight:    (window.innerHeight - topOffset - 20) + 'px',
        overflowY:    'auto',
        boxSizing:    'border-box',
        border:       '1px solid #ddd',
        borderRadius: '4px',
        padding:      '15px',
        zIndex:       'auto'
      });
    }

    // Инициалный вызов
    applyStyles();

    // Обновление при скролле, ресайзе окна
    window.addEventListener('scroll', applyStyles);
    window.addEventListener('resize', applyStyles);

    // Наблюдатель за изменением размеров родителя
    if (window.ResizeObserver) {
      new ResizeObserver(applyStyles).observe(aside);
    }
  });
</script>