Редактор поведения — подробное руководство пользователя

Дата обновления: 2026-06-18

Оглавление

  1. Что это такое и зачем
  2. Основные термины
  3. Знакомство с экраном
  4. Как устроен сценарий: карточки, связи, потоки
  5. Работа на холсте: мышь, клавиши, подсказки
  6. Анатомия карточки
  7. Боковая панель и список карточек
  8. Переменные
  9. Точки входа: с чего начинается сценарий
  10. Справочник карточек (все действия)
  11. CSS-селекторы простыми словами
  12. Проверка сценария
  13. Запуск теста
  14. Сохранение, загрузка, история, буфер обмена
  15. Готовые рецепты: собираем сценарии по шагам
  16. Свой сервер для «Получить по ссылке» и «Отправить по ссылке»
  17. Ограничения и правила
  18. Частые вопросы

Что это такое и зачем

Когда обычный человек заходит на сайт, он что-то делает руками: ждёт пока страница
загрузится, читает текст, прокручивает её вниз колесом мыши, наводит курсор на
кнопки, кликает по ссылкам, печатает в поля. Это и есть поведение на странице.

Этот редактор позволяет заранее описать такое поведение — по шагам, как
инструкцию. Потом специальная программа («клиент») открывает ваш сайт и
выполняет эти шаги сама.

Зачем это нужно: чтобы посещения вашего сайта выглядели «живыми» — с реальными
действиями, а не просто «зашёл и ушёл». Вы один раз рисуете сценарий поведения, а
дальше он повторяется на каждом визите.

Самое важное: вы ничего не программируете. Вы собираете сценарий из готовых
кирпичиков — карточек. Каждая карточка — это один шаг («Ждать», «Кликнуть»,
«Прокрутить», «Если…»). Карточки соединяются стрелками: «сначала это, потом то».
Получается схема, очень похожая на блок-схему или на дорожную карту.

flowchart LR
    A["Вы рисуете<br/>сценарий из карточек"] --> B["Сохраняете"]
    B --> C["Клиент открывает сайт<br/>и повторяет ваши шаги"]

Основные термины

Термины, которые встречаются дальше в руководстве.

Слово Что это
Сценарий Всё поведение, которое вы собираете в редакторе: карточки-шаги, соединённые стрелками. Именно сценарий потом выполняет клиент.
Карточка Один шаг сценария (в списке слева такие шаги называются «Действия»). Например, «Ждать» делает паузу, «Клик на» нажимает на элемент.
Цепочка Несколько карточек подряд, соединённых стрелками, — то, что выполняется по порядку.
Связь / стрелка Линия между карточками. Показывает порядок: «после этой карточки перейти к той».
Порт Кружок-стрелочка на краю карточки, к которому цепляется связь. Вход — слева, выход — справа.
Точка входа Карточка, с которой сценарий начинается. Без неё ничего не запустится. Главная — «Начало сценария».
Элемент Любая «деталь» страницы: кнопка, ссылка, картинка, поле для ввода, заголовок.
CSS-селектор «Адрес» элемента на странице — короткая строчка, по которой клиент понимает, по какой именно кнопке кликать. Подробно — в разделе CSS-селекторы простыми словами.
Домен Основная часть адреса сайта: в https://example.com/page домен — это example.com.
Переменная Именованная «коробочка» для значения (числа или текста): на одном шаге кладём, на другом достаём.
Клиент Программа, которая на самом деле открывает сайт и выполняет ваш сценарий. Для запуска теста нужен установленный клиент LiveSurf.
Вкладка Одно открытое окно сайта.
Задание (визит) Один прогон сценария на сайте — это один посетитель. По умолчанию сценарий идёт в одной вкладке; новые вкладки появляются, только если их открывает сам сценарий или сайт (как в обычном браузере). Если вкладок несколько, делить данные между ними можно через общие переменные 🌐.
Холст Большое рабочее поле, по которому разложены карточки. Его можно двигать и приближать.

Маленький пример сценария в виде схемы — чтобы было видно, как слова складываются:

flowchart TD
    T(["▶ Начало сценария<br/>(после загрузки страницы)"]) --> W["Ждать 1–2 секунды"]
    W --> Q{"Есть на странице<br/>кнопка согласия с cookie?"}
    Q -->|да| C["Кликнуть по кнопке"]
    Q -->|нет| E["Ничего не делать"]

Здесь: точка входа запускает цепочку, дальше пауза, потом проверка «есть ли
кнопка», и в зависимости от ответа — два разных пути.

Знакомство с экраном

Откройте редактор. Вот как выглядит весь экран (тут уже загружен пример сценария,
чтобы было видно карточки):

Общий вид редактора

Экран делится на несколько областей:

  • Верхняя панель (тулбар) — кнопки для файлов, отмены/повтора, проверки и
    запуска теста, а справа — выбор языка.
  • Боковая панель слева — две части: сверху «Переменные», ниже
    «Действия» (список всех ваших карточек с поиском).
  • Холст (большое поле справа) — здесь вы раскладываете карточки и соединяете их.
  • Консоль (внизу) — сюда выводятся подсказки, результаты проверки и пошаговый
    отчёт во время теста. Открывается/сворачивается кликом по нижней полоске.
  • Полоска подсказок (в самом низу) — показывает, что можно сделать мышью и
    клавишами прямо сейчас (меняется в зависимости от того, на что наведён курсор).
  • Синий кружок чата (справа внизу) — встроенный помощник: отвечает на вопросы о
    редакторе и помогает собрать сценарий.

Верхняя панель по кнопкам

📷 Заглушка под скриншот: верхняя панель редактора — кнопки «Сохранить», «В файл»,
«Из файла», «Очистить» и полоса связи с формой (статус, группа, URL).

Вверху также есть полоса связи с формой: статус «Сохранено» / «Есть несохранённые
изменения», Группа и URL страницы (их задаёт форма), а также «Перейти к
форме» и «Закрыть редактор». Подробнее — в разделе
Сохранение.

Кнопка Что делает
Сохранить Записать сценарий обратно в форму (Ctrl+S). Рядом — статус: есть ли несохранённые изменения.
В файл Скачать сценарий в файл .json — резервная копия или перенос.
Из файла Загрузить сценарий из сохранённого .json (заменит текущий).
Очистить Очистить сценарий и начать с чистого листа.
Отмена / Повтор Откатить последнее действие назад / вернуть его обратно.
Копировать / Вставить Скопировать выделенные карточки и вставить их.
Проверка Проверить сценарий на ошибки. Ошибки появятся в консоли.
Запустить тест Открыть форму запуска теста (см. Запуск теста).
Красный/зелёный кружок Состояние связи с клиентом для теста (красный — не подключён).

На заметку. Многие кнопки дублируются горячими клавишами (их полный список — в
разделе Горячие клавиши) и пунктами меню по правому клику.
Пользуйтесь тем, что удобнее.

Как устроен сценарий: карточки, связи, потоки

Сценарий — это набор карточек, соединённых стрелками: каждая карточка — это шаг,
а стрелки задают порядок «сначала это, потом то».

Правила простые:

  1. У сценария есть точка входа — карточка, с которой всё начинается. Чаще
    всего это «Начало сценария» (запускается, когда страница загрузилась).
  2. От карточки к карточке управление идёт по связи (стрелке) из выхода
    одной карточки во вход другой.
  3. Большинство карточек имеют один вход (слева) и один выход (справа): «сделал шаг
    → перешёл к следующему».
  4. Особая карточка «Если» имеет два выхода: зелёный «да» и красный
    «нет». По какому пойти — зависит от проверки.
  5. Из одного выхода можно провести несколько связей сразу. Тогда на каждом
    проходе клиент пойдёт по одной из них, выбранной случайно — так поведение
    «разнообразят» (иногда один путь, иногда другой). Это работает у любого действия;
    а карточка «Ветвление» добавлена как раз для таких развилок — чтобы оформить их
    аккуратно. Исключение — точки входа («Начало сценария», «Начало по переменной»,
    «Начало по событию»): они ведут к одному следующему шагу, случайного выбора у них
    нет.

Вот наш пример «дождись кнопку, иначе прокрути и попробуй снова» на холсте:

Сценарий на холсте: карточки, связи, порты

Та же логика в виде схемы:

flowchart TD
    S(["▶ Начало сценария"]) --> IF{"Если: на странице<br/>есть кнопка .cta-button?"}
    IF -->|да ✓| CL["Клик на кнопку"]
    IF -->|нет ✕| SC["Прокрутка вниз"]
    SC --> WT["Ждать 0,8–1,5 сек"]
    WT --> IF

Что здесь происходит: после загрузки проверяем, видна ли кнопка. Если да —
кликаем (конец). Если нет — прокручиваем страницу вниз, ждём немного и
проверяем снова. Получается «цикл ожидания»: листаем, пока кнопка не появится.

Цвет кружков-портов на карточке «Если» подсказывает ветку: зелёный — выход «да»,
красный — выход «нет». Оранжевым подсвечены порты, к которым уже подключена
связь, — так видно, какие выходы ещё свободны.

Сценарий можно сохранять незавершённым. Если у какой-то карточки выход пока
никуда не ведёт или точка входа ни к чему не подключена — это не ошибка, редактор
сохранит как есть. Это удобно, когда вы собираете сценарий постепенно.

Работа на холсте: мышь, клавиши, подсказки

Здесь — всё про «руки»: как добавлять карточки, двигать их, соединять, выделять,
двигать и приближать холст.

Добавить карточку

Кликните правой кнопкой мыши по пустому месту холста — откроется меню со всеми
действиями, разложенными по группам:

Меню добавления карточки

  • Сверху есть строка поиска (с лупой): просто начните печатать название — список
    отфильтруется. Поиск понимает и русские, и английские слова.
  • Кликните по нужному пункту — карточка появится в том месте, где вы вызвали меню.

Группы в меню (сверху вниз): Сценарий, Страница, Элементы, Логика,
Обмен, Организация. Что лежит в каждой — см.
Справочник карточек.

Соединить две карточки (создать связь)

  1. Наведите курсор на выходной порт карточки (кружок-стрелочка справа).
  2. Зажмите левую кнопку мыши и тяните — за курсором потянется белая линия.
  3. Отпустите кнопку над другой карточкой (или над её входным портом слева) —
    связь создана.

Хитрость: если отпустить линию на пустом месте, откроется то же меню действий,
и новая карточка сразу будет подключена к вашей связи. Очень быстро строить цепочки.

У карточки «Если» тяните из зелёного порта (ветка «да») или из красного
(ветка «нет») — так вы зададите, что делать в каждом случае.

Удалить связь

Кликните по линии связи правой кнопкой мыши — связь удалится.

Двигать, выделять, приближать

Что нужно Как сделать
Передвинуть карточку Тянуть её за заголовок (верхнюю цветную полоску).
Подвинуть весь холст (панорама) Тянуть левой кнопкой за пустое место (или за тело карточки, не за заголовок).
Приблизить/отдалить (зум) Крутить колесо мыши. Масштаб — от 10% до 200%.
Выделить одну карточку Кликнуть по её телу левой кнопкой.
Добавить/убрать из выделения Ctrl + клик по карточке (можно выбрать несколько).
Выделить рамкой Shift + зажатая левая кнопка по пустому месту — растянуть прямоугольник.
Снять выделение Кликнуть по пустому месту холста.
Переместить несколько сразу Выделить несколько карточек и тянуть одну из них за заголовок — поедут все.

Горячие клавиши

Основные сочетания (работают на холсте):

Клавиши Действие
Ctrl + Z Отменить
Ctrl + Shift + Z Повторить (вернуть отменённое)
Delete или X Удалить выделенные карточки
Ctrl + C Копировать выделенное
Ctrl + V Вставить
Ctrl + S Сохранить

Кроме них, в отдельных местах работают ещё несколько клавиш:

Клавиша Где и что делает
Escape Закрыть открытое меню добавления карточки или всплывающее окно.
печать букв Когда открыто меню добавления карточки — фильтрует список по названию (Backspace стирает введённый символ).
Enter Подтвердить значение в поле, где есть кнопка сохранения (✎); отправить сообщение помощнику в чате.

Полоска подсказок внизу

В самом низу всегда есть строка-подсказка. Она меняется в зависимости от того,
куда наведён курсор, и показывает доступные жесты:

Полоска подсказок

Что вы там увидите (примеры): «Соединить» (когда курсор над портом), «Удалить
связь» (над линией), «Меню» (над пустым местом — правый клик), «Зум» (колесо
мыши), «Добавить к выделению» (Ctrl+клик над карточкой), «Сохранить» (Ctrl+S) и т.д.
Это удобная «шпаргалка», которая всегда под рукой.

Анатомия карточки

Любая карточка устроена одинаково. Разберём на примере карточки «Если»:

Устройство карточки «Если»

  1. Заголовок (цветная полоска сверху) — название действия. За него карточку
    тянут по холсту. Справа в заголовке — кнопка «?» (помощь).
  2. Кнопка «?» — короткая справка по этой карточке. Нажмёте — текст справки
    появится в консоли внизу (это не всплывающее окно, а сообщение в журнале).
  3. Поле «ID» — короткое имя карточки (например check). Это имя вы видите в
    списке слева (строка вида «Если: check») и в сообщениях после «Проверки» и теста —
    по нему удобно быстро находить нужную карточку, когда их много. Имя подставляется
    автоматически, так что трогать его не обязательно; но если переименовать во
    что-то понятное (например checkButton), большой сценарий будет легче читать.
    Требования: 3–15 символов, латинские буквы и цифры, у разных карточек имена не
    должны повторяться.
  4. Входной порт — кружок-стрелка слева (сюда приходят связи).
  5. Выходные порты — справа. У обычных карточек один выход. У «Если» — два:
    зелёный ✓ «да» (вверху) и красный ✕ «нет» (внизу).
  6. Тело карточки — поля с настройками именно этого действия (у «Если» это тип
    проверки и CSS-селекторы).

Порт, к которому уже подключена связь, подсвечивается оранжевым. Так с одного
взгляда видно, какие выходы уже задействованы, а какие «висят» пустыми.

Некоторые карточки портов не имеют вовсе: например «Начало сценария» имеет
только выход (входа нет — это старт), а «Конец сценария» — только вход (дальше идти
некуда). Оформительские карточки «Группа» и «Заметка» портов не имеют.

Боковая панель и список карточек

Слева, в части «Действия», дублируется список всех карточек сценария. Это
удобно, когда карточек много и искать их глазами на холсте долго.

В строке каждой карточки есть кнопки:

  • ⦿ (навести) — плавно перемещает холст так, чтобы эта карточка оказалась в
    центре экрана. Незаменимо в больших сценариях.
  • ✕ (удалить) — удаляет карточку.
  • ● (точка-предупреждение) — появляется, если у карточки есть свободный
    выход     (связь ещё никуда не ведёт). Это подсказка «ты забыл соединить».

Сверху есть поиск — фильтрует список по названию, ID и тексту внутри карточки.

Клик по строке — выделяет карточку (и на холсте тоже). Двойной клик — наводит на неё
холст. Выделение в списке и на холсте всегда синхронно.

Переменные

Что это и зачем

Переменная — это именованная «коробочка», в которую можно положить значение
(число или текст) и потом достать его в другом шаге. Это память вашего сценария.

Зачем:

  • Запомнить что-то со страницы (например, текст или адрес ссылки) и
    использовать дальше.
  • Посчитать (например, сколько раз вы кликнули — счётчик).
  • Подставить значение в текст или в CSS-селектор.
  • Проверить в карточке «Если» (например, «если счётчик меньше 5 — повторить»).

Панель «Переменные» (кнопка ▼/▲ разворачивает её, а ⤢ открывает в отдельном
большом окне):

Список переменных

Как создать переменную

Нажмите «Добавить переменную» — откроется форма:

Форма создания переменной

Заполните:

  • Имя — как будете обращаться к коробочке. Правила: от 3 до 15 символов,
    можно буквы (в т.ч. русские), цифры, _ и -. Примеры: счётчик, имя,
    my_var, адрес. Двух переменных с одинаковым именем быть не может.
  • Тип — что в коробочке:
    • Целое число — для счётчиков и чисел;
    • Строка — для текста.
  • Начальное значение (опционально) — что лежит в коробочке в самом начале. Для
    числа по умолчанию 0, для строки — пусто.
  • Общая на задание (видна всем вкладкам) — галочка; о ней ниже.

Нажмите «Добавить» — переменная появится в списке.

Подсказка. Часто переменную даже не нужно создавать вручную: когда вы
выбираете «новую» переменную прямо в поле карточки (например в «Запомнить
атрибут»), редактор создаёт её сам.

Как вставить переменную в текст или селектор

Чтобы подставить значение переменной в поле, пишите её имя в фигурных скобках:
{имя}. Во время выполнения {имя} заменится на текущее значение.

Примеры:

  • Текст: Привет, {имя}! → во время визита станет Привет, Анна!
  • Селектор: a[href*="livesurf.org"] → подставит текущий домен страницы.

Обычные и общие переменные

В одном визите (один посетитель) может появиться несколько вкладок — но только
если их открывает сам сценарий или сайт, как в обычном браузере. От этого
зависит, как ведёт себя переменная:

  • Обычная — у каждой вкладки своя коробочка. Что одна вкладка записала,
    другие не видят.
  • Общая на задание (помечена значком 🌐) — одна на все вкладки. Что
    записала одна вкладка, тут же видят остальные. Удобно для общих счётчиков и
    лимитов на весь визит.
flowchart TB
    subgraph O["Обычная переменная — у каждой вкладки своя"]
      A["Вкладка 1<br/>счётчик = 3"]
      B["Вкладка 2<br/>счётчик = 1"]
    end
    subgraph S["Общая 🌐 — одно значение на весь визит"]
      C["Вкладка 1"] --> H[("всегоКликов = 4")]
      D["Вкладка 2"] --> H
    end

Системные переменные

Несколько переменных уже существуют всегда — их создаёт сам клиент во время
визита. Их нельзя удалить, переименовать или присвоить им значение вручную (они
помечены кнопкой «?» вместо кнопок редактирования), но ссылаться на них можно —
через {имя} и в проверках.

Имя Тип Что хранит
time число сколько секунд прошло с момента готовности страницы (сбрасывается при переходе/перезагрузке)
domain текст домен текущей страницы, например example.com
device текст тип устройства: desktop или mobile
tab_id текст уникальный номер вкладки (у каждой вкладки свой)
viewport_w число ширина экрана устройства
viewport_h число высота экрана устройства
:last-element текст «адрес» последнего элемента, с которым работали (см. карточку «Запомнить элемент»)

Редактирование и удаление

В строке переменной (в списке) есть кнопки:

  • ⦿ — показать карточки, которые используют эту переменную (по очереди наводит
    на каждую). Появляется только если переменная где-то используется.
  • ✎ — изменить значение.
  • ✕ — удалить переменную. Если её где-то использовали, в тех карточках поле
    переменной просто очистится.

Точки входа: с чего начинается сценарий

Карточки сами по себе не запустятся. Нужна точка входа — особая карточка,
которая говорит «начни отсюда, когда случится вот это». Точек входа три вида.

flowchart LR
    T(["▶ Начало сценария<br/>(страница загрузилась)"]) --> B1["первый шаг…"]
    V(["🎯 Начало по переменной<br/>(значение пересекло порог)"]) --> B2["первый шаг…"]
    E(["⚡ Начало по событию<br/>(сработало событие)"]) --> B3["первый шаг…"]

Начало сценария (главная точка входа)

Это самая частая точка входа. Запускает цепочку, когда страница готова.

Карточка «Начало сценария»

Настройки:

  • Тип события:
    • После загрузки — срабатывает сразу, как только страница полностью
      загрузилась. Это обычный выбор.
    • Перед завершением — срабатывает ближе к концу визита (когда до конца показа
      остаётся ~10% времени, но не позже чем за 10 секунд). Прерывает цепочку,
      запущенную «После загрузки». Удобно для «прощальных» действий.
  • Режим URL:
    • Любая страница — сработает на любом адресе. Такой режим можно включить
      только для одной стартовой карточки каждого типа события (иначе будет
      непонятно, какая из них главная).
    • Конкретные страницы — укажите адреса или шаблоны; цепочка запустится, только
      если адрес совпал. Можно добавить несколько строк кнопкой «+ Добавить строку».

Если есть и «конкретные», и «любая» — сначала проверяются конкретные; если ни одна
не совпала, сработает «любая страница» (если такая карточка добавлена).

Начало по переменной 🎯

Это точка входа (как «Начало сценария»), но запускается не по загрузке страницы, а
когда значение переменной пересекает заданный порог. Удобно для лимитов и реакций
в духе «как только насчитали столько-то — сделать вот это»: вам не нужно после каждого
шага вручную вставлять проверку «Если» — этот узел следит за переменной сам и
срабатывает, даже если вкладка в этот момент занята другими шагами.

Настройки. Переменная, оператор (<, >, =) и значение — задаются как в
карточке «Если». Плюс режим: «Каждый раз» или «Один раз» (за вкладку).

Главное: узел срабатывает в момент ПЕРЕСЕЧЕНИЯ порога — один раз, а не всё время,
пока условие верно.

Разберём на примере. Пусть условие — кликов > 50, и переменная кликов постепенно
растёт:

Значение кликов Что делает узел
0, 1, 2 … 50 молчит — порог ещё не пересечён
стало 51 срабатывает один раз и запускает свою цепочку (например, «Конец сценария»)
52, 60, 70 молчит — значение уже «в зоне», повторно не срабатывает
опустилось до 50 или ниже «взводится» заново
снова стало больше 50 срабатывает ещё раз

То есть чтобы узел сработал повторно, значение должно сначала выйти из зоны и
снова в неё войти.

Ещё пара деталей:

  • Значение проверяется примерно раз в секунду — реакция не мгновенная.
  • Одну переменную может «сторожить» только один такой узел.
  • Если следить за общей 🌐-переменной, узел заметит и изменения, сделанные
    другими вкладками.

Событие ⚡ и «Начало по событию»

Эта пара карточек закрывает две задачи.

1. Повторное использование. Запускать один и тот же кусок сценария из разных
мест, не копируя его: «Событие» ставите там, где нужно, а сами шаги описываете один
раз — у приёмника.

2. Согласование между вкладками. Визит — это один посетитель, и сценарий по
умолчанию идёт в одной вкладке. Но сам сценарий (или сайт) может открыть новые
вкладки — ровно как в обычном браузере: переход, Ctrl+клик по ссылке, ссылка с
target="_blank", действие, открывающее вкладку (всего в одном визите их бывает
не больше 4). Когда вкладок становится несколько,
каждая проходит сценарий сама по себе, ничего не зная о других. (Ту же
многовкладочность вы уже видели у
переменных: обычные — свои у каждой вкладки, общие 🌐 —
одни на всех.) Обычно так и нужно. Но иногда какой-то шаг нельзя делать в
каждой вкладке — его надо выполнить один раз на всех или по одной вкладке за раз.
Классический пример: сценарий открыл карточку товара в нескольких вкладках, но отзыв
нужно оставить один, а не из каждой. Сами вкладки «договориться» между собой не могут — и вот это
решает приёмник: у него есть режим, то есть правило «сколько вкладок и как»
выполнят этот кусок. Обычными карточками или «Началом по переменной» такого надёжно не
добиться.

Как устроена пара:

  • «Событие» — карточка-сигнал: когда выполнение доходит до неё, она вызывает
    приёмник с тем же именем.
  • «Начало по событию» ⚡ — приёмник: по такому вызову запускает свою цепочку.
flowchart LR
    A["Событие<br/>имя: модалка"] -->|"сигнал"| EV(("событие<br/>модалка"))
    B["другое «Событие»<br/>имя: модалка"] -->|"сигнал"| EV
    EV -->|"приёмник ⚡ (один)"| R["Начало по событию"]
    R --> H["…закрыть всплывашку…"]

Правило: карточек «Событие» с одним именем может быть сколько угодно, а
приёмник ⚡ на это имя — только один. Связываются они по имени (поэтому линию
между ними рисовать не надо); чтобы быстро перейти к парной карточке, нажмите
кнопку-переход ⦿.

Как именно срабатывает. Сигнал не рассылается по вкладкам: когда «Событие»
срабатывает в какой-то вкладке, ветка приёмника запускается в этой же вкладке.
Другие вкладки на это сами не реагируют — каждая запустит ветку только когда дойдёт до
«Событие» уже у себя. А сколько вкладок и как это сделают — определяет режим
приёмника (пример — когда сценарий открыл 4 вкладки):

Режим Что делает
Каждый раз Любая вкладка, дойдя до «Событие», запускает ветку у себя — без ограничений.
Один раз на вкладку Вкладка запускает ветку только при первом своём сигнале; повторные в той же вкладке пропускаются.
Один раз на задание Ветку запустит только одна вкладка — та, что дошла до «Событие» первой; остальные, дойдя, пропустят. Один раз на всё задание — удобно, когда шаг нужен один на всех (оставить один отзыв, отправить одно уведомление).
Одна активная вкладка (с передачей) Право на ветку «держит» одна вкладка; пока она жива, другие вкладки, доходя до «Событие», ветку не запускают. Закрылась держащая — право переходит к другой. «Один работник» с подстраховкой.
По очереди (все вкладки) Ветку могут запускать все вкладки, но не одновременно: пока одна выполняет ветку, в это время её не запустит другая — каждая в свой черёд.

Во всех режимах ветка всегда выполняется в той вкладке, где сработало «Событие» —
режим лишь решает, разрешить ли этой вкладке запуск.

Три похожих режима, чтобы не путать: «на задание» — один раз и всё; «одна
активная» — работает одна вкладка, а отвалится — подхватит другая; «по очереди» —
могут все, но строго не одновременно.

Чтобы из приёмника запустить несколько действий, ведите от него обычную цепочку через
выход (порт) к следующим карточкам.

Справочник карточек (все действия)

Здесь — каждая карточка из меню, по группам. У каждой описано: зачем она нужна,
её настройки и короткий пример. А где это важно, есть блок
⚙️ Что будет при выполнении — как карточка поведёт себя на реальной странице
(«что будет, если…»).

Как карточки находят элементы

Почти все карточки групп «Страница» и «Элементы» работают с элементами по
CSS-селекторам (что это и как писать — в разделе
CSS-селекторы простыми словами; несколько строк
добавляются кнопкой «+ Добавить строку»). Вот общие правила — они одинаковы везде,
поэтому в самих карточках не повторяются.

  • Несколько строк-селекторов перебираются сверху вниз: берётся первая
    строка, по которой на странице что-то нашлось    . Удобно как «запасные варианты»:
    не нашли по первой примете — пробуем следующую.
  • Если под выбранную строку подходит несколько элементов — действие по одному
    элементу (клик, наведение, фокус и т.п.) возьмёт один из них; действие,
    меняющее элементы (например «Удалить элемент», «Установить атрибут»), применится
    ко всем найденным. Чтобы попадать точно в нужный — делайте селектор конкретнее.
  • По умолчанию ищутся только видимые элементы (которые реально видно глазу и
    которые не перекрыты сверху). Это защищает от случайного попадания в скрытый
    «шаблон-дубль».
  • Поиск дотягивается и до встроенных страниц (iframe). iframe — это отдельная
    страница, вставленная внутрь основной (так подключают, например, формы оплаты,
    встроенные видео или виджеты комментариев). Сначала элемент ищут на самой странице;
    если там его нет — автоматически заглядывают внутрь встроенных страниц первого
    уровня     (вставленных прямо в основную). Настраивать для этого ничего не нужно. А чтобы
    прицельно указать элемент внутри конкретной встроенной страницы или забраться
    глубже, селектор пишут особым образом (см.
    «Элементы внутри встроенных страниц (iframe)»).
  • Если элемент так и не найден — шаг просто пропускается, и сценарий идёт дальше.
    Единственное исключение — карточка «Если»: при «не найдено» она уходит в ветку
    «нет».
  • Значение переменной ({имя}) — в том числе встроенной livesurf.org (домен
    текущей страницы) — подставляется прямо перед выполнением шага (берётся
    актуальное значение на этот момент). Если переменной нет — подставится пустая строка.
  • Между шагами клиент делает небольшие паузы, а сразу после загрузки страницы —
    короткую случайную задержку. Это сделано, чтобы поведение выглядело «по-живому»; от
    вас ничего не требуется.

Галочка «работать с невидимыми элементами»

У всех карточек, которые ищут элемент по CSS-селекторам, есть галочка, которая
разрешает работать с элементом, даже если он сейчас намеренно скрыт стилями.
Подпись у неё на каждой карточке своя — по смыслу действия:

Карточка Подпись галочки
Клик на Кликать невидимые
Перемещение к элементу Наводить на невидимые
Прокрутка (режим «До элемента») Прокручивать к невидимым
Фокусировка Фокусировать невидимые
Запомнить элемент Искать невидимые
Если (режим «Элемент на странице») Учитывать невидимые

Работает она везде одинаково:

  • Выключена (по умолчанию) — элемент должен быть видим глазу. Обычным страницам
    так и нужно.
  • Включена — разрешает работать с элементом, который намеренно скрыт стилями
    (например, прозрачный или невидимый), но по которому всё равно можно кликнуть.
    Полностью «выключенные» (без места на странице) и перекрытые сверху элементы
    игнорируются всегда — иначе клик ушёл бы «в пустоту».
  • Когда включать: целевой элемент специально спрятан стилями, но по нему нужно
    кликнуть — частый случай у стилизованных чекбоксов, переключателей и кнопок загрузки
    файла (настоящий элемент скрыт, а сверху нарисован свой). Когда не включать: на
    обычных страницах оставляйте выключенной, иначе можно случайно кликнуть скрытый дубль.

Группа «Сценарий»

Карточки, которыми сценарий начинается и заканчивается. Всё, кроме «Конца», —
это точки входа: «спусковые крючки», которые говорят, когда запустить цепочку
(у них есть только выход). Полный разбор каждой — в разделе
«Точки входа»; ниже — то же карточками.

Начало сценария

Карточка «Начало сценария»

  • Зачем. Главная и самая частая точка входа. Запускает цепочку, когда страница
    загрузилась    .
  • Настройки.
    • Тип события — «После загрузки» (обычный выбор) или «Перед завершением»
      (ближе к концу визита, для «прощальных» действий).
    • Режим URL — «Любая страница» или «Конкретные страницы» (адреса/шаблоны, на
      которых сценарий должен сработать).
  • ⚙️ Что будет при выполнении. Как только условие совпало, от выхода карточки
    начинает выполняться цепочка.
  • Подробнее: раздел «Точки входа».

Начало по переменной 🎯

Карточка «Начало по переменной»

  • Зачем. Точка входа, которая срабатывает не по загрузке страницы, а в момент,
    когда значение переменной пересекает заданный порог    . Удобно для лимитов и реакций
    «как только насчитали столько-то — сделать вот это».
  • Настройки. Переменная, оператор (<, >, =) и значение (задаются как в «Если»);
    плюс режим — «Каждый раз» или «Один раз».
  • ⚙️ Что будет при выполнении. Срабатывает один раз в момент пересечения порога
    (а не всё время, пока условие верно); значение проверяется примерно раз в секунду.
    Одну переменную может «сторожить» только один такой узел.
  • Подробнее: раздел «Точки входа».

Событие

Карточка «Событие»

  • Зачем. Карточка-сигнал: когда выполнение доходит до неё, она вызывает приёмник
    «Начало по событию» с тем же именем. Позволяет переиспользовать один кусок сценария
    из разных мест и согласовывать действия между вкладками.
  • Настройки. Имя события — по нему карточка связывается с приёмником (линию
    между ними рисовать не надо).
  • ⚙️ Что будет при выполнении. Сигнал запускает ветку приёмника в той же вкладке.
    Карточек «Событие» с одним именем может быть сколько угодно.
  • Подробнее: раздел «Точки входа».

Начало по событию ⚡

Карточка «Начало по событию»

  • Зачем. Приёмник: по сигналу от карточки «Событие» с тем же именем запускает свою
    цепочку. Дальше от его выхода ведите обычную цепочку шагов.
  • Настройки.
    • Событие — имя, на которое реагировать (на одно имя приёмник — только один).
    • Режим — сколько вкладок и как выполнят ветку: «Каждый раз», «Один раз на
      вкладку», «Один раз на задание», «Одна активная вкладка (с передачей)», «По очереди
      (все вкладки)».
  • ⚙️ Что будет при выполнении. Ветка всегда выполняется в той вкладке, где сработало
    «Событие»; режим лишь решает, разрешить ли этой вкладке запуск.
  • Подробнее: раздел «Точки входа».

Конец сценария

Карточка «Конец сценария»

  • Зачем. Останавливает выполнение цепочки. Дальше шагов нет.
  • Настроек нет. У карточки только вход.
  • Пример. Поставьте «Конец сценария» после ветки «нет» в проверке, если по этой ветке
    больше делать нечего.

Группа «Страница»

Действия, имитирующие то, что человек делает руками: кликает, печатает, листает.

Клик на

Карточка «Клик на»

  • Зачем. Нажать на элемент (кнопку, ссылку, картинку) или кликнуть в той точке,
    где сейчас стоит курсор. Это самое частое действие на странице.
  • Настройки.
    • Режим клика — две разные ситуации:
      • «Клик по элементу» — обычный случай: вы задаёте, по чему кликнуть
        (CSS-селекторы), а клиент сам находит элемент
        и нажимает на него.
      • «Клик в позиции курсора» — нажимает там, где курсор стоит сейчас, ничего
        не разыскивая. Ставят после «Перемещение к элементу» (курсор уже наведён) или
        когда нужно кликнуть несколько раз по одному и тому же месту.
    • CSS-селекторы (в режиме «по элементу») — по чему кликать.
    • Кликать невидимые — разрешить клик по скрытому стилями элементу (см.
      «Как карточки находят элементы»).
    • Кнопка мыши — левая, средняя или правая. Обычно нужна левая; правая
      вызывает контекстное меню, средняя часто открывает ссылку в новой вкладке. На
      мобильных визитах кнопка мыши не используется.
    • Количество кликов (появляется только в режиме «в позиции курсора») — сколько
      нажатий подряд, например 2 — двойной клик. В режиме «по элементу» клиент всегда
      делает один клик, поэтому там этого поля нет.
    • Удержание — не отпускать кнопку после нажатия. Нужно для перетаскивания:
      зажали здесь → передвинулись «Перемещением к элементу» → отпустили карточкой
      «Отпустить кнопку мыши».
    • Модификаторы клавиш — держать Shift / Ctrl / Alt во время клика (как на обычном
      сайте: например, Ctrl+клик по ссылке часто открывает её в новой вкладке).
  • ⚙️ Что будет при выполнении. В режиме «по элементу» клиент прокручивает страницу
    к элементу, наводит на него курсор и кликает; если элемент не найден — шаг
    пропускается. В режиме «в позиции курсора» нажимает в текущей точке нужное число раз.
  • Пример. «Клик по элементу» с селектором .cookies-accept — нажать кнопку
    согласия с cookie.

Ввод текста

Карточка «Ввод текста»

  • Зачем. Напечатать текст или нажать клавишу (Enter, Tab, стрелки и т.п.). Печатает
    в то поле, которое сейчас в фокусе, поэтому обычно перед этим ставят
    «Фокусировка» или клик по полю.
  • Настройки.
    • Строки — список вариантов текста. При каждом запуске выбирается один
      случайный       (несколько строк = разнообразие: в один визит напечатается одно, в
      другой — другое). В тексте работает подстановка {имя_переменной}.
    • Спец-клавиша — вместо текста в строке можно выбрать из списка клавишу: Enter
      (отправить форму), Tab (перейти к следующему полю), Backspace / Delete
      (стереть символ), Пробел, стрелки ↑ ↓ ← →.
    • Количество повторов — сколько раз повторить ввод подряд; на каждый повтор
      вариант выбирается заново (например, Backspace с повтором 10 — очистить поле).
  • ⚙️ Что будет при выполнении. Текст набирается по-человечески — по буквам, с
    паузами. Если ни одно поле не в фокусе, печатать будет некуда — сначала наведите
    фокус.
  • Пример. «Фокусировка» на поле поиска → «Ввод текста» со строкой купить телефон
    → ещё одна «Ввод текста» со спец-клавишей Enter (напечатать запрос и отправить).

Прокрутка

Карточка «Прокрутка»

  • Зачем. Пролистать страницу — показать нужную её часть. Заодно это выглядит
    по-живому и подгружает контент, который появляется при прокрутке (ленты, «ещё товары»).
  • Настройки — режим прокрутки:
    • До элемента — пролистать так, чтобы нужный элемент оказался на виду (нужны
      CSS-селекторы). Удобно перед кликом по кнопке, которая внизу страницы.
    • До нижней границы — пролистать к нижнему краю окна.
    • До верхней границы — к верхнему краю окна.
    • До нужного места (в %) — на заданную долю высоты страницы: 0 — самый верх,
      100 — самый низ, 50 — середина. Процент можно задать числом или взять из переменной.
    • В режиме «До элемента» — галочка «Прокручивать к невидимым» (см.
      «Как карточки находят элементы»).
  • ⚙️ Что будет при выполнении. Листает плавно, «по-живому». «До элемента» только
    пролистывает к элементу — курсор не наводит и не кликает (для этого есть отдельные
    карточки); не нашёл элемент — шаг пропускается. «До нужного места (в %)» выбирает
    направление в начале и не «отскакивает» назад, если чуть перелистнул.
  • Пример. «До нужного места (в %)» = 50 — пролистать до середины статьи.

Отпустить кнопку мыши

Карточка «Отпустить кнопку мыши»

  • Зачем. Отпустить кнопку мыши, которую до этого зажали и держали («Клик на» с
    включённым «Удержанием»). Это вторая половина перетаскивания: зажали элемент →
    переместились к новому месту → отпустили здесь.
  • Настройки. Кнопка мыши — какую отпустить (должна совпадать с той, что
    удерживали в «Клик на»).
  • ⚙️ Что будет при выполнении. Если эта кнопка сейчас не зажата — шаг ничего не делает.
  • Пример. «Клик на» (Удержание) по товару → «Перемещение к элементу» на корзину →
    «Отпустить кнопку мыши» — перетащить товар в корзину.

Перемещение к элементу

Карточка «Перемещение к элементу»

  • Зачем. Подвести курсор к элементу (предварительно пролистав к нему). Нужно,
    чтобы навести мышь — например, раскрыть меню, появляющееся при наведении, — поставить
    курсор перед «Клик в позиции курсора» или вести перетаскивание.
  • Настройки.
    • CSS-селекторы — к какому элементу двигаться.
    • Перетаскивание (Drag) — двигаться с «зажатой мышью» (для перетаскивания между
      «Клик на» с удержанием и «Отпустить кнопку мыши»; на мобильных — провести пальцем).
    • Наводить на невидимые (см. «Как карточки находят элементы»).
  • ⚙️ Что будет при выполнении. Сначала пролистывает к элементу, затем наводит на
    него курсор. Сам не кликает — после него обычно ставят «Клик в позиции курсора».
    Не нашёл элемент — шаг пропускается.

Фокусировка

Карточка «Фокусировка»

  • Зачем. Поставить курсор ввода (фокус) в поле, чтобы потом печатать в него через
    «Ввод текста». По сути — «щёлкнуть» в нужное поле перед набором.
  • Настройки. CSS-селекторы — на какое поле; галочка «Фокусировать невидимые» (см.
    «Как карточки находят элементы»).
  • ⚙️ Что будет при выполнении. Находит элемент, ставит на него фокус и выдерживает
    короткую паузу (~1 секунда). После этого «Ввод текста» печатает именно в это поле.
    Если элемент не найден — шаг пропускается.

Группа «Элементы»

Действия для работы с содержимым страницы: найти, прочитать, изменить, удалить.

Многие из этих карточек используют атрибуты элемента. Атрибут — это «свойство»
элемента: например, у поля ввода атрибут value хранит введённый текст, у ссылки
атрибут href хранит адрес. По сути это просто именованное свойство элемента.

Найти на странице

Карточка «Найти на странице»

  • Зачем. Вытащить со страницы нужное значение и сохранить его в переменную, чтобы
    потом использовать: подставить в адрес или текст ({переменная}), сравнить в
    «Если» или отправить на ваш сервер. Так со страницы забирают цену, количество, код
    заказа, имя пользователя или проверяют, есть ли на ней нужная надпись.
  • Настройки — выберите режим:
    • Поиск текста: задайте Шаблон (обычную строку или регулярное выражение) и
      Способ поиска — Текст (по видимому тексту страницы) или HTML (по
      исходному коду страницы). В переменную попадёт найденный текст.
    • Поиск элемента: задайте CSS-селекторы — что взять. По умолчанию сохранится
      видимый текст элемента; если указать атрибут (например href у ссылки,
      value у поля) — сохранится его значение.
    • Переменная — куда положить результат.
  • ⚙️ Что будет при выполнении. Результат сохраняется как текст.
    • Если подходит одно место/элемент — в переменной будет его значение.
    • Если подходит несколько — в переменную попадут все значения, перечисленные
      через запятую       (например, три цены на странице дадут 1290,1490,990).
    • Если ничего не нашлось — переменная не меняется (остаётся прежнее значение).
  • Пример. «Поиск элемента», селектор .total-price, переменная сумма — забрать
    итоговую сумму заказа, чтобы следующей карточкой «Отправить по ссылке» передать её на
    ваш сервер.

Запомнить элемент

Карточка «Запомнить элемент»

  • Зачем. Найти элемент один раз и «запомнить» его, чтобы дальше ссылаться на него
    коротким селектором :last-element — не повторяя длинный CSS-селектор в каждой
    следующей карточке.
  • Настройки. CSS-селекторы — что запомнить; галочка «Искать невидимые» (см.
    «Как карточки находят элементы»).
  • Как пользоваться результатом. После этой карточки в любой следующей вместо
    селектора можно написать :last-element — он указывает на запомненный элемент.
    Удобно, когда селектор сложный: нашли один раз — дальше работаете с ним коротко.
  • ⚙️ Что будет при выполнении. Карточка запоминает ровно один элемент (сам он не
    меняется — ни клика, ни ввода).
    • Несколько строк-селекторов перебираются сверху вниз — запомнится элемент по
      первой строке, по которой что-то нашлось. Если под эту строку подходит несколько
      элементов — запомнится один из них (общие правила —
      «Как карточки находят элементы»).
    • Ничего не нашлось (таких элементов на странице нет) — карточка ничего не
      запоминает и не сбрасывает      : :last-element останется тем, что был запомнен раньше.
      А если вы ещё ничего не запоминали — он пустой, и следующие шаги с :last-element
      просто пропустятся.
    • Запомненный элемент сбрасывается при переходе на другую страницу — после
      навигации запоминайте заново.
  • Пример. Запомнить кнопку по длинному селектору .card .actions > button.buy,
    затем «Перемещение к элементу» и «Клик на» (режим «в позиции курсора») уже по
    :last-element.

Удалить элемент

Карточка «Удалить элемент»

  • Зачем. Убрать элемент со страницы — например, мешающий баннер, всплывающее окно
    или перекрывающий слой, из-за которого не получается кликнуть по нужной кнопке.
  • Настройки. CSS-селекторы — что удалить (удалятся все найденные).
  • ⚙️ Что будет при выполнении. Удаляет все подходящие элементы (видимость
    здесь не учитывается). Если ничего не подошло — шаг ничего не делает.
  • Пример. Селектор .modal-overlay — убрать затемнение поверх страницы.

Установить атрибут

Карточка «Установить атрибут»

  • Зачем. Записать значение в атрибут элемента напрямую. Чаще всего так заполняют
    поле ввода (атрибут value) — мгновенно и целиком, в отличие от «Ввода текста»,
    который печатает по буквам.
  • Настройки.
    • CSS-селекторы — каким элементам записать.
    • Атрибут — имя свойства (например, value у поля ввода, href у ссылки).
    • Источник значения — откуда взять, что записать:
      • Заданное значение — вписать вручную;
      • Переменная — подставить значение переменной.
  • ⚙️ Что будет при выполнении. Значение записывается всем подходящим элементам
    (видимость не важна). Запись в value меняет содержимое поля ввода. Если ни один
    элемент не найден — шаг ничего не делает.
  • Пример. Селектор #email, атрибут value, источник «Заданное значение» = адрес
    почты — заполнить поле e-mail одним шагом.

Запомнить атрибут

Карточка «Запомнить атрибут»

  • Зачем. Прочитать значение атрибута элемента и сохранить в переменную, чтобы потом
    использовать (то же, что «Найти на странице» в режиме «Поиск элемента», но всегда по
    селектору и атрибуту). Например, забрать адрес ссылки (href) или текст из поля.
  • Настройки. CSS-селекторы — что прочитать; атрибут — какое свойство (если
    не указан — берётся видимый текст элемента); переменная — куда сохранить.
  • ⚙️ Что будет при выполнении.
    • Один подходящий элемент — в переменной его значение.
    • Несколько — все значения через запятую.
    • Не нашлось — переменная не меняется.
  • Пример. Селектор .product-link, атрибут href, переменная ссылка — запомнить
    адрес ссылки на товар.
  • Пример. Прочитать value из #inputText1 в переменную temp.

Удалить атрибут

Карточка «Удалить атрибут»

  • Зачем. Снять атрибут с элемента. Например, убрать disabled, чтобы
    «разблокировать» неактивную кнопку, или снять readonly с поля, которое нельзя
    редактировать.
  • Настройки. CSS-селекторы — у каких элементов; Атрибут — какое свойство снять.
  • ⚙️ Что будет при выполнении. Атрибут снимается со всех подходящих элементов
    (видимость не учитывается). Если ничего не подошло — шаг ничего не делает.
  • Пример. Селектор button[disabled], атрибут disabled — снять блокировку с кнопки.

Сохранить скриншот

Карточка «Сохранить скриншот»

  • Зачем. Сделать снимок текущей страницы и положить его в переменную (картинка
    сохраняется как текст в формате Base64 — чтобы потом ваш сервер мог его раскодировать).
    Снимок можно отправить на ваш сервер карточкой «Отправить по ссылке».
  • Настройки. Переменная — куда сохранить снимок.
  • ⚙️ Что будет при выполнении. Делает снимок текущей вкладки и кладёт его в
    переменную как картинку в текстовом виде (старое значение переменной затирается).

Группа «Логика»

Карточки, управляющие ходом сценария: паузы, ветвления, переменные, случайность.

Ждать

Карточка «Ждать»

  • Зачем. Сделать паузу между шагами — дать странице догрузиться, дождаться анимации
    или просто выдержать «человеческую» задержку перед следующим действием.
  • Настройки — источник значения:
    • Заданное значение — задать диапазон от–до в миллисекундах (1000 мс = 1
      секунда). При каждом запуске пауза выбирается случайно внутри диапазона — так
      поведение выглядит живым, а не «по таймеру». Нужна ровная пауза — поставьте
      одинаковые «от» и «до».
    • Переменная — длительность паузы (в мс) берётся из переменной. Удобно, когда
      время нужно вычислить заранее или получить с сервера.
  • ⚙️ Что будет при выполнении. Сценарий замирает на выбранное число миллисекунд,
    затем идёт дальше. Максимум — 180000 мс (3 минуты).
  • Пример. Пауза 1000–3000 — случайно от 1 до 3 секунд.

Если

Карточка «Если»

  • Зачем. Проверить условие и разветвить сценарий: один путь — если условие
    выполнено (зелёный выход «да»), другой — если нет (красный выход «нет»).
  • Настройки — тип сравнения:
    • Элемент на странице — есть ли на странице элемент по CSS-селекторам.
    • Переменная — сравнить значение переменной с заданным (оператор <, >, =;
      для текста только =).
    • Элемент под курсором — находится ли курсор сейчас над нужным элементом
      (использовать после «Перемещение к элементу»).
    • В режиме «Элемент на странице» есть галочка «Учитывать невидимые» — учитывать ли
      скрытые стилями элементы (см.
      «Как карточки находят элементы»).
  • ⚙️ Что будет при выполнении. Если проверка «по элементу» и элемент не найден —
    сценарий уходит в ветку «нет» (а не пропускает шаг, как другие карточки). При
    сравнении переменной: для текста доступно только «равно», для чисел — «больше»,
    «меньше», «равно».
  • Пример. «Элемент на странице» с селектором .cta-button: ветка «да» — кликнуть,
    ветка «нет» — прокрутить и попробовать снова.

Установить переменную

Карточка «Установить переменную»

  • Зачем. Изменить значение переменной по ходу сценария: задать заново, скопировать
    из другой или посчитать (счётчик попыток, накопление суммы и т.п.).
  • Настройки.
    • Целевая переменная — какую переменную меняем.
    • Режим установки:
      • Установить значение — вписать новое значение вручную (для текстовой
        переменной — текст, для числовой — число);
      • Скопировать из переменной — взять значение из другой переменной;
      • Увеличить / Уменьшить — прибавить или вычесть число (в поле «Увеличить
        на» / «Уменьшить на»). Эти режимы доступны, только если целевая переменная
        числовая; у текстовой они недоступны.
  • ⚙️ Что будет при выполнении. «Увеличить»/«Уменьшить» считают как с числами: если в
    переменной было пусто или не-число, она берётся за 0 (например, «Увеличить на 1»
    превратит пустую переменную в 1).
  • Пример. Переменная попытки, режим «Увеличить» на 1 — счётчик попыток в цикле.

Случайные действия

Карточка «Случайные действия»

  • Зачем. Поимитировать «живую» активность без сценария: клиент сам прокручивает
    страницу, водит курсором и жмёт клавиши в течение заданного времени. Удобно «разбавить»
    визит, чтобы он не состоял из одних целевых действий.
  • Настройки.
    • Продолжительность (сек.) — диапазон от–до (1–30 секунд). При запуске время
      выбирается случайно внутри диапазона.
    • Разрешить клики — позволить случайные клики во время активности. По умолчанию
      выключено: со включёнными кликами клиент может случайно нажать на что-нибудь
      (ссылку, кнопку) и уйти не туда — включайте, только если это допустимо.
  • ⚙️ Что будет при выполнении. Заданное время клиент делает случайные движения, затем
    переходит к следующей карточке.
  • Пример. Продолжительность 5–10, клики выключены — 5–10 секунд «живого»
    шевеления перед целевым действием.

Ветвление

Карточка «Ветвление»

  • Зачем. Это оформительская карточка-«развилка»: помогает аккуратно развести
    связи и сделать схему понятнее (например, собрать в одну точку несколько стрелок
    и пустить дальше). Её можно вращать за ручку в заголовке.
  • Настроек в теле нет.
  • ⚙️ Что будет при выполнении. Сама ничего не делает — только передаёт ход дальше.
    Если от неё идёт несколько связей, клиент пойдёт по одной случайной (это
    общее правило для всех действий,
    просто «Ветвление» оформляет такую развилку аккуратно).

Группа «Обмен»

Карточки для связи сценария с вашим сервером по интернету: одна отправляет туда
значения переменных, другая забирает данные оттуда. Это продвинутая тема — нужен свой
адрес (URL), который принимает или отдаёт данные. Точный формат запроса и ответа, что
именно уходит на сервер и готовые примеры серверов (Node.js, PHP, Python) собраны в
отдельном разделе «Свой сервер для „Получить по ссылке“ и „Отправить по
ссылке“».

Получить по ссылке

Карточка «Получить по ссылке»

  • Зачем. Запросить данные с вашего адреса и разложить ответ по переменным —
    например, получить с сервера текст для отзыва, число или готовое значение.
  • Настройки.
    • Ссылка — адрес http/https, откуда брать данные.
    • Разложить ответ по переменным — строки «Имя поля в ответе → В
      переменную      »: какое поле из ответа в какую переменную положить (до 20 строк).
  • ⚙️ Что будет при выполнении. Поля из ответа раскладываются по переменным; если
    нужного поля в ответе нет — переменная не меняется. Подстановка {переменной} в
    адресе не выполняется — адрес берётся буквально.
  • Формат ответа и пример сервера — в разделе «Свой сервер…».

Отправить по ссылке

Карточка «Отправить по ссылке»

  • Зачем. Отправить значения выбранных переменных на ваш адрес — например, передать
    собранную со страницы цену, скриншот или результат проверки.
  • Настройки.
    • Ссылка — адрес http/https, куда отправлять.
    • Какие переменные отправить — список переменных (до 20).
  • ⚙️ Что будет при выполнении. Значения выбранных переменных уходят на ваш адрес.
    Ответ сервера не используется — достаточно, что он его принял. Подстановка
    {переменной} в адресе не выполняется — адрес берётся буквально.
  • Формат запроса и пример сервера — в разделе «Свой сервер…».

Группа «Организация»

Карточки только для оформления. Они не выполняются клиентом — нужны, чтобы
схема была понятной вам и коллегам.

Группа

  • Зачем. Прямоугольник-контейнер, которым вы обводите несколько карточек, чтобы
    объединить связанные шаги в один смысловой блок. Очень помогает, когда сценарий
    большой и карточек много.
  • Как пользоваться. Добавьте «Группу», потяните за края (правый, нижний, левый),
    чтобы растянуть рамку поверх нужных карточек, и впишите название в заголовок.
  • Членство — по расположению. Карточка считается «внутри» группы, если она целиком
    попала в её прямоугольник. Чтобы добавить карточку — перетащите её в рамку, чтобы
    убрать — вытащите наружу. Карточки внутри подсвечиваются.
  • Влияет на холст. Если потянуть саму группу за заголовок, все карточки внутри
    едут вместе     с ней — можно перемещать целый кусок сценария как одно целое, не
    выделяя карточки по одной.
  • Влияет на список слева. В панели «Действия» карточки группы показываются
    вложенным списком под её названием — большой сценарий становится проще читать и
    в нём легче находить нужное.
  • Группа не выполняется и не влияет на логику сценария — это чисто визуальная
    организация (как и «Заметка»).

Группа «Цикл ожидания»: на холсте рамка охватывает две карточки, а в списке слева те же карточки показаны вложенными под группой

Заметка

Карточка «Заметка»

  • Зачем. Текстовый стикер с комментарием прямо на холсте — пояснить будущему себе
    или коллегам, что делает этот кусок сценария.
  • Как пользоваться. Добавьте «Заметку» и впишите текст. У неё нет входа и выхода —
    она ни с чем не соединяется.
  • Заметка не выполняется и никак не влияет на сценарий — это чистое оформление (как
    и «Группа»).

CSS-селекторы простыми словами

Многие карточки просят указать CSS-селектор — это способ показать клиенту, на какой
именно элемент страницы действовать: по какой кнопке кликнуть, в какое поле печатать.

Селектор опирается на признаки, которые уже есть у элемента в коде страницы: его тип
(ссылка, кнопка, поле ввода), идентификатор id (уникальное имя элемента) или
класс class (метка, общая для похожих элементов), а также то, внутри чего он
находится. Из этих признаков и складывается селектор.

Самые частые виды:

Селектор Что выбирает
#login элемент с идентификатором login (например, поле логина)
.btn все элементы с классом btn
a любые ссылки (ссылка в коде обозначается буквой a)
button любые кнопки
input любые поля ввода
.card .price элемент с классом price внутри элемента с классом card — цена внутри карточки товара
a[href*="example"] ссылка, в адресе которой есть example

Как получить готовый селектор из браузера

Селектор не обязательно составлять вручную — браузер умеет скопировать готовый для
любого элемента на странице. Принцип одинаков везде: открыть «инструменты разработчика»,
указать нужный элемент и выбрать в меню «копировать селектор». Ниже — по шагам для трёх
браузеров.

Google Chrome

  1. Откройте страницу, на которой нужен элемент.
  2. Наведите курсор на нужный элемент (кнопку, поле, ссылку), нажмите правую кнопку
    мыши     и выберите «Посмотреть код». (Другой способ: нажать F12 — откроется
    панель разработчика — затем кликнуть значок выбора элемента в её левом верхнем углу и
    щёлкнуть по элементу на странице.)
  3. Откроется панель кода, и в ней подсветится строка вашего элемента.
  4. Нажмите по этой подсвеченной строке правой кнопкой мыши, наведитесь на
    «Копировать» и выберите «Копировать селектор» (в английском интерфейсе —
    Copy → Copy selector).
  5. Селектор теперь в буфере обмена — вставьте его (Ctrl+V) в поле «CSS-селекторы»
    нужной карточки.

📷 Заглушка под скриншот: Google Chrome — панель кода, открытое меню «Копировать» с
подсвеченным пунктом «Копировать селектор».

Яндекс Браузер

Яндекс.Браузер на том же движке, что и Chrome, поэтому шаги те же — отличается только
название первого пункта меню:

  1. Правый клик по нужному элементу на странице → «Исследовать элемент».
  2. В открывшейся панели кода правый клик по подсвеченной строке → «Копировать» →
    «Копировать селектор».
  3. Вставьте селектор (Ctrl+V) в поле «CSS-селекторы» карточки.

📷 Заглушка под скриншот: Яндекс.Браузер — меню «Копировать» → «Копировать селектор»
в панели кода.

Mozilla Firefox

  1. Наведите курсор на нужный элемент, нажмите правую кнопку мыши и выберите
    «Исследовать». (Другой способ: нажать F12 и кликнуть значок выбора элемента,
    затем щёлкнуть по элементу на странице.)
  2. Внизу откроется «Инспектор», в нём подсветится строка вашего элемента.
  3. Правый клик по этой строке → «Копировать» → «CSS-селектор» (Copy → CSS
    Selector    ). Рядом есть пункт «CSS-путь» (CSS Path) — он длиннее и жёстче; для
    карточек обычно достаточно «CSS-селектора».
  4. Вставьте селектор (Ctrl+V) в поле «CSS-селекторы» карточки.

📷 Заглушка под скриншот: Mozilla Firefox — Инспектор, меню «Копировать» с
подсвеченным пунктом «CSS-селектор».

Важно. Скопированный селектор часто получается длинным и привязанным к месту
(вроде body > div:nth-child(3) > button). Он работает, но легко ломается при
малейшем изменении страницы. Если внутри виден понятный #id или короткий .class —
надёжнее оставить только его (см. таблицу выше).

Проверить селектор можно сразу в панели кода: на вкладке с кодом нажмите Ctrl+F
и вставьте селектор в строку поиска — браузер подсветит подходящие элементы и покажет,
сколько их нашлось. Нашёлся ровно один и тот, что нужен, — селектор хороший.

Элементы внутри встроенных страниц (iframe)

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

Обычный селектор сам заглядывает внутрь. Если вы пишете просто .класс или #id,
поиск идёт сначала по основной странице, а если там пусто — автоматически заходит во
встроенные страницы первого уровня (вставленные прямо в основную). Глубже — во
встроенную страницу внутри встроенной — обычный селектор не заходит (там обычно чужие
виджеты и реклама).

Чтобы прицельно зайти в нужную встроенную страницу — начните селектор с неё. Запись
iframe.имя-класса .кнопка читается так: «найди встроенную страницу iframe.имя-класса,
зайди внутрь и там ищи .кнопка». Так добираются и до вложенных:
iframe.внешняя iframe.внутренняя .цель — зайти в первую, затем во вторую, и искать там.

Важно. Обычная запись через пробел сама не заходит внутрь встроенной страницы.
То есть iframe.foo .кнопка «как обычно» ничего не найдёт — .кнопка будет искаться
прямо на основной странице, а её там нет. Чтобы войти внутрь, селектор должен
начинаться со встроенной страницы (iframe…) — только тогда редактор понимает это
как «зайди внутрь и ищи там».

Как указать встроенную страницу. Начните с iframe (или frame — старый вариант) и
при необходимости уточните, какую именно:

Запись Что значит
iframe .цель первая встроенная страница на странице
iframe.foo .цель встроенная страница с классом foo
iframe#main .цель с id main
iframe[name="ads"] .цель с атрибутом name="ads"

Несколько таких частей подряд — это заход во вложенные страницы по очереди. Если под
указание подходит несколько встроенных страниц — берётся первая. Всё, что стоит после
последней iframe…, ищется обычным образом уже внутри найденной страницы (там пробел и
> работают как всегда, например iframe.foo .список > a).

Просто iframe или .box iframe без продолжения — это не «заход внутрь», а поиск
самого блока встроенной страницы как обычного элемента.

Полезно знать:

  • В одно поле можно вписать несколько строк селекторов — при выполнении случайно
    выберется одна. Это делает поведение разнообразнее.
  • Внутри селектора работает подстановка переменных: #{имя} подставит значение
    переменной имя, livesurf.org — текущий домен.
  • :last-element — особый селектор: «тот элемент, который мы запомнили карточкой
    Запомнить элемент».

Проверка сценария

Кнопка «Проверка» в верхней панели проверяет все карточки на ошибки (пустые
обязательные поля, неверные селекторы, неправильные значения и т.п.).

Результат выводится в консоль внизу:

  • Если всё хорошо — зелёная строка «Всё в порядке».
  • Если есть ошибки — каждая ошибка отдельной строкой. Рядом с ошибкой есть кнопка
    ⦿: нажмите — холст наведётся на проблемную карточку.

Проверяйте сценарий перед сохранением и перед запуском теста — так быстрее найти
опечатки.

Запуск теста

«Запустить тест» позволяет по-настоящему прогнать ваш сценарий на реальном сайте
и увидеть, что происходит, прямо на холсте.

Нажмите «Запустить тест» — откроется форма:

Форма запуска теста

  • URL сайта — адрес страницы, на которой проверяем сценарий.
  • Тип устройства — «компьютер» или «мобильное» (поведение и размеры экрана
    отличаются).
  • «Открыть клиент и запустить тест» — запуск.

Важно. Для теста нужен установленный и запущенный клиент LiveSurf на вашем
компьютере — именно он открывает сайт и выполняет шаги. Редактор сам по себе сайт
не «прокликает». Кружок-индикатор в верхней панели показывает связь с клиентом:
красный — не подключён, жёлтый — подключается, зелёный — на связи.

Что вы увидите во время теста:

  • Текущая выполняемая карточка подсвечивается, пройденные карточки и связи
    отмечаются — видно, по какому пути пошёл сценарий.
  • Значения переменных обновляются вживую в панели переменных.
  • В консоль построчно пишется понятный отчёт: какой селектор выбран, какой
    элемент найден, сколько ждали, чему равно условие в «Если» и т.д.

Так консоль выглядит с сообщениями (здесь — текст справки, но во время теста сюда же
идёт пошаговый отчёт):

Сообщения в консоли

Остановить тест можно кнопкой «Остановить тест» (она появляется на месте кнопки
запуска).

Сохранение, загрузка, история, буфер обмена

Редактор открыт внутри формы проекта — там, где настраивается поведение. Эта форма
и хранит ваш сценарий: при открытии редактор загружает из неё текущий сценарий, а кнопка
«Сохранить» записывает изменения обратно.

Сохранение

  • Сохранить (или Ctrl+S) — записать сценарий обратно в форму. Вверху виден
    статус: «Сохранено» — всё записано; «Есть несохранённые изменения» — есть
    правки, которые ещё не сохранены.
  • Там же, вверху, показано, к чему относится сценарий: Группа и URL страницы (их
    задаёт форма). Рядом — «Перейти к форме» (вернуться к родительской форме) и
    «Закрыть редактор» (предупредит, если есть несохранённые изменения).
  • Если связь с формой потеряна, статус об этом сообщит, а редактор будет пытаться
    переподключиться. Сохранение в файл при этом остаётся доступным (см. ниже).

Файлы (резервная копия и перенос)

  • В файл — скачать сценарий в файл .json (имя вида actions_2026-06-18T....json).
    Обычный текстовый файл: для резервной копии, переноса или пересылки.
  • Из файла — загрузить сценарий из сохранённого .json. Текущий сценарий заменится
    загруженным.
  • Очистить — сбросить сценарий к пустому (предупредит о несохранённых изменениях).

История (отмена/повтор)

  • Отмена (Ctrl+Z) и Повтор (Ctrl+Shift+Z) — откатывают и возвращают
    изменения. Хранится до 100 шагов истории.

Буфер обмена

  • Копировать (Ctrl+C) — копирует выделенные карточки.
  • Вставить (Ctrl+V) — вставляет их (рядом с курсором, если он на холсте).
    Скопированные карточки сохраняют взаимное расположение и становятся выделенными.

Готовые рецепты: собираем сценарии по шагам

Ниже — несколько типовых задач и как собрать их в редакторе (названия карточек —
как в меню). Каждый рецепт можно повторить мышкой за пару минут.

Задача: подождать пару секунд и кликнуть по кнопке согласия с cookie.

flowchart TD
    S(["▶ Начало сценария"]) --> W["Ждать 1500–3000 мс"]
    W --> C["Клик на .cookies-accept"]

Шаги:

  1. На холсте уже есть «Начало сценария» (после загрузки, любая страница).
  2. Добавьте «Ждать», в поле — диапазон 1500–3000.
  3. Добавьте «Клик на» (режим «Клик по элементу»), селектор .cookies-accept.
  4. Соедините: из выхода «Начало сценария» → в «Ждать», из «Ждать» → в «Клик на».

Рецепт 2. Дочитать длинную статью «как живой»

Задача: прокрутить страницу частями (25%, 50%, 75%, 100%) с паузами.

flowchart TD
    S(["▶ Начало"]) --> A["Прокрутка к точке 25%"]
    A --> PA["Ждать 1.5–3 с"] --> B["Прокрутка 50%"]
    B --> PB["Ждать 1.5–3 с"] --> C["Прокрутка 75%"]
    C --> PC["Ждать 1.5–3 с"] --> D["Прокрутка 100%"]

Шаги: чередуйте карточки «Прокрутка» (режим «До нужного места (в %)») со значениями 25, 50,
75, 100 и карточки «Ждать» между ними. Соедините по цепочке.

Рецепт 3. Дождаться кнопку и кликнуть

Задача: листать вниз с паузами, пока не появится кнопка .cta-button, потом
кликнуть. Это ровно тот сценарий, что показан на скриншотах выше.

flowchart TD
    S(["▶ Начало"]) --> IF{"Если: есть .cta-button?"}
    IF -->|да ✓| CL["Клик на .cta-button"]
    IF -->|нет ✕| SC["Прокрутка вниз"]
    SC --> WT["Ждать 0.8–1.5 с"]
    WT --> IF

Шаги:

  1. Добавьте «Если» (тип «Элемент на странице», селектор .cta-button).
  2. Из зелёного выхода «да» → «Клик на» с тем же селектором.
  3. Из красного выхода «нет» → «Прокрутка» (режим «До нижней границы»).
  4. Из «Прокрутка» → «Ждать» 800–1500.
  5. Из «Ждать» → обратно в «Если» (получится цикл).
  6. Соедините «Начало сценария» с «Если».

Рецепт 4. Счётчик: повторить 5 раз и остановиться

Задача: сделать что-то 5 раз с паузами, потом завершиться.

flowchart TD
    S(["▶ Начало"]) --> INC["Установить переменную:<br/>попытки += 1"]
    INC --> CHK{"Если: попытки < 5?"}
    CHK -->|да ✓| P["Ждать 500 мс"] --> INC
    CHK -->|нет ✕| END["Конец"]

Шаги:

  1. Создайте переменную попытки (целое число, начальное 0).
  2. «Установить переменную»: цель попытки, режим «Увеличить» на 1.
  3. «Если» (тип «Переменная»): попытки < 5.
  4. Ветка «да» → «Ждать» 500 → обратно в «Установить переменную».
  5. Ветка «нет» → «Конец сценария».

Рецепт 5. Один отзыв на всё задание (через событие)

Задача: из 10 вкладек только одна оставляет отзыв, остальные продолжают как
обычно.

Шаги:

  1. Добавьте «Начало по событию» ⚡, имя события, например отзыв, режим
    «Один раз на задание». От него ведите ветку «оставить отзыв».
  2. В нужном месте основной цепочки добавьте карточку «Событие» с тем же именем
    отзыв.
  3. Когда выполнение дойдёт до «Событие», сработает приёмник — но запустит ветку
    только одна вкладка (первая); остальные пойдут дальше своим путём.

Свой сервер для «Получить по ссылке» и «Отправить по ссылке»

Этот раздел — для тех, у кого есть свой сервер (адрес в интернете, умеющий принимать
и отдавать данные).

Карточки «Отправить по ссылке» и «Получить по ссылке» работают с вашим
адресом в строго заданном формате — он одинаковый и «зеркальный» для обеих:

  • «Отправить по ссылке» — клиент шлёт выбранные переменные на ваш адрес;
  • «Получить по ссылке» — клиент запрашивает ваш адрес и раскладывает поля ответа по
    переменным.

Формат рассчитан на ваш сервер, а не на произвольный сторонний сервис.

sequenceDiagram
    participant C as Клиент (вкладка)
    participant S as Ваш сервер
    Note over C,S: «Отправить по ссылке»
    C->>S: POST url + заголовок Request-Meta,<br/>тело { "payload": { имя: base64(значение) } }
    S-->>C: 2xx (тело игнорируется)
    Note over C,S: «Получить по ссылке»
    C->>S: GET url + заголовок Request-Meta
    S-->>C: 200 { "payload": { поле: base64(значение) } }
    Note over C: поле → переменная по строке «из поля → в переменную»

Что общего у обеих карточек

В каждом запросе два «кармана»:

  1. Мета — служебные сведения о вызове. Едет в HTTP-заголовке Request-Meta,
    значение = base64( JSON(меты) ). Заголовок есть и при отправке, и при получении.
  2. Данные — в «конверте» { "payload": { "имя": "<base64-значения>" } }. При
    отправке это тело запроса, при получении — тело ответа вашего сервера.

Про base64 (это способ записать любой текст безопасными символами; почти любой язык
кодирует и раскодирует его встроенной функцией):

  • Значения данных всегда в base64 (от UTF-8-байт строки). Тип не сохраняется: число
    42 уедет строкой "42" → "NDI=". После раскодирования сервер получит строку.
  • Мета кодируется в base64 целиком, как одна JSON-строка; поля внутри меты обычные,
    по отдельности не кодируются.

Поля меты:

Поле Тип Смысл
ts число время запроса, unix-секунды
domain строка домен текущей страницы
url строка полный адрес текущей страницы
tab_id строка id вкладки
task_id число id задания
device строка desktop или mobile
referrer строка предыдущая страница (может быть пустой)
nonce строка случайный разовый идентификатор запроса

Токена или подписи в мете нет. Мету можно вообще не читать — она нужна, только если вы
хотите на своей стороне различать вкладки и задания.

«Отправить по ссылке»: клиент → ваш сервер

В карточке задаются адрес и список переменных (1–20). По проводу уходит:

POST /ваш-приёмник HTTP/1.1
Content-Type: application/json
Request-Meta: eyJ0cyI6MTcxODYwMDAwMCwiZG9tYWluIjoi...

{ "payload": { "login": "dXNlcjE=", "counter": "NDI=" } }
  • Метод POST, Content-Type: application/json.
  • Тело — { "payload": { имя: base64(значение) } } (не плоский объект и не
    form-urlencoded).
  • Все значения — строки в base64 (42 → "42" → "NDI=").
  • Мета — только в заголовке, в теле её нет.
  • Ответ не читается: важен лишь код состояния. Достаточно вернуть любой 2xx (можно
    с пустым телом).

«Получить по ссылке»: клиент → ваш сервер → клиент

В карточке задаются адрес и строки «из какого поля ответа → в какую переменную» (0–20).
По проводу уходит:

GET /ваш-передатчик HTTP/1.1
Request-Meta: eyJ0cyI6MTcxODYwMDAwMCwiZG9tYWluIjoi...
  • Метод GET, без тела и без query-параметров; адрес берётся буквально (подстановка
    {переменной} в адрес не выполняется).
  • Мета — в заголовке.

Ваш сервер должен ответить (token и qty здесь — примерные имена полей, которые
вы придумываете сами на своём сервере):

200 OK

{ "payload": { "token": "YWJjMTIz", "qty": "MTA=" } }

Значения закодированы в base64 только для пересылки: "YWJjMTIz" — это base64 от
abc123, а "MTA=" — от 10.

В строках карточки вы указываете, из какого поля ответа взять значение и в какую
переменную его положить. Например, две строки: token → в переменную токен,
qty → в переменную количество. После выполнения карточки клиент сам раскодирует
base64, и в переменных окажутся обычные значения: токен = abc123, количество =
10 — готовые к использованию, без всякого base64.

Детали:

  • Тело ответа — корректный JSON (не разобрался — клиент ничего не запишет).
  • Берётся только ключ верхнего уровня в payload (без вложенных путей). Поля нет —
    строка пропускается, переменная сохраняет прежнее значение. Списки/массивы в ответе не
    поддерживаются.
  • Если так удобнее, поля можно положить прямо в корень ответа, без обёртки payload —
    клиент это тоже примет.

Ограничения

Что Значение
Протокол адреса только http/https, длина ≤ 2048 символов
Подстановка {переменной} в адрес не выполняется
Размер ответа («Получить по ссылке») до 2 МБ (сверх — чтение обрывается, переменные не пишутся)
Таймаут запроса 20 секунд
Пауза между вызовами обязательные 5 секунд после каждого вызова (в том числе при ошибке) — чтобы цикл не «долбил» сервер

Минимальные примеры сервера

Ниже — по одному приёмнику (для «Отправить по ссылке») и передатчику (для
«Получить по ссылке») на Node.js, PHP и Python. Логика везде одна: мету при желании
читаем из заголовка Request-Meta, а данные кладём или берём из payload, не забывая
про base64.

Node.js — приёмник («Отправить по ссылке»):

const express = require('express');
const app = express();
app.use(express.json());

app.post('/collect', (req, res) => {
  // мета — по желанию (раскодируем заголовок)
  const metaRaw = req.get('Request-Meta');
  const meta = metaRaw ? JSON.parse(Buffer.from(metaRaw, 'base64').toString('utf8')) : {};

  const payload = (req.body && req.body.payload) || {};
  const data = {};
  for (const [name, b64] of Object.entries(payload)) {
    data[name] = Buffer.from(b64, 'base64').toString('utf8'); // раскодируем значение
  }
  console.log('tab', meta.tab_id, data); // data = { login: 'user1', counter: '42' }

  res.sendStatus(200); // тело не важно — достаточно 2xx
});

app.listen(3000);

Node.js — передатчик («Получить по ссылке»):

app.get('/next-review', (req, res) => {
  const out = { author: 'Иван', text: 'Отличный товар!' };

  const payload = {};
  for (const [field, value] of Object.entries(out)) {
    payload[field] = Buffer.from(String(value), 'utf8').toString('base64'); // каждое значение — base64
  }
  res.json({ payload }); // { "payload": { "author": "<base64>", "text": "<base64>" } }
});

PHP — приёмник («Отправить по ссылке»):

<?php
$meta = json_decode(base64_decode($_SERVER['HTTP_REQUEST_META'] ?? ''), true) ?: [];
$body = json_decode(file_get_contents('php://input'), true) ?: [];

$data = [];
foreach (($body['payload'] ?? []) as $name => $b64) {
    $data[$name] = base64_decode($b64); // раскодируем значение
}
// $data = ['login' => 'user1', 'counter' => '42'];
error_log('tab ' . ($meta['tab_id'] ?? '?') . ' ' . json_encode($data));

http_response_code(200); // достаточно 2xx

PHP — передатчик («Получить по ссылке»):

<?php
$out = ['token' => 'abc123', 'qty' => 10];

$payload = [];
foreach ($out as $field => $value) {
    $payload[$field] = base64_encode((string) $value); // каждое значение — base64
}
header('Content-Type: application/json');
echo json_encode(['payload' => $payload]);

Python (Flask) — приёмник («Отправить по ссылке»):

import base64, json
from flask import Flask, request

app = Flask(__name__)

@app.post('/collect')
def collect():
    raw = request.headers.get('Request-Meta', '')
    meta = json.loads(base64.b64decode(raw)) if raw else {}

    payload = (request.get_json(silent=True) or {}).get('payload', {})
    data = {name: base64.b64decode(b64).decode('utf-8') for name, b64 in payload.items()}
    # data = {'login': 'user1', 'counter': '42'}
    print('tab', meta.get('tab_id'), data)

    return '', 200  # достаточно 2xx

Python (Flask) — передатчик («Получить по ссылке»):

@app.get('/next-review')
def next_review():
    out = {'author': 'Иван', 'text': 'Отличный товар!'}
    payload = {field: base64.b64encode(str(value).encode('utf-8')).decode('ascii')
               for field, value in out.items()}
    return {'payload': payload}  # Flask отдаст это как JSON

Ограничения и правила

Полезно знать «потолки», чтобы не упереться в них неожиданно.

Где Ограничение
Имя переменной 3–15 символов; буквы/цифры/_/-; до 20 обычных и до 20 общих
ID карточки латиница и цифры, до 15 символов, уникальный
Имя события 1–30 символов; буквы/цифры/_/-
Один CSS-селектор до 500 символов; строк-селекторов в поле — до 100
Действие «над всеми» (удалить/установить/снять атрибут) применяется максимум к 40 элементам за раз
Имя атрибута до 25 символов
Пауза «Ждать» каждое значение 0–180000 мс (до 3 минут)
«Случайные действия» 1–30 секунд
Прокрутка «До нужного места (в %)» 0–100
Количество кликов 1–10
Повтор ввода текста 1–100
«Получить/Отправить по ссылке» адрес http/https до 2048 символов; до 20 переменных
Выходов у одной карточки до 10
Весь сценарий до 25 КБ в сохранённом виде

Ещё несколько правил — они нужны, чтобы редактору всегда было однозначно понятно, что
именно запускать:

  • Режим «Любая страница» в карточке «Начало сценария» можно включить только у
    одной такой карточки каждого типа («После загрузки» или «Перед завершением»). Иначе
    было бы непонятно, какая из них главная на странице.
  • На одно имя события должен быть только один приёмник «Начало по событию»
    (при этом карточек «Событие», посылающих сигнал с этим именем, может быть сколько
    угодно). Иначе непонятно, чью цепочку запускать по сигналу.
  • За одной переменной может следить только один узел «Начало по переменной» —
    иначе на одно изменение сработали бы сразу несколько.

Если такое правило нарушено, редактор подсветит конфликтующую карточку и подскажет, в
чём дело.

Частые вопросы

Я добавил карточки, но при запуске ничего не происходит.
Скорее всего нет точки входа или она ни к чему не подключена. Проверьте, что
есть «Начало сценария» и от него идёт стрелка к первому шагу.

Где взять CSS-селектор кнопки?
Самое простое — спросить того, кто делал сайт, либо через браузер: правый клик по
элементу → «Посмотреть код», и взять id/class. См.
CSS-селекторы простыми словами.

Чем отличается «Клик в позиции курсора» от «Клик по элементу»?
«По элементу» сам находит элемент по селектору и кликает по нему. «В позиции
курсора» кликает там, где курсор сейчас — поэтому перед ним обычно ставят
«Перемещение к элементу».

Зачем нужны два выхода у «Если»?
Чтобы развести сценарий на два пути: зелёный «да» — когда условие выполнено,
красный «нет» — когда нет.

Почему кнопка теста показывает красный кружок?
Нет связи с клиентом LiveSurf. Убедитесь, что клиент установлен и запущен.

Можно ли сохранить незаконченный сценарий?
Да. Незавершённые связи и пустые выходы сохраняются нормально — продолжите позже.

Чем отличается обычная переменная от общей 🌐?
Обычная — своя у каждой вкладки визита. Общая — одна на все вкладки: данные видны
всем сразу. См. Обычные и общие переменные.

Если что-то осталось непонятным — нажмите кнопку «?» на нужной карточке (справка
появится в консоли внизу) или спросите помощника «Режиссёр поведения» (синий кружок
справа внизу).