Веб-форма в браузере

Что понадобится #

• Студия Tulpar и браузер Microsoft Edge (он есть в Windows 10 и 11).
• Файлы примеров: 03_web_form.flow.json, 04_excel_to_web.flow.json, form.html и clients.xlsx.

Процессы ищут форму и таблицу по путям ../web/form.html и ../data/clients.xlsx — относительно своей папки. Проще всего открыть готовые копии из папки студии: samples\flows\03_web_form.flow.json. Если скачиваете файлы с сайта, разложите их так же:

C:\Уроки\Браузер\flows\03_web_form.flow.json
C:\Уроки\Браузер\flows\04_excel_to_web.flow.json
C:\Уроки\Браузер\web\form.html
C:\Уроки\Браузер\data\clients.xlsx

form.html — учебная страница „Заявка на подключение“: ФИО, телефон, город и кнопка „Отправить заявку“. После отправки она показывает номер заявки вида Z-123456. Откройте её в Edge и подайте заявку руками — так проще понять, что будет делать робот.

Шаг 1. Откройте процесс веб-формы #

В студии нажмите «Открыть» и выберите 03_web_form.flow.json. На вкладке «Переменные» — аргументы fio, phone, city и headless: значения формы можно поменять при запуске, не меняя процесс.

Шаг 2. Как робот находит поля #

1. browser.open открывает ../web/form.html в Edge (msedge).
2. browser.typeInto вводит ФИО в поле с селектором #fio, телефон — в #phone.
3. browser.selectOption выбирает город в списке #city.
4. browser.click нажимает #submit.

Селектор — адрес элемента на странице: #fio значит „элемент с id fio“. Подходят также text=…, role=… и xpath=…. Чтобы узнать id поля, откройте форму в Edge, щёлкните поле правой кнопкой мыши → „Проверить“ (F12).

Шаг 3. Ответ страницы #

browser.waitElement ждёт, пока блок #result станет видимым (до 10 секунд), а browser.getText читает номер из #requestNumber в переменную requestNumber. Условие control.if проверяет формат номера выражением /^Z-\d{6}$/.test(requestNumber); в конце browser.close закрывает браузер.

Шаг 4. Запуск #

Нажмите «Запуск» (F5): откроется окно аргументов. Оставьте значения или впишите свои и нажмите «Запустить». Edge откроется, форма заполнится и отправится сама.

Аргумент headless = true запускает браузер без окна — так работают фоновые роботы.

Шаг 5. Заявки за всех клиентов из Excel #

Откройте 04_excel_to_web.flow.json. Он объединяет этот урок с уроком Таблица Excel:

• читает clients.xlsx шагом excel.readRange;
• в цикле „Для каждого клиента“ заполняет форму значениями {{ client['ФИО'] }}, {{ client['Телефон'] }}, {{ client['Город'] }};
• пишет номер заявки в колонку „Статус“ копии clients_result.xlsx шагом excel.writeCell;
• нажимает „Подать ещё одну заявку“ (#newRequest) и переходит к следующему клиенту.

Что должно получиться #

• Первый процесс: в «Лог» — Заявка принята, номер: Z-…, запуск завершился успешно.
• Второй процесс: в логе пять строк вида 1. Асанов Нурлан Бакытович — заявка Z-… и итог Готово: номера заявок записаны в clients_result.xlsx (5 шт.); в data\clients_result.xlsx в колонке „Статус“ — пять номеров.

Если не получилось #

Дальше — урок Windows-приложение: робот работает с окнами обычной программы.