agent-browser로 페이지를 열고 대화형 스냅샷을 만든 뒤 ref로 동작을 실행하고 결과를 확인합니다. 페이지가 바뀌었다면 다음 ref 동작 전에 스냅샷을 다시 받습니다. 숫자만으로는 어느 버튼인지 알 수 없습니다.
한 사용자는 DOM이 자주 바뀌는 페이지에서 ref가 유지되는지 물었습니다. 다른 사용자는 실패가 관찰되고 재현되는지 확인하자고 했습니다. 연습에서 두 가지를 구분합니다. r/ClaudeAI · r/AI_Agents
CLI와 세션의 관계
CLI는 백그라운드 프로세스에 명령을 보내므로 여러 명령이 실행 중인 브라우저를 이어서 사용할 수 있습니다. 한 작업에는 같은 --session 이름을 붙입니다. 스냅샷은 현재 탭을, 세션은 명령이 공유하는 브라우저 상태를 가리킵니다.
세션 · Tabbit과 agent-browser 비교 · 브라우저 에이전트 · 브라우저 자동화
연습 페이지 열기
설치된 CLI와 설정된 브라우저를 사용합니다. 공식 설치 문서를 확인하세요. HTML을 루프백에서 제공하거나 호스팅된 연습 페이지를 열 수 있습니다. 출력의 제목과 버튼 이름을 읽으세요. 출력에 ref=e2가 보이면 명령에는 @e2를 씁니다.
연습 실행하기
계정 없이 사용하는 HTML입니다. 빈 폴더에 fixture.html을 저장하고 다른 터미널에서 서버를 시작합니다. 페이지 제목을 확인하세요. 호스팅된 연습을 쓰려면 URL을 바꿉니다.
python3 -m http.server 4173 --bind 127.0.0.1agent-browser --session refs-demo-a open http://127.0.0.1:4173/fixture.html
agent-browser --session refs-demo-a snapshot -i
결정에 필요한 부분만 읽기
컨트롤을 고를 때 snapshot -i로 시작합니다. 설명이나 오류가 필요하면 전체 스냅샷이나 상태를 읽습니다. 필터에서 빠진 문구가 페이지에는 남아 있을 수 있습니다. 버튼이 반복되면 영역을 확인하고 스냅샷 범위를 좁힙니다.
오래된 ref 실패 재현하기
패널을 바꾸는 버튼을 누릅니다. URL은 같지만 원래 버튼이 사라집니다. 0.41.2에서 이전 @e3는 종료 코드 1을 반환하고 원래 버튼을 찾지 못했다고 표시했습니다. 다시 읽은 상태는 Panel B ready였습니다.
agent-browser --session refs-demo-a click @e2
agent-browser --session refs-demo-a get text '#status'
agent-browser --session refs-demo-a click @e3Panel B ready
✗ Could not locate element with role=button name=Use original action스냅샷을 다시 만들고 결과 확인하기
새 스냅샷에서 Use revised action은 @e5였습니다. 클릭 후 Panel B selected를 읽었습니다. 0.26.0에서는 새 스냅샷이 교체된 버튼에 @e3를 다시 할당했습니다. 숫자는 달라질 수 있으므로 매번 역할과 이름을 확인합니다.
agent-browser --session refs-demo-a snapshot -i
agent-browser --session refs-demo-a click @e5
agent-browser --session refs-demo-a get text '#status'| 컨트롤 또는 상태 | 관찰 결과 |
|---|---|
| 원래 버튼 | Use original action · @e3 |
| 새 버튼 | Use revised action · @e5 |
#status | Panel B selected |
증거 구분하기
첫 반환값은 패널 변경을 확인합니다. 오류는 이전 이름을 찾지 못했다는 뜻입니다. 마지막 읽기는 새 클릭의 결과를 확인합니다. 스냅샷과 상태를 함께 보관하세요.
유지될 수 있는 참조
공식 문서에 따르면 남아 있는 DOM 요소는 ref를 유지할 수 있습니다. 교체되면 조건에 따라 역할과 이름이 같은 요소 하나를 찾습니다. 연습에서는 원래 이름이 사라져 검색이 실패합니다. 이름이 여러 개 같으면 영역의 문맥을 포함해 다시 관찰합니다.
서로 다른 작업은 별도 세션으로
refs-demo-a, refs-demo-b처럼 이름을 지정합니다. 두 번째 세션은 별도 임시 프로필에서 같은 URL을 열어 Panel A ready를 표시했습니다. 첫 세션은 Panel B selected를 유지했습니다. 외부 브라우저가 같으면 이름만으로 로그인 상태가 분리되지는 않습니다.
agent-browser --session refs-demo-b open http://127.0.0.1:4173/fixture.html
agent-browser --session refs-demo-b get text '#status'
agent-browser --session refs-demo-a get text '#status'자동화 에이전트 · 에이전트 보안 · 기존 브라우저 연결
실험 브라우저
두 버전 모두 macOS에서 실제 Tabbit Browser Dev를 임시 프로필로 시작했습니다. 제품 실험은 agent-browser로, 글 페이지 검증은 별도로 Tabbit CLI로 실행했습니다. 설치는 플랫폼 공식 문서를 확인하세요.
분리 단위 고르기
탭은 페이지를 선택하고 세션은 명령 사이의 상태를 유지하며 프로필은 로컬 실행 데이터의 위치를 정합니다. 세션 안에서 설정을 유지하고 다음 테스트에는 별도 임시 프로필을 씁니다. 실행 설정을 바꾸면 브라우저가 재시작될 수 있습니다.
세션을 닫고 오류 원인 찾기
결과를 확인한 뒤 자신이 만든 세션만 이름으로 닫습니다. 필요하면 session list로 확인합니다. 새 ref도 실패하면 URL, 탭, 역할, 이름, 가시성을 살펴봅니다. 필요한 페이지 상태가 나타날 때까지 기다린 뒤 동작합니다.
| 실패 또는 관찰 | 다음 단계 |
|---|---|
| 패널 교체 후 이전 ref 실패 | 스냅샷을 다시 읽고 새 버튼 찾기 |
| 새 스냅샷에 같은 번호 | 새 이름과 역할 확인 |
| 새 ref도 실패 | 탭과 보이는 상태 확인 |
agent-browser --session refs-demo-a close
agent-browser --session refs-demo-b close
agent-browser session list
자주 묻는 질문
snapshot -i는 무엇을 반환하나요?
역할과 이름, ref를 포함한 대화형 페이지 보기를 반환합니다.
오래된 ref가 왜 실패하나요?
원래 요소가 사라지거나 새 스냅샷에서 할당이 달라질 수 있습니다.
가이드의 @e5를 복사해도 되나요?
자신의 스냅샷에서 해당 동작의 ref를 확인해야 합니다.
URL이 같으면 ref도 같나요?
페이지는 이동 없이 요소를 바꿀 수 있습니다.
클릭 후 무엇을 확인하나요?
상태 메시지, URL, 저장값 등 실제 결과를 읽습니다.
연습 세션은 어떻게 닫나요?
이름을 붙여 close를 실행하고 필요하면 session list로 확인합니다.