Сравнение версий

Старая версия 2

changes.mady.by.user Vladislav Poltoratskiy

Сохранено

по сравнению с

Новая версия 3

changes.mady.by.user Vladislav Poltoratskiy

Сохранено

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.

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

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

1. Установка

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

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

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

Для Chrome:

  1. Скачайте и распакуйте архив с расширением.

  2. Перейдите на страницу chrome://extensions/.

  3. Включите «Режим разработчика» (Developer mode).

  4. Нажмите «Загрузить распакованное расширение» и выберите папку с файлами.

Для Firefox:

  1. Перейдите на страницу about:addons.

  2. Нажмите на иконку шестеренки -> «Установить дополнение из файла...».

  3. Выберите файл расширения в формате .xpi.

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

При По нажатии на иконку расширения открывается виджет со следующими элементами:

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

    • Чекбоксы «Полный XPath» / «Полный CSS-селектор»: переключают режим между коротким (относительным) и полным (абсолютным) путем.

    • Кнопка «Указать элемент»: активирует режим выбора объекта на странице.

    • Поля XPath и CSS-селектор: отображают полученные данные.

    • Переключатель «Режим поиска»: выбор типа селектора для проверки.

    • Кнопка «Найти элемент»: проверяет наличие элемента на странице по введенному селектору.

    • Кнопка «Сохранить»: передает данные в Студию.

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

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

Захват элемента

  1. Откройте нужную веб-страницу.

  2. Откройте виджет шпиона и нажмите «Указать элемент».

  3. Наведите курсор на нужный объект (он подсветится) и нажмите ЛКМ.

  4. Данные автоматически появятся в полях «XPath» и «CSS-селектор». Кнопка «Сохранить» станет активной.

    • Для отмены режима выбора до клика снова откройте виджет и нажмите «Отменить выбор элемента».

Выбор типа селектора

  • Короткий путь (по умолчанию): создает лаконичные селекторы (например, //button[@id="login"]). Рекомендуется для стабильной работы.

  • Полный путь: если активны чекбоксы «Полный...», генерируется абсолютный путь от корня страницы (/html/body/...). Используйте, если у элемента нет уникальных атрибутов.

Проверка (валидация)

  1. Выберите режим поиска (XPath или CSS-селектор).

  2. Введите или измените значение в поле.

  3. Нажмите «Найти элемент»:

    • Если элемент один — он подсветится на 2 секунды.

    • Если элементов несколько — отобразится их количество (подсветки не будет).

    • Если элементов нет — отобразится «Найдено элементов: 0».

Сохранение

Нажмите «Сохранить». Данные будут мгновенно переданы в открытое окно создания/редактирования элемента в Студии.

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

  • Связь со Студией: Для корректной работы не закрывайте Студию и страницу, на которой используется шпион.

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

  • Протоколы: Поддерживаются сайты на http:// и https://.

  • Динамические элементы: Шпион автоматически обрабатывает элементы с динамическими ID, стараясь подобрать стабильный путь.

Оглавление
classtoc-float

HTML
<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>