Co się stanie po kliknięciu przycisku Eksportuj?
The Przykład przeglądarki notatek ma Eksportuj notatki przycisk. Kliknięcie go ładuje notes.json, formatuje dwie notatki jako CSV i rozpoczyna pobieranie.
Od kliknięcia do pobrania CSV
- 01 * TyKliknij Eksportuj notatkiWykonaj akcję w przeglądarce, gdy przechwytywanie jest uruchomione.
- 02 * REA Zapisz żądaniePrzechwyć adres URL żądania, status odpowiedzi i strukturę JSON z wybranej strony.
-
03 * Twój agentPrzeczytaj kod eksportuPołącz obserwowane żądanie z
fetch("./notes.json")wexport.js.
GET notes.json → 200 → notes[] → CSV
Otwórz Chrome ze zdalnym debugowaniem
Otwórz przykład hostowanych notatek za pomocą oddzielnego profilu przeglądarki i lokalnego portu debugowania. Na Linux :
google-chrome \
--remote-debugging-port=9222 \
--user-data-dir=/tmp/rea-notes-browser \
https://rea.tools/examples/notes-web/Użyj ścieżki wykonywalnej zainstalowanej przeglądarki na macOS lub Windows . Możesz zastąpić adres URL strony inną stroną, którą chcesz sprawdzić.
REA łączy się z tą istniejącą przeglądarką. Zachowujesz kontrolę nad stroną, wykonujesz akcję i zamykasz przeglądarkę po zakończeniu.
Poproś swojego agenta, aby obejrzał jedną akcję
Użyj REA, aby sprawdzić tę stronę, gdy klikam Eksportuj notatki. Jakie jest żądanie i jak zbudowany jest CSV?
Przykładowy monit. Daj swojemu agentowi punkt końcowy debugowania, http://127.0.0.1:9222, oraz adres URL strony. Pozwól mu rozpocząć przechwytywanie, zanim klikniesz.
Twój agent odkrywa cel strony, uruchamia okno obserwacji i odczytuje wynikowe dowody. Następnie może sprawdzić skrypt za eksportem.
Lub przechwytywanie z terminala
Znajdź identyfikator docelowy strony:
npx -y rea-agents@latest list-browser-targets \
http://127.0.0.1:9222 --json
Wybierz cel z przykładowym adresem URL notatek. Wymienić TARGET_ID poniżej z jego ID, a następnie uruchom:
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 --jsonPozwól poleceniu połączyć się przez kilka sekund, a następnie kliknij Eksportuj notatki w tej przeglądarce. Wynik pojawia się po zakończeniu okna obserwacji.
Przechwycony wynik obejmuje wybraną stronę, aktywność sieciową w tym oknie oraz kształt odpowiedzi JSON. Wcześniejsze żądania są poza tym przechwytywaniem.
Przeczytaj skrypt żądania i eksportu
| Uchwycony fakt | Wartość |
|---|---|
| Prośba | GET /examples/notes-web/notes.json |
| Odpowiedź | 200 · application/json |
| Inicjator żądania | export.js * skrypt |
| Struktura odpowiedzi |
notes[] z id oraz title pola
|
npx -y rea-agents@latest inspect-web-page \
http://127.0.0.1:9222 TARGET_ID \
--include-script-sources --json
Żądanie identyfikuje źródło danych i rekordy REA export.js jako jego inicjator. Przeczytaj przechwycone źródło skryptu, aby zobaczyć, jak dane są używane:
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();
Pobieranie jest konstruowane na stronie przy użyciu odpowiedzi JSON. Krok formatowania CSV pochodzi ze skryptu; przechwytywanie sieci ustala, że to kliknięcie jest wymagane notes.json.
Otwórz przykład · Pobierz export.js · Pobierz notes.json
Znajdź skrypt, który żąda
notes.json. Jak uniknąć tytułów zawierających przecinki lub cudzysłowy?
W przypadku zainstalowanej aplikacji JavaScript lub Electron Kontynuuj przepływ pracy aplikacji aby śledzić pliki i granice procesów.