Що відбувається, коли ви натискаєте кнопку Експортувати?
В прикладі браузера 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 продовжуйте працювати з робочим процесом додатки, щоб відстежувати файли та межі процесів.