컨트롤의 역할과 접근성 이름을 브라우저가 제공한다면 그 정보로 먼저 찾습니다. 특정 레코드를 구분해야 하면 주변 DOM을 읽습니다. 차트에서 강조된 지점이나 버튼을 가린 요소를 확인하려면 새로 캡처합니다.
Playwright 커뮤니티의 게시물에는 에이전트가 이름이 같은 Add to Cart 버튼 중 아홉 번째를 선택한 사례가 나옵니다. 부족했던 건 버튼과 상품의 연결 정보입니다. 상품 카드의 제목이나 고정 ID를 이용하면 정렬이 바뀌어도 대상을 지정할 수 있습니다. Tabbit Browser에서도 같은 원칙을 한 탭에 적용할 수 있습니다.
핵심 정리
역할과 이름으로 동작을 식별하고 대상 행, 양식 또는 대화 상자로 검색 범위를 좁힙니다.
DOM 속성은 레코드를 구분하는 데 쓰입니다. 노드를 찾은 뒤에도 표시 상태와 클릭 가능 여부를 확인합니다.
화면 인식으로 대상을 판별한 다음 의미 기반 로케이터로 동작을 실행할 수 있습니다.
페이지가 바뀌면 다시 관찰하고 클릭 결과와 별도로 실제 상태를 확인합니다.
세 가지 입력 비교
| 입력 | 확인할 수 있는 정보 | 빠지기 쉬운 정보 | 먼저 써 볼 때 |
|---|---|---|---|
| DOM 일부 | 현재 노드, 텍스트, 속성 | 숨겨진 요소도 검색될 수 있음 | ID로 행을 찾을 때 |
| 접근성 스냅샷 | 역할, 이름, 일부 상태 | 앱 전용 ID 또는 화면 위치 | 이름이 붙은 입력칸이나 버튼을 찾을 때 |
| 화면 캡처와 이미지 해석 | 그려진 위치, 색, 배치 | 촬영 시점과 화면 범위에 따라 달라짐 | 가림 요소나 캔버스를 볼 때 |
JavaScript가 실행되면 DOM은 처음 받은 HTML과 달라질 수 있습니다. 접근성 스냅샷은 제목과 선택 상태를 보여 주면서 CSS 클래스 등을 생략할 수 있습니다. 관찰에 쓰는 입력과 실행 방법은 별개입니다. 컴퓨터 제어 도구는 구현에 따라 브라우저 밖도 다룹니다. ARIA 스냅샷 · 로케이터
클릭 전에 레코드부터 특정하기
송장 카드 두 장에 모두 저장 버튼이 있다면 송장 번호나 안정적인 속성으로 카드를 고릅니다. 그 카드 안에 버튼이 하나만 있는지 확인합니다. 다른 Playwright 게시물에서는 역할이 드러나지 않는 커스텀 드롭다운에 테스트 ID를 쓰는 방안이 나왔습니다. 직접 관리하는 앱이라면 레이블과 키보드 동작을 점검합니다. 외부 사이트라면 트리거와 열리는 메뉴를 살펴봅니다.
Playwright는 대상이 보이고 안정적인지, 활성화됐는지, 이벤트를 받을 수 있는지 확인합니다. 대화 상자가 포인터를 가로채면 버튼 클릭 문제 해결법에서 원인별로 확인할 수 있습니다. 동작 가능 조건
그림에만 있는 대상과 현재 위치 확인하기
DOM에는 캔버스 하나만 있어도 이미지에서는 차트의 두 계열을 구분할 수 있습니다. 접근 가능한 범례, 키보드 조작, 데이터 내보내기가 있는지 확인합니다. 캔버스는 대체 콘텐츠를 지원합니다. 화면에서 열린 메뉴를 찾은 다음 항목을 역할로 고를 수도 있습니다. 그려진 대상에 별도 컨트롤이 없다면 좌표나 제스처가 필요할 수 있습니다. Playwright 마우스 좌표는 뷰포트의 CSS 픽셀을 사용합니다. 잘라낸 위치와 크기 비율을 고려하고, 배너가 차트를 밀어내면 새로 캡처합니다. 캔버스 문서 · 마우스 API
Tabbit 한 탭에서 두 관찰 방법 쓰기
상품 코드를 저장한 뒤 색을 고르는 예입니다. Item code와 Save item은 이름으로 찾아 저장된 코드를 확인합니다. 그려진 색상 선택기는 현재 화면을 읽고, 동작 뒤에 색상 상태를 확인합니다.
공식 Tabbit CLI 시작 가이드에는 탭에 연결하는 방법이, CLI 안내서에는 작업과 결과 확인 방법이 나옵니다. MCP로 연결한다면 Playwright MCP 프로젝트와 설정 가이드를 참고할 수 있습니다. 연결 방식은 브라우저 제어 가이드에서 비교할 수 있습니다.
다음 동작 결정하기
| 상황 | 다음 단계 | 확인 기준 |
|---|---|---|
| 여러 레코드의 동작 이름이 같음 | 제목이나 안정적인 ID로 범위 제한 | 올바른 레코드에 일치 항목 하나 |
| 화면에는 있지만 스냅샷에는 없음 | DOM 일부를 확인하고 필요하면 캡처 | 식별할 수 있는 컨트롤 또는 현재 이미지 |
| 캡처 뒤에 배치가 바뀜 | 다시 관찰 | 현재 위치와 올바른 대상 |
| 클릭이 끝났지만 상태가 그대로임 | 재시도 전에 상태 읽기 | 확인된 결과, 알려진 실패 또는 검토 대기 |
관찰 범위를 줄이면 필요한 정보만 읽을 수 있습니다. 반복 작업의 성공 건당 비용에는 재시도와 검토도 포함합니다. 데이터 조회가 목적이라면 API나 MCP 도구를 제공하는지 확인합니다. 프롬프트에 대상과 기대 결과를 쓰고 첫 작업 체크리스트로 중단 기준을 정합니다. 이미 열린 탭에서 관찰과 동작을 이어가야 한다면 Tabbit을 사용할 수 있습니다.
자주 묻는 질문
접근성 스냅샷은 DOM과 같은가요?
DOM에는 노드와 속성이 있습니다. 스냅샷은 계산된 역할, 이름, 상태를 보여 주며 앱 전용 ID와 위치 정보는 생략할 수 있습니다.
DOM을 읽는 에이전트가 캔버스를 조작할 수 있나요?
캔버스 요소와 앱이 노출한 의미 있는 컨트롤은 찾을 수 있습니다. 대상이 그림에만 있다면 이미지나 앱이 제공하는 다른 조작 방법이 필요합니다.
화면을 언제 다시 캡처해야 하나요?
다음 동작이 위치에 의존한다면 스크롤, 확대, 창 크기 변경, 대화 상자 표시 후 다시 캡처합니다. 결과가 시각적으로 드러나면 동작 뒤에도 확인합니다.
화면 인식은 항상 좌표로 클릭하나요?
화면 인식은 이미지를 해석합니다. 혼합형 도구는 해석한 결과를 의미 기반 로케이터나 키보드 동작으로 연결할 수 있으며, 요소를 식별할 수 없을 때 좌표를 쓸 수 있습니다.
저장 버튼을 누른 뒤 무엇을 확인하나요?
대상 레코드의 저장 상태, 저장된 값 또는 처리 결과를 확인합니다. 결과가 애매하면 중복 제출을 피하도록 재시도 전에 상태를 읽습니다.
처음 보는 사이트에서는 무엇을 먼저 쓰나요?
레이블이 붙은 컨트롤은 역할과 이름부터 확인합니다. 레코드가 반복되면 DOM 범위를 좁히고, 모양이나 위치가 필요할 때는 이미지를 추가합니다.