RU 
Дата обновления: 2026-06-18
Когда обычный человек заходит на сайт, он что-то делает руками: ждёт пока страница
загрузится, читает текст, прокручивает её вниз колесом мыши, наводит курсор на
кнопки, кликает по ссылкам, печатает в поля. Это и есть поведение на странице.
Этот редактор позволяет заранее описать такое поведение — по шагам, как
инструкцию. Потом специальная программа («клиент») открывает ваш сайт и
выполняет эти шаги сама.
Зачем это нужно: чтобы посещения вашего сайта выглядели «живыми» — с реальными
действиями, а не просто «зашёл и ушёл». Вы один раз рисуете сценарий поведения, а
дальше он повторяется на каждом визите.
Самое важное: вы ничего не программируете. Вы собираете сценарий из готовых
кирпичиков — карточек. Каждая карточка — это один шаг («Ждать», «Кликнуть»,
«Прокрутить», «Если…»). Карточки соединяются стрелками: «сначала это, потом то».
Получается схема, очень похожая на блок-схему или на дорожную карту.
ITflowchart 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 (заменит текущий). |
| Очистить | Очистить сценарий и начать с чистого листа. |
| Отмена / Повтор | Откатить последнее действие назад / вернуть его обратно. |
| Копировать / Вставить | Скопировать выделенные карточки и вставить их. |
| Проверка | Проверить сценарий на ошибки. Ошибки появятся в консоли. |
| Запустить тест | Открыть форму запуска теста (см. Запуск теста). |
| Красный/зелёный кружок | Состояние связи с клиентом для теста (красный — не подключён). |
На заметку. Многие кнопки дублируются горячими клавишами (их полный список — в
разделе Горячие клавиши) и пунктами меню по правому клику.
Пользуйтесь тем, что удобнее.
Сценарий — это набор карточек, соединённых стрелками: каждая карточка — это шаг,
а стрелки задают порядок «сначала это, потом то».
Правила простые:
Вот наш пример «дождись кнопку, иначе прокрути и попробуй снова» на холсте:
Та же логика в виде схемы:
flowchart TD
S(["▶ Начало сценария"]) --> IF{"Если: на странице<br/>есть кнопка .cta-button?"}
IF -->|да ✓| CL["Клик на кнопку"]
IF -->|нет ✕| SC["Прокрутка вниз"]
SC --> WT["Ждать 0,8–1,5 сек"]
WT --> IF
Что здесь происходит: после загрузки проверяем, видна ли кнопка. Если да —
кликаем (конец). Если нет — прокручиваем страницу вниз, ждём немного и
проверяем снова. Получается «цикл ожидания»: листаем, пока кнопка не появится.
Цвет кружков-портов на карточке «Если» подсказывает ветку: зелёный — выход «да»,
красный — выход «нет». Оранжевым подсвечены порты, к которым уже подключена
связь, — так видно, какие выходы ещё свободны.
Сценарий можно сохранять незавершённым. Если у какой-то карточки выход пока
никуда не ведёт или точка входа ни к чему не подключена — это не ошибка, редактор
сохранит как есть. Это удобно, когда вы собираете сценарий постепенно.
Здесь — всё про «руки»: как добавлять карточки, двигать их, соединять, выделять,
двигать и приближать холст.
Кликните правой кнопкой мыши по пустому месту холста — откроется меню со всеми
действиями, разложенными по группам:
Группы в меню (сверху вниз): Сценарий, Страница, Элементы, Логика,
Обмен, Организация. Что лежит в каждой — см.
Справочник карточек.
Хитрость: если отпустить линию на пустом месте, откроется то же меню действий,
и новая карточка сразу будет подключена к вашей связи. Очень быстро строить цепочки.
У карточки «Если» тяните из зелёного порта (ветка «да») или из красного
(ветка «нет») — так вы зададите, что делать в каждом случае.
Кликните по линии связи правой кнопкой мыши — связь удалится.
| Что нужно | Как сделать |
|---|---|
| Передвинуть карточку | Тянуть её за заголовок (верхнюю цветную полоску). |
| Подвинуть весь холст (панорама) | Тянуть левой кнопкой за пустое место (или за тело карточки, не за заголовок). |
| Приблизить/отдалить (зум) | Крутить колесо мыши. Масштаб — от 10% до 200%. |
| Выделить одну карточку | Кликнуть по её телу левой кнопкой. |
| Добавить/убрать из выделения | Ctrl + клик по карточке (можно выбрать несколько). |
| Выделить рамкой | Shift + зажатая левая кнопка по пустому месту — растянуть прямоугольник. |
| Снять выделение | Кликнуть по пустому месту холста. |
| Переместить несколько сразу | Выделить несколько карточек и тянуть одну из них за заголовок — поедут все. |
Основные сочетания (работают на холсте):
| Клавиши | Действие |
|---|---|
| Ctrl + Z | Отменить |
| Ctrl + Shift + Z | Повторить (вернуть отменённое) |
| Delete или X | Удалить выделенные карточки |
| Ctrl + C | Копировать выделенное |
| Ctrl + V | Вставить |
| Ctrl + S | Сохранить |
Кроме них, в отдельных местах работают ещё несколько клавиш:
| Клавиша | Где и что делает |
|---|---|
| Escape | Закрыть открытое меню добавления карточки или всплывающее окно. |
| печать букв | Когда открыто меню добавления карточки — фильтрует список по названию (Backspace стирает введённый символ). |
| Enter | Подтвердить значение в поле, где есть кнопка сохранения (✎); отправить сообщение помощнику в чате. |
В самом низу всегда есть строка-подсказка. Она меняется в зависимости от того,
куда наведён курсор, и показывает доступные жесты:
Что вы там увидите (примеры): «Соединить» (когда курсор над портом), «Удалить
связь» (над линией), «Меню» (над пустым местом — правый клик), «Зум» (колесо
мыши), «Добавить к выделению» (Ctrl+клик над карточкой), «Сохранить» (Ctrl+S) и т.д.
Это удобная «шпаргалка», которая всегда под рукой.
Любая карточка устроена одинаково. Разберём на примере карточки «Если»:
check). Это имя вы видите вcheckButton), большой сценарий будет легче читать.Порт, к которому уже подключена связь, подсвечивается оранжевым. Так с одного
взгляда видно, какие выходы уже задействованы, а какие «висят» пустыми.
Некоторые карточки портов не имеют вовсе: например «Начало сценария» имеет
только выход (входа нет — это старт), а «Конец сценария» — только вход (дальше идти
некуда). Оформительские карточки «Группа» и «Заметка» портов не имеют.
Слева, в части «Действия», дублируется список всех карточек сценария. Это
удобно, когда карточек много и искать их глазами на холсте долго.
В строке каждой карточки есть кнопки:
Сверху есть поиск — фильтрует список по названию, ID и тексту внутри карточки.
Клик по строке — выделяет карточку (и на холсте тоже). Двойной клик — наводит на неё
холст. Выделение в списке и на холсте всегда синхронно.
Переменная — это именованная «коробочка», в которую можно положить значение
(число или текст) и потом достать его в другом шаге. Это память вашего сценария.
Зачем:
Панель «Переменные» (кнопка ▼/▲ разворачивает её, а ⤢ открывает в отдельном
большом окне):
Нажмите «Добавить переменную» — откроется форма:
Заполните:
_ и -. Примеры: счётчик, имя,my_var, адрес. Двух переменных с одинаковым именем быть не может.0, для строки — пусто.Нажмите «Добавить» — переменная появится в списке.
Подсказка. Часто переменную даже не нужно создавать вручную: когда вы
выбираете «новую» переменную прямо в поле карточки (например в «Запомнить
атрибут»), редактор создаёт её сам.
Чтобы подставить значение переменной в поле, пишите её имя в фигурных скобках:
{имя}. Во время выполнения {имя} заменится на текущее значение.
Примеры:
Привет, {имя}! → во время визита станет Привет, Анна!a[href*="livesurf.ru"] → подставит текущий домен страницы.В одном визите (один посетитель) может появиться несколько вкладок — но только
если их открывает сам сценарий или сайт, как в обычном браузере. От этого
зависит, как ведёт себя переменная:
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["первый шаг…"]
Это самая частая точка входа. Запускает цепочку, когда страница готова.
Настройки:
Если есть и «конкретные», и «любая» — сначала проверяются конкретные; если ни одна
не совпала, сработает «любая страница» (если такая карточка добавлена).
Это точка входа (как «Начало сценария»), но запускается не по загрузке страницы, а
когда значение переменной пересекает заданный порог. Удобно для лимитов и реакций
в духе «как только насчитали столько-то — сделать вот это»: вам не нужно после каждого
шага вручную вставлять проверку «Если» — этот узел следит за переменной сам и
срабатывает, даже если вкладка в этот момент занята другими шагами.
Настройки. Переменная, оператор (<, >, =) и значение — задаются как в
карточке «Если». Плюс режим: «Каждый раз» или «Один раз» (за вкладку).
Главное: узел срабатывает в момент ПЕРЕСЕЧЕНИЯ порога — один раз, а не всё время,
пока условие верно.
Разберём на примере. Пусть условие — кликов > 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-селекторы простыми словами; несколько строк
добавляются кнопкой «+ Добавить строку»). Вот общие правила — они одинаковы везде,
поэтому в самих карточках не повторяются.
{имя}) — в том числе встроенной livesurf.ru (доменУ всех карточек, которые ищут элемент по CSS-селекторам, есть галочка, которая
разрешает работать с элементом, даже если он сейчас намеренно скрыт стилями.
Подпись у неё на каждой карточке своя — по смыслу действия:
| Карточка | Подпись галочки |
|---|---|
| Клик на | Кликать невидимые |
| Перемещение к элементу | Наводить на невидимые |
| Прокрутка (режим «До элемента») | Прокручивать к невидимым |
| Фокусировка | Фокусировать невидимые |
| Запомнить элемент | Искать невидимые |
| Если (режим «Элемент на странице») | Учитывать невидимые |
Работает она везде одинаково:
Карточки, которыми сценарий начинается и заканчивается. Всё, кроме «Конца», —
это точки входа: «спусковые крючки», которые говорят, когда запустить цепочку
(у них есть только выход). Полный разбор каждой — в разделе
«Точки входа»; ниже — то же карточками.
<, >, =) и значение (задаются как в «Если»);
Действия, имитирующие то, что человек делает руками: кликает, печатает, листает.
2 — двойной клик. В режиме «по элементу» клиент всегда.cookies-accept — нажать кнопку
{имя_переменной}.купить телефон
0 — самый верх,100 — самый низ, 50 — середина. Процент можно задать числом или взять из переменной.
Действия для работы с содержимым страницы: найти, прочитать, изменить, удалить.
Многие из этих карточек используют атрибуты элемента. Атрибут — это «свойство»
элемента: например, у поля ввода атрибутvalueхранит введённый текст, у ссылки
атрибутhrefхранит адрес. По сути это просто именованное свойство элемента.
{переменная}), сравнить вhref у ссылки,value у поля) — сохранится его значение.1290,1490,990)..total-price, переменная сумма — забрать
:last-element — не повторяя длинный CSS-селектор в каждой:last-element — он указывает на запомненный элемент.:last-element останется тем, что был запомнен раньше.:last-element.card .actions > button.buy,:last-element.
.modal-overlay — убрать затемнение поверх страницы.
value) — мгновенно и целиком, в отличие от «Ввода текста»,value у поля ввода, href у ссылки).value меняет содержимое поля ввода. Если ни один#email, атрибут value, источник «Заданное значение» = адрес
href) или текст из поля..product-link, атрибут href, переменная ссылка — запомнитьvalue из #inputText1 в переменную temp.
disabled, чтобыreadonly с поля, которое нельзяbutton[disabled], атрибут disabled — снять блокировку с кнопки.
Карточки, управляющие ходом сценария: паузы, ветвления, переменные, случайность.
1000–3000 — случайно от 1 до 3 секунд.
<, >, =;=)..cta-button: ветка «да» — кликнуть,
0 (например, «Увеличить на 1»1).попытки, режим «Увеличить» на 1 — счётчик попыток в цикле.
5–10, клики выключены — 5–10 секунд «живого»
Карточки для связи сценария с вашим сервером по интернету: одна отправляет туда
значения переменных, другая забирает данные оттуда. Это продвинутая тема — нужен свой
адрес (URL), который принимает или отдаёт данные. Точный формат запроса и ответа, что
именно уходит на сервер и готовые примеры серверов (Node.js, PHP, Python) собраны в
отдельном разделе «Свой сервер для „Получить по ссылке“ и „Отправить по
ссылке“».
http/https, откуда брать данные.{переменной} в
http/https, куда отправлять.{переменной} в адресе не выполняется — адрес берётся буквально.Карточки только для оформления. Они не выполняются клиентом — нужны, чтобы
схема была понятной вам и коллегам.
Многие карточки просят указать CSS-селектор — это способ показать клиенту, на какой
именно элемент страницы действовать: по какой кнопке кликнуть, в какое поле печатать.
Селектор опирается на признаки, которые уже есть у элемента в коде страницы: его тип
(ссылка, кнопка, поле ввода), идентификатор id (уникальное имя элемента) или
класс class (метка, общая для похожих элементов), а также то, внутри чего он
находится. Из этих признаков и складывается селектор.
Самые частые виды:
| Селектор | Что выбирает |
|---|---|
#login |
элемент с идентификатором login (например, поле логина) |
.btn |
все элементы с классом btn |
a |
любые ссылки (ссылка в коде обозначается буквой a) |
button |
любые кнопки |
input |
любые поля ввода |
.card .price |
элемент с классом price внутри элемента с классом card — цена внутри карточки товара |
a[href*="example"] |
ссылка, в адресе которой есть example |
Селектор не обязательно составлять вручную — браузер умеет скопировать готовый для
любого элемента на странице. Принцип одинаков везде: открыть «инструменты разработчика»,
указать нужный элемент и выбрать в меню «копировать селектор». Ниже — по шагам для трёх
браузеров.
Ctrl+V) в поле «CSS-селекторы»📷 Заглушка под скриншот: Google Chrome — панель кода, открытое меню «Копировать» с
подсвеченным пунктом «Копировать селектор».
Яндекс.Браузер на том же движке, что и Chrome, поэтому шаги те же — отличается только
название первого пункта меню:
Ctrl+V) в поле «CSS-селекторы» карточки.📷 Заглушка под скриншот: Яндекс.Браузер — меню «Копировать» → «Копировать селектор»
в панели кода.
Ctrl+V) в поле «CSS-селекторы» карточки.📷 Заглушка под скриншот: Mozilla Firefox — Инспектор, меню «Копировать» с
подсвеченным пунктом «CSS-селектор».
Важно. Скопированный селектор часто получается длинным и привязанным к месту
(вродеbody > div:nth-child(3) > button). Он работает, но легко ломается при
малейшем изменении страницы. Если внутри виден понятный#idили короткий.class—
надёжнее оставить только его (см. таблицу выше).Проверить селектор можно сразу в панели кода: на вкладке с кодом нажмите
Ctrl+F
и вставьте селектор в строку поиска — браузер подсветит подходящие элементы и покажет,
сколько их нашлось. Нашёлся ровно один и тот, что нужен, — селектор хороший.
Иногда нужный элемент находится не на самой странице, а внутри встроенной страницы —
отдельной страницы, вставленной в основную (так подключают формы оплаты, встроенные
видео, виджеты). В коде такая вставка обозначается словом 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.ru — текущий домен.:last-element — особый селектор: «тот элемент, который мы запомнили карточкойКнопка «Проверка» в верхней панели проверяет все карточки на ошибки (пустые
обязательные поля, неверные селекторы, неправильные значения и т.п.).
Результат выводится в консоль внизу:
Проверяйте сценарий перед сохранением и перед запуском теста — так быстрее найти
опечатки.
«Запустить тест» позволяет по-настоящему прогнать ваш сценарий на реальном сайте
и увидеть, что происходит, прямо на холсте.
Нажмите «Запустить тест» — откроется форма:
Важно. Для теста нужен установленный и запущенный клиент LiveSurf на вашем
компьютере — именно он открывает сайт и выполняет шаги. Редактор сам по себе сайт
не «прокликает». Кружок-индикатор в верхней панели показывает связь с клиентом:
красный — не подключён, жёлтый — подключается, зелёный — на связи.
Что вы увидите во время теста:
Так консоль выглядит с сообщениями (здесь — текст справки, но во время теста сюда же
идёт пошаговый отчёт):
Остановить тест можно кнопкой «Остановить тест» (она появляется на месте кнопки
запуска).
Редактор открыт внутри формы проекта — там, где настраивается поведение. Эта форма
и хранит ваш сценарий: при открытии редактор загружает из неё текущий сценарий, а кнопка
«Сохранить» записывает изменения обратно.
Ctrl+S) — записать сценарий обратно в форму. Вверху виден.json (имя вида actions_2026-06-18T....json)..json. Текущий сценарий заменитсяCtrl+Z) и Повтор (Ctrl+Shift+Z) — откатывают и возвращаютCtrl+C) — копирует выделенные карточки.Ctrl+V) — вставляет их (рядом с курсором, если он на холсте).Ниже — несколько типовых задач и как собрать их в редакторе (названия карточек —
как в меню). Каждый рецепт можно повторить мышкой за пару минут.
Задача: подождать пару секунд и кликнуть по кнопке согласия с cookie.
flowchart TD
S(["▶ Начало сценария"]) --> W["Ждать 1500–3000 мс"]
W --> C["Клик на .cookies-accept"]
Шаги:
1500–3000..cookies-accept.Задача: прокрутить страницу частями (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 и карточки «Ждать» между ними. Соедините по цепочке.
Задача: листать вниз с паузами, пока не появится кнопка .cta-button, потом
кликнуть. Это ровно тот сценарий, что показан на скриншотах выше.
flowchart TD
S(["▶ Начало"]) --> IF{"Если: есть .cta-button?"}
IF -->|да ✓| CL["Клик на .cta-button"]
IF -->|нет ✕| SC["Прокрутка вниз"]
SC --> WT["Ждать 0.8–1.5 с"]
WT --> IF
Шаги:
.cta-button).800–1500.Задача: сделать что-то 5 раз с паузами, потом завершиться.
flowchart TD
S(["▶ Начало"]) --> INC["Установить переменную:<br/>попытки += 1"]
INC --> CHK{"Если: попытки < 5?"}
CHK -->|да ✓| P["Ждать 500 мс"] --> INC
CHK -->|нет ✕| END["Конец"]
Шаги:
попытки (целое число, начальное 0).попытки, режим «Увеличить» на 1.попытки < 5.500 → обратно в «Установить переменную».Задача: из 10 вкладек только одна оставляет отзыв, остальные продолжают как
обычно.
Шаги:
отзыв, режимотзыв.Этот раздел — для тех, у кого есть свой сервер (адрес в интернете, умеющий принимать
и отдавать данные).
Карточки «Отправить по ссылке» и «Получить по ссылке» работают с вашим
адресом в строго заданном формате — он одинаковый и «зеркальный» для обеих:
Формат рассчитан на ваш сервер, а не на произвольный сторонний сервис.
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: поле → переменная по строке «из поля → в переменную»
В каждом запросе два «кармана»:
Request-Meta,base64( JSON(меты) ). Заголовок есть и при отправке, и при получении.{ "payload": { "имя": "<base64-значения>" } }. ПриПро base64 (это способ записать любой текст безопасными символами; почти любой язык
кодирует и раскодирует его встроенной функцией):
42 уедет строкой "42" → "NDI=". После раскодирования сервер получит строку.Поля меты:
| Поле | Тип | Смысл |
|---|---|---|
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(значение) } } (не плоский объект и не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.
Детали:
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. Убедитесь, что клиент установлен и запущен.
Можно ли сохранить незаконченный сценарий?
Да. Незавершённые связи и пустые выходы сохраняются нормально — продолжите позже.
Чем отличается обычная переменная от общей 🌐?
Обычная — своя у каждой вкладки визита. Общая — одна на все вкладки: данные видны
всем сразу. См. Обычные и общие переменные.
Если что-то осталось непонятным — нажмите кнопку «?» на нужной карточке (справка
появится в консоли внизу) или спросите помощника «Режиссёр поведения» (синий кружок
справа внизу).
Ошибка в тексте
Страница:
Оригинал текста:
Ваш вариант:
Комментарий (не обязательно):
