Что происходит, когда вы нажимаете кнопку Экспортировать?
В примере браузера Notes есть кнопка экспорта заметок. При нажатии на нее загружается файл notes.json, две заметки форматируются как CSV и начинается загрузка.
От клика до загрузки CSV
- 01 · Вы нажимаете кнопку Экспорт заметок и выполняете это действие в своем браузере во время выполнения записи.
- 02 · REA Запишите запрос, захватите URL-адрес запроса, статус ответа и структуру JSON с выбранной страницы.
-
03 · Ваш агент прочитал экспортный код, подключающий наблюдаемый запрос к
fetch("./notes.json")вexport.js.
GET notes.json → 200 → notes[] → CSV
Откройте Chrome с удаленной отладкой
Откройте размещенный на хостинге пример Notes, используя отдельный профиль браузера и локальный порт для отладки. На Linux :
google-chrome \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/rea-notes-browser \
https://rea.tools/examples/notes-web/Используйте путь к исполняемому файлу вашего установленного браузера в macOS или Windows . Вы можете заменить URL-адрес страницы на другую страницу, которую хотите просмотреть.
REA подключается к этому существующему браузеру. Вы сохраняете контроль над страницей, выполняете действие и по завершении закрываете браузер.
Попросите своего агента посмотреть одно действие
Используйте REA, чтобы просмотреть эту страницу, пока я нажимаю "Экспортировать заметки". Какой запрос она отправляет и как устроен CSV?
Пример запроса. Укажите вашему агенту конечную точку отладки, http://127.0.0.1:9222 и URL-адрес страницы. Пусть он запустит запись до того, как вы нажмете.
Ваш агент обнаруживает целевую страницу, запускает окно просмотра и считывает полученные данные. Затем он может проверить сценарий, лежащий в основе экспорта.
Или захват с терминала
Найдите целевой идентификатор страницы:
npx -y rea-agents@latest list-browser-targets \
http://127.0.0.1:9222 --json
Выберите целевой объект с помощью URL-адреса, приведенного в примере Notes. Замените TARGET_ID ниже на его идентификатор, затем запустите:
npx -y rea-agents@latest inspect-web-page \
http://127.0.0.1:9222 TARGET_ID \
--observation-ms 10000 \
--include-accessibility-text \
--include-json-body-shapes --jsonДайте команде подключиться в течение нескольких секунд, затем нажмите "Экспортировать заметки" в этом браузере. Результат появится после завершения просмотра.
Полученный результат включает выбранную страницу, сетевую активность в течение этого окна и форму ответа в формате JSON. Предыдущие запросы не входят в этот список.
Прочитайте запрос и экспортируйте скрипт
| Зафиксированный факт | Ценность |
|---|---|
| Запрос | GET /examples/notes-web/notes.json |
| Ответ | 200 · application/json |
| Инициатор запроса | export.js · сценарий |
| Структура ответа |
notes[] с полями id и title
|
npx -y rea-agents@latest inspect-web-page \
http://127.0.0.1:9222 TARGET_ID \
--include-script-sources --json
Запрос идентифицирует источник данных, и REA записывает export.js export.js качестве инициатора запроса. Прочитайте захваченный исходный код сценария, чтобы увидеть, как используются данные:
const response = await fetch("./notes.json");
const { notes } = await response.json();
// Format each note as a CSV row.
const url = URL.createObjectURL(new Blob([csv], { type: "text/csv" }));
link.href = url;
link.download = "notes.csv";
link.click();
Загрузка выполняется на странице с использованием ответа в формате JSON. Шаг форматирования CSV выполняется из скрипта; сетевой анализ показывает, что при этом щелчке запрашивался файл notes.json.
Откройте пример · Скачать export.js · Загрузите файл notes.json
Найдите скрипт, который запрашивает файл
notes.json. Как он экранирует заголовки, содержащие запятые или кавычки?
Для установленного приложения JavaScript или Electron продолжайте работать с рабочим процессом приложения, чтобы отслеживать файлы и границы процессов.