Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Antigravity (AGY) CLI, BrowserMCP, Playwright, 브라우저 에이전트를 사용한 자동 UI 테스트

1. 소개

에이전트 AI 혁명은 소프트웨어 구축 방식을 변화시켜 전체 프로세스를 매우 멋지고 흥미롭고 접근하기 쉽게 만듭니다. 이전에는 개발자가 몇 달이 걸려 완료했던 작업과 프로젝트를 이제 에이전트 도구를 사용하여 단일 세션에서 완료할 수 있습니다.

이러한 에이전트형 변환이 가능한 분야 중 하나는 웹 애플리케이션 테스트입니다. 기존에는 웹 앱 테스트가 번거롭고 취약성과의 끊임없는 싸움이었습니다. 하지만 이러한 복잡성을 완전히 우회할 수 있다면 어떨까요? 간단히 에이전트에게 테스트할 내용을 자연어로 알려주고 에이전트가 실행 방법을 추론하도록 할 수 있다면 어떨까요?

이 Codelab에서는 에이전트 기술 및 BrowserMCP와 같은 멀티모달 MCP 도구와 함께 Antigravity CLI를 사용하는 방법을 알아봅니다. 자연어를 사용하여 자동화된 UI 테스트를 만들고 실행하는 방법을 알아보고, 에이전트형 도구가 복잡한 작업을 처리하고 빌더에게 초능력을 부여하는 방법을 알아봅니다.

이 Codelab에서는 UI 자동화 및 브라우저 원격 제어의 구체적인 사용 사례에 중점을 두지만, 진정으로 중요한 것은 기본적인 원칙과 이러한 원칙이 열어주는 무한한 가능성입니다. 에이전트에게 로컬 CLI와 MCP 서버를 사용하도록 가르침으로써 시간이나 전문 지식이 없어 직접 처리할 수 없는 복잡한 워크플로를 위임할 수 있습니다.

실습 내용

Antigravity CLI가 무엇이며 Antigravity 생태계에 어떻게 적용되는지
모델 컨텍스트 프로토콜 (MCP)이란 무엇이며 왜 획기적인가요?
BrowserMCP를 통해 AI 에이전트가 웹브라우저를 제어하는 방법
Antigravity CLI에서 자동화된 UI 테스트를 실행하는 방법
에이전트 기술과 그 이점 이해
스킬을 사용하여 Playwright를 사용하도록 에이전트를 가르칩니다.
Antigravity의 기본 제공 브라우저 에이전트 이해하기
브라우저 제어의 기타 사용 사례

실습 내용

이 Codelab에서는 Antigravity CLI, MCP 도구, 에이전트 스킬, React 데모 애플리케이션을 사용합니다.

실습할 내용은 다음과 같습니다.

개발 환경을 설정합니다.
테스트가 필요한 데모 애플리케이션을 살펴봅니다.
Antigravity CLI를 사용하여 BrowserMCP를 통해 애플리케이션과 상호작용합니다.
에이전트 스킬을 사용하여 에이전트에게 Playwright 사용 방법을 가르칩니다.

2. Antigravity 생태계

2026년 5월, Google은 새로운 Antigravity 제품군을 출시했습니다. 이는 Antigravity를 대대적으로 개편한 것으로, 다음과 같은 4가지 제품으로 분할되었습니다.

이제 데스크톱에서 전용 에이전트 우선 '빌더' 환경인 Antigravity 2.0을 사용할 수 있습니다. 특히 IDE가 포함되어 있지 않습니다. 대신 이제 에이전트 관리자와만 상호작용합니다. 이 환경은 코드를 신경 쓰지 않고 에이전트를 사용하여 '아이디어에서 제품'으로 이어지는 시대를 열고자 합니다. 코딩 배경이 없는 많은 빌더가 이 기능을 좋아할 것입니다.
Antigravity 에이전트 하네스가 지원하는 더 친숙한 VS Code 스타일 코딩 환경을 제공하는 Antigravity IDE입니다. 여기에서 에이전트 지원 개발을 할 수 있으며 항상 코드가 표시됩니다. 코더는 여기에서 편안함을 느낄 것입니다.
Antigravity를 지원하는 하네스와 도구를 제공하지만 Python 에이전트 SDK로 노출되는 Antigravity SDK입니다. google.antigravity에서 가져오면 프로그래매틱 방식으로 Antigravity의 기능을 활용할 수 있습니다.
Antigravity CLI는 매우 멋진 Gemini CLI의 다음 단계입니다. 여전히 Gemini 모델과 상호작용하기 위한 터미널 우선 환경입니다. 하지만 새로운 Antigravity CLI는 Go로 빌드되었으며, 시작 시와 일반적인 사용 시 모두 Gemini CLI보다 훨씬 빠릅니다. Antigravity 2.0 및 IDE와 동일한 에이전트 '하네스'를 활용하므로 Antigravity 제품군 전반에서 공통 설정 및 구성이 가능합니다.

이 실습에서는 Antigravity CLI 사용에 중점을 두지만 Agy IDE 또는 Agy 2.0으로도 이 실습의 모든 작업을 수행할 수 있습니다.

3. 기본 요건

멋진 기능을 살펴보기 전에 필요한 모든 항목이 있는지 확인해 보겠습니다.

도구

이 실습에서는 다음이 이미 있다고 가정합니다.

Chrome 브라우저
Node.js
Antigravity CLI
Git

Antigravity CLI를 사용하려면 Google로 인증해야 합니다. agy를 처음 실행하면 기본 웹브라우저를 통해 Google 로그인 메시지가 자동으로 표시됩니다. 이 옵션은 Gemini 사용에 대한 넉넉한 무료 할당량을 제공하며 Google Cloud 프로젝트가 필요하지 않습니다. Gemini API 키 또는 Google Cloud 프로젝트가 있는 경우 이를 구성할 수도 있습니다.

이 안내에서는 Linux (또는 WSL) 또는 macOS 환경에서 작업한다고 가정합니다. Windows를 사용하는 경우 (저와 같이) WSL을 사용하여 따라할 수 있습니다.

(BrowserMCP는 동일한 머신에서 실행되는 로컬 브라우저에만 연결되므로 Google Cloud Shell에서는 작동하지 않습니다.)

개발 환경 설정

GitHub에 데모 저장소를 만들었습니다. 여기에는 UI 테스트에 사용할 수 있는 샘플 애플리케이션이 포함되어 있습니다. 로컬 터미널에서 다음을 실행하여 클론합니다.

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

데모 앱을 실행할 환경을 쉽게 설정할 수 있는 Makefile이 있습니다. 이를 실행하여 환경을 초기화해 보겠습니다.

make install

# Or if you don't have make
npm install --prefix demo-app

4. 데모 애플리케이션

오늘 테스트할 앱은 The Dazbo Omni-Dash입니다. 보안 원격 분석을 관리하는 미래 지향적인 어두운 테마의 대시보드입니다. (예, 바이브 코딩되었습니다.)

이 앱을 선택한 이유

다음과 같은 실제 테스트 표면을 제공하도록 빌드되었습니다.

모의 인증: 특정 사용자 인증 정보가 필요한 로그인 흐름입니다.
동적 콘텐츠: 실시간 데이터를 시뮬레이션하는 원격 분석 카드 및 보안 로그
상호작용 상태: 사용자 작업에 따라 변경되는 탐색 메뉴와 양식 입력입니다.
최신 기술: 빠르고 반응성이 뛰어난 환경을 위해 React 및 Vite로 빌드되었습니다.

앱 실행

애플리케이션을 시작하려면 다음을 실행하면 됩니다.

make dev

# Or if you don't have make
npm run dev --prefix demo-app

개발 서버가 매우 빠르게 시작되고 앱은 http://localhost:5173에서 사용할 수 있습니다.

링크를 클릭하여 브라우저에서 애플리케이션을 열면 됩니다. 이 프로세스는 터미널에서 실행 상태로 둡니다. 후속 터미널 명령어는 별도의 터미널 세션에서 실행합니다.

5. UI 테스트의 문제점

기존 UI 테스트는 올바르게 실행하기가 어렵고 유지관리는 더 어렵습니다. 일반적인 문제점은 다음과 같습니다.

높은 학습 곡선: 기본적인 상호작용을 자동화하기 위해 개발자가 복잡한 도메인별 언어와 프레임워크별 특성 (예: Selenium 또는 Playwright)을 익히는 데 많은 시간을 투자해야 합니다.
취약한 선택기 및 자동화: 기존 스크립트는 엄격한 DOM 구조 (예: div > div > button) 또는 특정 텍스트 라벨에 의존합니다. '로그아웃' 버튼의 이름을 '로그오프'로 변경하면 어떻게 되나요? 또는 버튼을 완전히 다른 메뉴로 이동할 수 있나요? 또는 HTML 구조를 변경할 수 있나요? 이러한 작업을 수행하면 기존 테스트 도구가 작동하지 않아 스크립트를 지속적으로 유지관리해야 합니다.
'불안정성' 테스트: 타이밍 문제, 경합 상태 또는 느리게 로드되는 애셋으로 인해 1분 후에는 통과하지만 다음에는 실패하는 테스트입니다.
환경 패리티: 복제하기 어려운 애플리케이션 상태와 테스트 데이터를 정리하는 오버헤드에 대한 문제

의도와 구현

이러한 문제를 해결하려면 구현이 아닌 의도에 중점을 두는 테스트 방법이 필요합니다.

에이전트 AI 도구를 활용하면 사소한 UI 조정과 구조적 변경으로부터 완전히 격리된 반복 가능한 자동화를 만들 수 있습니다. 이름, 라벨 또는 객체의 정확한 계층 구조를 하드 코딩하는 대신 에이전트는 사용자의 자연어 의도에 따라 작업을 실행합니다. 버튼이 이동하거나 라벨이 약간 변경되더라도 상담사의 멀티모달 기능을 통해 요소를 찾아 작업을 성공적으로 완료할 수 있습니다.

6. MCP로 문제 해결

모델 컨텍스트 프로토콜 (MCP)은 AI 모델과 에이전트가 외부 도구, API, 데이터와 상호작용할 수 있도록 지원하는 개방형 표준입니다. 모델과 에이전트가 액세스할 수 있는 도구를 찾아 실행할 수 있도록 지원하는 범용 어댑터라고 생각하면 됩니다.

기존에는 대규모 언어 모델 (LLM)을 외부 데이터 및 도구와 통합하려면 개발자가 모든 새 데이터 소스에 맞춤 하드 코딩된 API 연결을 작성해야 했으며, 이로 인해 모든 새 모델과 도구가 유지관리 부담을 가중시키는 지속 불가능한 'M x N' 통합 문제가 발생했습니다. 모델 컨텍스트 프로토콜 (MCP)은 이러한 기능을 조정하기 위해 특정 코드를 작성할 필요가 없도록 하여 이 문제를 해결합니다. 복잡한 실행 워크플로를 명시적으로 코딩하는 대신 개발자는 LLM이 사용자의 자연어 요청을 해석하고 즉석에서 사용할 도구를 동적으로 추론하도록 할 수 있습니다.

사용자가 자연어 명령 (예: 'localhost:5173으로 이동하여 'admin'으로 로그인하고 제출 버튼을 클릭해')을 실행하면 LLM이 사용 가능한 기능을 검색하고 특정 도구를 호출하는 구조화된 요청을 생성합니다. MCP 클라이언트는 번역기 역할을 하여 이 요청을 지정된 MCP 서버로 라우팅합니다. 그러면 MCP 서버가 작업을 실행하거나 데이터를 가져와 모델에 컨텍스트를 반환합니다. 이를 통해 개발자가 특정 실행 경로를 하드 코딩하지 않아도 AI가 자율적으로 작동할 수 있습니다.

MCP는 'AI 애플리케이션용 USB-C'로 설명되는 범용 표준을 생성하므로 대규모 기성 재사용성을 지원합니다. 개발자는 MCP 서버를 한 번만 빌드하면 MCP 호환 AI 호스트가 즉시 연결할 수 있으므로 M x N 통합 문제가 해결됩니다. 이제 플랫폼마다 맞춤 API 브리지를 빌드할 필요가 없습니다. 대신 GitHub, Slack, 데이터베이스 등 일반적인 서비스에 대해 사전 빌드된 오픈소스 MCP 서버의 생태계를 활용하여 에이전트 워크플로에 바로 연결할 수 있습니다. 이 모듈식 플러그 앤 플레이 아키텍처를 사용하면 나중에 LLM 제공업체를 전환하거나 도구를 업그레이드하더라도 핵심 통합 인프라가 완전히 변경되지 않습니다.

7. BrowserMCP를 사용한 자동화

BrowserMCP란 무엇인가요?

이것이 오늘 사용할 첫 번째 도구입니다. BrowserMCP는 AI 에이전트가 웹브라우저와 상호작용하는 데 필요한 '눈'과 '손'을 제공하는 MCP 서버입니다. 간단히 말해 브라우저와의 인간 상호작용을 모방합니다. 오픈소스이며 여기에서 GitHub 저장소를 확인할 수 있습니다. 기본 BrowserMCP 문서를 참고하세요.

다음은 이 도구의 기능입니다.

URL로 이동할 수 있습니다.
DOM을 검사할 수 있습니다.
버튼을 클릭하고 양식에 텍스트를 입력할 수 있습니다.
드래그 앤 드롭할 수 있습니다.
브라우저 콘솔 로그를 읽을 수 있습니다.
빠름: 자동화는 머신에서 로컬로 실행됩니다.

브라우저 MCP 설치

BrowserMCP를 사용하려면 다음 두 가지 작업을 실행해야 합니다.

Chrome (또는 Chromium 기반 브라우저)에 BrowserMCP 확장 프로그램을 설치합니다.
Antigravity 구성에서 MCP 서버를 수동으로 구성합니다.

확장 프로그램을 설치하려면 여기의 안내를 따르세요. 몇 초면 완료됩니다. 설치가 완료되면 확장 프로그램에서 '연결'을 클릭하여 상담사가 현재 탭을 제어할 수 있도록 허용합니다. (데모 애플리케이션이 실행되는 탭이 현재 탭이어야 합니다.)

다음으로 Antigravity에서 실제 MCP 서버를 구성합니다. 이렇게 하려면 전역 mcp_config.json 파일에 browsermcp 서버 정의를 추가합니다.

~/.gemini/config/mcp_config.json 파일을 만들거나 수정하고 다음 구성을 추가합니다.

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

Antigravity 생태계에서 MCP 서버와 스킬을 설정하는 방법에 관한 자세한 안내는 다음 리소스를 참고하세요.

BrowserMCP로 테스트

이제 마법을 부려 보겠습니다. 먼저 새 터미널 세션에서 agy를 실행하여 Antigravity CLI를 실행합니다. (데모 애플리케이션은 초기 터미널 세션에서 실행됩니다.) 양방향 TUI 내에서 /mcp를 입력하여 활성 도구 목록을 확인하고 browsermcp를 사용할 수 있는지 확인합니다.

이전에 데모 애플리케이션을 시작하지 않았다면 지금 실행하세요.

make dev

아직 하지 않았다면 Chrome 브라우저에서 앱을 열고 해당 탭에서 BrowserMCP 확장 프로그램을 연결해야 합니다. run 명령어의 링크를 따르세요. 그런 다음 BrowserMCP 확장 프로그램 아이콘을 클릭하고 '연결'을 클릭합니다.

이제 Agy CLI를 사용하여 테스트를 실행할 수 있습니다. 다음 프롬프트를 복사하여 CLI에 붙여넣습니다.

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

CLI는 먼저 데모 애플리케이션이 지정된 포트에서 실행되고 있는지 확인할 수 있습니다. 그런 다음 실행할 도구 작업을 확인하라는 메시지가 표시됩니다.

CLI가 이 세션의 모든 BrowserMCP 도구를 실행하도록 허용합니다. 그런 다음 브라우저로 돌아가 자동 상호작용이 발생하는 것을 확인합니다.

위 프롬프트에 관해 몇 가지 참고할 사항이 있습니다.

애플리케이션이 이미 로그인되어 있는 경우 에이전트에게 로그아웃하라고 지시합니다. 상담사에게 '게이트웨이 종료'와 같은 특정 텍스트를 클릭하라고 안내할 필요는 없습니다. 클릭할 항목을 파악할 수 있을 만큼 스마트합니다.
로그인하고 기본 페이지를 렌더링한 후 에이전트가 원격 분석 정보를 캡처합니다. 다시 말하지만 상담사에게 특정 타일을 확인하거나 특정 단어를 일치시키라고 지시할 필요가 없습니다. 따라서 나중에 이 페이지에 표시되는 정보를 확장하거나 변경하더라도 이 프롬프트는 계속 작동하며 출력은 마크다운 표에 계속 캡처됩니다.

멋지죠?

이제 BrowserMCP가 완료되었으므로 브라우저에서 연결을 해제합니다.

8. Skills 및 Playwright를 사용한 자동화

BrowserMCP의 제한사항

BrowserMCP는 훌륭하지만 몇 가지 제한사항이 있습니다. 예를 들면 다음과 같습니다.

브라우저 MCP 확장 프로그램이 연결된 기존 브라우저 세션이 필요합니다. (새 세션을 생성하지는 않습니다.)
Chromium이 아닌 브라우저는 지원하지 않습니다.
MCP 서버가 실행되는 동일한 머신에서 실행되는 별도의 브라우저 프로세스가 필요합니다.
로컬 파일 시스템과 함께 작동할 수 없습니다. 예를 들어 스크린샷을 증명하기 위해 로컬 파일을 만들거나 다운로드 가능한 PDF와 같은 웹 애플리케이션에서 파일을 다운로드하여 저장할 수 없습니다.
비결정적입니다. 사용자가 실행하도록 지시한 작업을 시도하지만 예기치 않은 팝업과 같은 로컬 상태로 인해 상호작용이 중단될 수 있습니다.
'헤드리스' 작업을 지원하지 않으므로 실제 브라우저 창이 없는 CI/CD 파이프라인에서 실행할 수 없습니다.

Playwright

Playwright는 훨씬 더 정교한 도구입니다. 잘 정립된 오픈소스 브라우저 자동화 및 테스트 프레임워크입니다. 브라우저MCP가 할 수 없는 많은 작업을 할 수 있습니다(위에서 언급한 모든 항목 포함).

복잡하고 안정적이며 반복 가능한 테스트 시나리오를 실행하는 데 훨씬 적합합니다. 특히 장기 실행 세션으로 작업하거나 실제로 여러 독립 세션을 동시에 실행하는 데 적합합니다.

하지만 이러한 추가 기능에는 훨씬 가파른 학습 곡선이 따릅니다.

기술

다행히 Playwright 사용법을 직접 배울 필요는 없습니다. 대신 에이전트 스킬을 사용할 수 있습니다.

그렇다면 에이전트 스킬이란 정확히 무엇일까요? 특정 작업을 수행해야 할 때 AI 에이전트에게 전달할 수 있는 도메인 전문 지식이 긴밀하게 패키징된 번들이라고 생각하면 됩니다. 여기에는 특정 작업에 맞게 조정된 안내, 권장사항, 때로는 도우미 스크립트가 포함되어 있습니다.

여기서 정말 영리한 부분은 점진적 공개입니다. 모든 API 문서와 테스트 프레임워크 규칙을 LLM의 초기 시스템 프롬프트에 밀어넣는 대신(컨텍스트 윈도우를 차지하고 토큰을 소모함) 에이전트는 실제로 필요할 때만 스킬을 읽습니다. 기준 컨텍스트를 간결하게 유지하고 자세한 '방법'을 적시에 가져옵니다. 물론 스킬에는 특정 MCP 서버를 활용하여 작업을 완료하는 방법에 관한 안내가 포함될 수 있습니다.

영화 매트릭스의 한 장면을 생각해 보세요. 에이전트가 문제를 살펴보고 Playwright를 알아야 한다는 것을 깨닫고 스킬을 다운로드하면 갑자기 '나는 쿵푸를 안다'라고 말합니다. 붐 마이크 즉각적인 전문가.

스킬에 대해 자세히 알아보려면 다음을 참고하세요.

Playwright에 스킬이 적합한 이유

여기에서 스킬을 사용하는 것이 좋습니다. Playwright는 매우 강력하지만 구문이 까다로울 수 있습니다. 에이전트에게 Playwright 스킬을 제공하면 대규모 언어 모델이 오래된 문법을 할루시네이션하거나 깨지기 쉬운 선택기를 작성하는 것을 걱정하지 않아도 됩니다. Playwright를 올바르게 사용하는 방법에 관한 선별된 공신력 있는 플레이북을 제공합니다.

Playwright CLI와 관련 스킬을 사용하겠습니다.

이 접근 방식을 사용하면 Playwright CLI를 로컬에 설치한 다음 에이전트가 이를 활용하는 데 필요한 지식을 제공합니다. 혼동을 피하기 위해 말씀드리자면 Playwright MCP 서버를 설치하지 않습니다.

설치

먼저 오픈소스 Microsoft Playwright CLI를 설치합니다. 아직 수행하지 않았다면 /quit``를 입력하여 대화형 CLI를 종료합니다. 그런 다음 터미널에서 다음을 실행합니다.

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

이제 스킬을 추가해 보겠습니다. 이 명령어는 GitHub에서 Gemini 스킬 폴더로 스킬 하위 폴더를 직접 다운로드합니다.

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

이제 테스트할 수 있습니다.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

그러면 지정된 URL로 열린 브라우저 세션이 생성됩니다.

또한 Gemini가 '헤드' 모드, 즉 표시되는 UI로 Playwright를 사용할 수 있기를 원합니다. 하지만 스킬은 Gemini에 이 방법을 알려주지 않습니다. 따라서 Core 섹션의 ~/.gemini/skills/playwright-cli/SKILL.md에 다음 줄을 추가했습니다.

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Playwright로 테스트하기

이전과 마찬가지로 애플리케이션을 실행해야 합니다 (아직 실행되지 않은 경우). 초기 터미널 세션에서 다음을 실행합니다.

make dev

그런 다음 다른 터미널 세션에서 에이전트가 사용할 도구를 혼동하지 않도록 BrowserMCP를 일시적으로 사용 중지합니다. Antigravity CLI (agy)를 다시 실행합니다. TUI를 통해 browsermcp 서버를 일시적으로 사용 중지할 수 있습니다.

프롬프트 상자에 /mcp를 입력하여 MCP 관리 패널을 엽니다.
화살표 키 (위/아래)를 사용하여 browsermcp를 선택하고 Enter/Return 키를 누릅니다.
오른쪽으로 이동하여 '사용 중지'를 선택하고 Enter 키를 눌러 사용 중지로 전환합니다.

이제 에이전트에게 Playwright로 애플리케이션으로 이동하도록 요청합니다. 하지만 BrowserMCP와 달리 먼저 브라우저를 실행할 필요가 없습니다. Playwright가 로컬 프로세스를 사용하여 이를 처리합니다.

Agy CLI에 다음 프롬프트를 입력합니다.

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(항상 그렇듯이 CLI는 도구를 실행하기 전에 권한을 요청합니다.)

여기서 달라진 점은 무엇인가요?

브라우저를 먼저 시작할 필요가 없습니다.
브라우저 확장 프로그램을 시작하고 연결할 필요가 없습니다.
에이전트에게 먼저 로그오프하라고 말할 필요가 없습니다. 테스트는 '클린' 세션에서 인스턴스화됩니다.
스크린샷을 찍어 로컬 파일로 저장할 수 있습니다.

잠시 후 출력 폴더에 dashboard.png 파일이 표시됩니다.

Agy CLI에서 도구 호출이 실행되지만 브라우저 UI는 표시되지 않습니다. 이는 Playwright가 기본적으로 '헤드리스 모드'로 실행되기 때문입니다.

하지만 수정된 프롬프트로 다시 실행하면 UI도 표시됩니다.

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Agy CLI 출력은 다음과 같이 표시됩니다.

정말 멋지지 않나요?

9. Antigravity의 기본 제공 브라우저 에이전트

Google Antigravity에는 Playwright CLI와 같은 별도의 도구를 설치하지 않고도 기본적으로 브라우저 자동화를 제공하는 자체 내장 브라우저 에이전트 ( 브라우저 하위 에이전트)가 장착되어 있습니다.

작동 방식

브라우저를 제어하기 위해 내장 브라우저 에이전트는 Chrome DevTools 프로토콜 (CDP)을 통해 직접 작동하므로 Antigravity 2.0 및 IDE에서 브라우저 확장 프로그램이나 중간 플러그인이 필요하지 않습니다.

실행되면 Antigravity는 WebSocket 연결을 통해 로컬 디버깅 포트를 통해 Chrome 인스턴스에 연결됩니다. 상담사의 개략적인 안내는 다음과 같은 하위 수준 CDP 명령어로 직접 변환됩니다.

페이지 DOM 조작 (예: 요소 클릭 또는 텍스트 입력)
브라우저 상태를 제어하고 탐색을 트리거합니다.
실시간 프레임과 시각적 데이터를 캡처합니다.

하위 에이전트는 직접 CDP 제어와 시각적 멀티모달 분석을 결합하여 상위 수준 목표 (예: '대시보드에 올바른 원격 분석 값이 표시되는지 확인')를 파악하고, 페이지를 시각적으로 분석하여 필요한 작업을 파악하고, 작업을 직접 실행합니다. 또한 동영상을 자동으로 녹화하고 작업의 스크린샷을 찍어 테스트 실행의 시각적 증거로 사용할 수 있도록 아티팩트로 작업공간에 직접 저장합니다.

도구 사용 가능 여부

터미널 우선 Antigravity CLI (Agy CLI)에서는 아직 기본 제공 브라우저 에이전트가 지원되지 않습니다. 하지만 지금 바로 Antigravity IDE 및 Antigravity 2.0에서 사용할 수 있습니다. 향후 출시에서 브라우저 에이전트 지원이 Agy CLI에 제공될 예정입니다.

WSL 사용자를 위한 참고사항: 이제 WSL에서 Antigravity가 작동하도록 브라우저 에이전트를 설정하는 것이 이전보다 훨씬 쉬워졌습니다. 복잡한 네트워크 라우팅 및 포트 포워딩을 처리하는 대신 WSL 구성에서 '미러링된' 네트워크 모드를 사용 설정하기만 하면 됩니다. 단계별 안내는 Google Antigravity로 WSL 마찰 해결: Agy 2.0 및 Agy IDE Edition 가이드를 참고하세요.

10. 브라우저 자동화의 기타 사용 사례

브라우저 자동화는 금요일 오후 배포 전에 로그인 버튼이 작동하는지 확인하는 것만이 아닙니다. LLM을 브라우저에 직접 연결할 수 있다는 사실을 알게 되면 자체 제작 에이전트 프로젝트의 새로운 세계가 열립니다.

자체 AI 에이전트를 빌드하는 경우 BrowserMCP 또는 Playwright CLI와 같은 도구를 사용하여 다음과 같은 작업을 수행할 수 있습니다.

개인 연구 어시스턴트: 에이전트가 특정 URL을 가리키고 주제를 조사하도록 요청했는데 사이트에서 로그인하고 복잡한 메뉴를 탐색해야 한다고 가정해 보겠습니다. 다음 주에 작동하지 않는 맞춤 웹 스크레이퍼를 작성하는 대신 에이전트에게 로그인하고 데이터로 이동하여 요약해 달라고 요청하면 됩니다.
'스위블 체어' 통합자: API가 없는 기존 인트라넷 시스템이 있습니다. 시스템 A에서 데이터를 수동으로 복사하여 시스템 B의 양식에 붙여넣어야 하는 경우를 생각해 보세요. 브라우저 자동화 기능이 있는 에이전트는 범용 접착제 역할을 하여 기존 시스템의 화면을 읽고 새 시스템의 양식을 작성할 수 있습니다.
자동 분류 및 해결: 새벽 3시에 모니터링 시스템에서 P1 알림을 받으셨나요? 에이전트가 특정 대시보드 URL을 자동으로 열고, 멀티모달 시각 기능으로 그래프나 로그를 읽고, 요약을 Slack 채널에 직접 게시하여 인시던트 발생 시 소중한 시간을 절약할 수 있습니다.

이 접근 방식의 장점은 더 이상 사용 가능한 API에 제한을 받지 않는다는 것입니다. 사람이 브라우저에서 할 수 있다면 상담사도 할 수 있습니다.

11. 결론

축하합니다. AI 에이전트에게 원하는 작업을 영어로 설명하기만 하면 자동화되고 강력한 UI 테스트를 빌드하고 실행할 수 있습니다. 취약한 CSS 선택자도 복잡한 설정 스크립트도 없습니다.

학습한 내용은 다음과 같습니다.

UI 테스트가 고통스러울 필요는 없습니다: 취약한 DOM 구현이 아닌 테스트의 의도에 집중하면 유지관리 오버헤드를 크게 줄일 수 있습니다.
모델 컨텍스트 프로토콜 (MCP)을 사용하면 에이전트가 도구, 데이터, 환경에 범용 플러그 앤 플레이 방식으로 액세스할 수 있습니다.
BrowserMCP는 기존 로컬 Chrome 세션에 에이전트 기능을 도입하는 데 유용한 도구입니다.
기술 및 Playwright CLI를 사용하면 점진적 공개를 통해 반복 가능하고 결정적인 자동화 테스트를 새로운 수준으로 끌어올릴 수 있습니다.
Antigravity의 브라우저 하위 에이전트는 자율적인 멀티모달 탐색과 아티팩트 녹음을 기본적으로 도입하여 한 단계 더 나아갑니다.

이제 지루한 작업을 자동화해 보세요.

12. 유용한 링크

오늘 다룬 도구와 개념에 대해 자세히 알아보려면 다음 리소스를 확인하세요.

저장소 코드

agentic-ui-testing GitHub 저장소 - 이 Codelab이 유용했다면 저장소에 별표를 추가해 주세요.

핵심 도구 및 프레임워크

에이전트형 개념 및 기술

기타