1. 소개
웹 애플리케이션 테스트는 번거로울 수 있습니다. 기존 UI 테스트는 취약성과 끊임없이 싸우는 것과 같습니다. 간단한 사용자 흐름을 검증하기 위해 복잡한 스크립트를 작성하고, 깨지기 쉬운 CSS 및 XPath 선택기를 관리하고, 여러 단계를 거쳐야 합니다.
하지만 에이전트에게 자연어로 테스트할 항목을 알려주면 에이전트가 알아서 테스트를 실행한다면 어떨까요?
이 Codelab에서는 Gemini CLI와 BrowserMCP와 같은 멀티모달 도구를 사용하는 방법을 살펴봅니다. 자연어를 사용하여 자동화된 UI 테스트를 만들고 실행하는 방법을 알아봅니다. 이 Codelab에서는 UI 테스트 프레임워크와 도구에 대한 사전 지식이 필요하지 않습니다.
실습 내용
- 모델 컨텍스트 프로토콜 (MCP)이란 무엇이며 왜 획기적인지 알아봅니다.
- BrowserMCP를 통해 AI 에이전트가 웹브라우저를 제어하는 방법
- Gemini CLI에서 자동화된 UI 테스트를 실행하는 방법
- 에이전트 기술과 그 이점 이해
- 스킬을 사용하여 Playwright를 사용하도록 에이전트를 가르칩니다.
- Antigravity 브라우저 하위 에이전트를 간략하게 살펴봅니다.
- 브라우저 제어의 기타 사용 사례
실습 내용
- 개발 환경을 설정합니다.
- 테스트가 필요한 데모 애플리케이션을 살펴봅니다.
- Gemini CLI를 사용하여 BrowserMCP를 통해 애플리케이션과 상호작용합니다.
- 에이전트 스킬을 사용하여 에이전트에게 Playwright 사용 방법을 가르칩니다.
2. 기본 요건
멋진 기능을 살펴보기 전에 필요한 모든 것이 있는지 확인해 보겠습니다.
이 Codelab에서는 Gemini CLI, MCP 도구, 에이전트 기술, React 데모 애플리케이션을 사용합니다.
도구
이 실습에서는 다음이 이미 있다고 가정합니다.
- Chrome 브라우저
- Gemini CLI (자체적으로 nodejs에 종속됨)
- Git
이 안내에서는 Linux (또는 WSL) 또는 macOS 환경에서 작업한다고 가정합니다. Windows를 사용하는 경우 (저와 같이) WSL을 사용하여 따라할 수 있습니다.
(참고로
Google Cloud Shell에서는 BrowserMCP가 작동하지 않음
, 동일한 머신에서 실행되는 로컬 브라우저에만 연결되기 때문입니다.)
Google Cloud 프로젝트 만들기
Gemini API 키가 이미 있는 경우 이를 사용하여 이 단계를 건너뛸 수 있습니다.
그렇지 않으면 따라 하려면 Google Cloud 프로젝트가 필요합니다. Google Cloud 서비스는 배포하지 않지만 Gemini API 키를 연결하려면 프로젝트가 필요합니다. (Gemini를 사용하려면 키가 필요합니다.)
Google Cloud에 익숙하다면 여기에서 새 프로젝트를 만들 수 있습니다. 또는 Google AI Studio 내에서 바로 Google Cloud 프로젝트를 만들 수 있습니다.
Gemini API 키 무료로 만들기
이제 Google AI Studio에서 Gemini API 키를 만듭니다. 'API 키 받기'를 클릭합니다.
다음과 같이 표시됩니다.
기존 키가 있는 경우 여기에 표시됩니다. 또는 새 키를 만들려면 'API 키 만들기'를 클릭합니다.
여기에서 기존 Google Cloud 프로젝트를 선택하거나 새 프로젝트를 만들 수 있습니다. 여기서는 agentic-ui-demo라는 새 프로젝트를 만들었습니다.
이제 프로젝트와 연결된 Gemini API 키가 있습니다. 결제를 사용 설정하지 않았으므로 넉넉한 무료 할당량만 사용할 수 있습니다. 하지만 할당량이 더 필요한 경우 '결제 설정'을 클릭하여 결제를 사용 설정할 수 있습니다.
개발 환경 설정
GitHub에 데모 저장소를 만들었습니다. 여기에는 UI 테스트에 사용할 수 있는 샘플 애플리케이션이 포함되어 있습니다. 로컬 터미널에서 다음을 실행하여 클론합니다.
git clone https://github.com/derailed-dash/agentic-ui-testing cd agentic-ui-testing
다음으로 .env이라는 샘플 .env.template 파일의 사본을 만듭니다. 편집기에서 이 작업을 수행하거나 다음 명령어를 실행하면 됩니다.
cp .env.template .env
자체 API 키로 이 .env 파일을 업데이트합니다. (API 키와 같은 정보가 포함된 .env 파일을 체크인하지 마세요.) 가장 쉬운 방법은 편집기에서 여는 것입니다.
이제 환경 변수를 로드합니다.
source .env
데모 앱을 실행할 환경을 쉽게 설정할 수 있도록 Makefile을 만들었습니다. 이를 실행하여 환경을 초기화해 보겠습니다.
make install
3. 데모 애플리케이션
오늘 테스트할 앱은 The Dazbo Omni-Dash입니다. 보안 원격 분석을 관리하는 미래 지향적인 어두운 테마의 대시보드입니다. (예, 바이브 코딩되었습니다.)
이 앱을 선택한 이유
다음과 같은 기능을 통해 실제와 유사한 테스트 표면을 제공하도록 설계되었습니다.
- 모의 인증: 특정 사용자 인증 정보가 필요한 로그인 흐름입니다.
- 동적 콘텐츠: 실시간 데이터를 시뮬레이션하는 원격 분석 카드 및 보안 로그
- 상호작용 상태: 사용자 작업에 따라 변경되는 탐색 메뉴와 양식 입력입니다.
- 최신 기술: 빠르고 반응성이 뛰어난 환경을 위해 React 및 Vite로 빌드되었습니다.
앱 실행
애플리케이션을 시작하려면 다음을 실행하면 됩니다.
make dev
개발 서버가 매우 빠르게 시작되고 앱은 http://localhost:5173에서 사용할 수 있습니다.
링크를 클릭하여 브라우저에서 애플리케이션을 열 수 있습니다. 이 프로세스를 터미널에서 실행 중인 상태로 두세요. 후속 터미널 명령어는 별도의 터미널 세션에서 실행합니다.
4. UI 테스트의 문제점
기존 UI 테스트는 올바르게 실행하기가 어렵고 유지관리는 더 어렵습니다. 일반적인 문제점은 다음과 같습니다.
- '불안정성' 테스트: 타이밍 문제, 경합 상태 또는 느린 로드 애셋으로 인해 1분 후에는 통과하지만 다음에는 실패하는 테스트입니다.
- 취약한 선택기: 사소한 UI 조정으로 인해 중단되는 특정 DOM 구조 (예: div > div > button)에 의존하여 스크립트를 지속적으로 유지관리해야 합니다.
- 높은 학습 곡선: 기본 클릭을 자동화하기 위해 개발자가 복잡한 도메인별 언어와 프레임워크별 특성 (Cypress, Selenium, Playwright)을 숙달해야 합니다.
- 환경 패리티: 복제하기 어려운 애플리케이션 상태와 테스트 데이터 정리 오버헤드에 대한 문제
구현보다는 의도에 중점을 두는 테스트 방법이 필요합니다.
5. 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 제공업체를 전환하거나 도구를 업그레이드하더라도 핵심 통합 인프라가 완전히 변경되지 않습니다.
6. BrowserMCP를 사용한 자동화
BrowserMCP란 무엇인가요?
오늘 살펴볼 첫 번째 도구입니다. BrowserMCP는 AI 에이전트가 웹브라우저와 상호작용하는 데 필요한 '눈'과 '손'을 제공하는 MCP 서버입니다. 간단히 말해 브라우저와의 인간 상호작용을 모방합니다. 오픈소스이며 여기에서 GitHub 저장소를 확인할 수 있습니다. 기본 BrowserMCP 문서를 참고하세요.
다음은 이 도구의 기능입니다.
- URL로 이동할 수 있습니다.
- DOM을 검사할 수 있습니다.
- 버튼을 클릭하고 양식에 텍스트를 입력할 수 있습니다.
- 드래그 앤 드롭이 가능합니다.
- 브라우저 콘솔 로그를 읽을 수 있습니다.
- 빠름: 자동화는 머신에서 로컬로 실행됩니다.
브라우저 MCP 설치
BrowserMCP를 사용하려면 다음 두 가지 작업을 실행해야 합니다.
- Chrome (또는 Chromium 기반 브라우저)에 BrowserMCP 확장 프로그램을 설치합니다.
- 에이전트의 MCP 서버를 구성합니다.
확장 프로그램을 설치하려면 여기의 안내를 따르세요. 몇 초면 완료됩니다. 설치가 완료되면 확장 프로그램에서 '연결'을 클릭하여 상담사가 현재 탭을 제어할 수 있도록 허용합니다. (데모 애플리케이션이 실행되는 탭이 현재 탭이어야 합니다.)
다음으로 클라이언트에 MCP 구성을 추가해야 합니다.
"mcpServers": {
"browsermcp": {
"command": "npx",
"args": ["@browsermcp/mcp@latest"]
}
}
이 설정은 어디에서 구성하나요? 이는 상담사에 따라 다릅니다. 예를 들어 Gemini CLI에서는 ~/.gemini/settings.json입니다. 표시되는 방식은 다음과 같습니다.
BrowserMCP로 테스트
이제 마법을 부려 보겠습니다. 먼저 새 터미널 세션에서 gemini를 실행하여 Gemini CLI를 실행합니다. (데모 애플리케이션은 초기 터미널 세션에서 실행됩니다.) Gemini CLI 내에서 /mcp를 실행하여 제대로 설치되었는지 확인합니다. 다음과 같은 도구 목록이 표시됩니다.
이전에 데모 애플리케이션을 시작하지 않았다면 지금 실행하세요.
make dev
Chrome 브라우저에서 앱을 열고 해당 탭에서 BrowserMCP 확장 프로그램을 연결해야 합니다. run 명령의 링크를 따릅니다. 그런 다음 BrowserMCP 확장 프로그램 아이콘을 클릭하고 '연결'을 클릭합니다.
이제 Gemini CLI를 사용하여 테스트를 실행할 수 있습니다. 이 프롬프트를 Gemini 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.
Gemini CLI는 먼저 데모 애플리케이션이 지정된 포트에서 실행되고 있는지 확인할 수 있습니다. 그런 다음 도구에서 취할 계획인 작업을 확인하라는 메시지가 표시됩니다.
Gemini CLI가 이 세션의 모든 BrowserMCP 도구를 실행하도록 허용합니다. 그런 다음 브라우저로 돌아가 자동 상호작용이 발생하는 것을 확인합니다.
위 프롬프트에 관해 몇 가지 참고할 사항이 있습니다.
- 애플리케이션이 이미 로그인되어 있는 경우 에이전트에게 로그아웃하라고 지시합니다. 상담사에게 '게이트웨이 종료'와 같은 특정 텍스트를 클릭하라고 안내할 필요는 없습니다. 클릭할 항목을 파악할 수 있을 만큼 스마트합니다.
- 로그인하고 기본 페이지를 렌더링한 후 에이전트가 원격 분석 정보를 캡처합니다. 다시 말하지만 상담사에게 특정 타일을 확인하거나 특정 단어를 일치시키라고 지시할 필요가 없습니다. 따라서 나중에 이 페이지에 표시되는 정보를 확장하거나 변경하더라도 이 프롬프트는 계속 작동하며 출력은 마크다운 표에 계속 캡처됩니다.
멋지죠?
이제 브라우저MCP가 완료되었으므로 브라우저에서 연결 해제합니다.
7. Skills 및 Playwright를 사용한 자동화
BrowserMCP의 제한사항
BrowserMCP는 훌륭하지만 몇 가지 제한사항이 있습니다. 예를 들면 다음과 같습니다.
- 브라우저 MCP 확장 프로그램이 연결된 기존 브라우저 세션이 필요합니다. (새 세션을 생성하지는 않습니다.)
- Chromium이 아닌 브라우저는 지원하지 않습니다.
- MCP 서버가 실행되는 동일한 머신에서 실행되는 별도의 브라우저 프로세스가 필요합니다.
- 로컬 파일 시스템과 함께 작동할 수 없습니다. 예를 들어 스크린샷을 증명하기 위해 로컬 파일을 만들거나 다운로드 가능한 PDF와 같은 웹 애플리케이션에서 파일을 다운로드하여 저장할 수 없습니다.
- 확정적이지 않습니다. 사용자가 실행하도록 지시한 작업을 수행하려고 시도하지만 예기치 않은 팝업과 같은 로컬 상태로 인해 상호작용이 중단될 수 있습니다.
- 실제 브라우저 창이 없으면 CI/CD 파이프라인에서 실행할 수 없다는 의미로 '헤드리스' 작업을 지원하지 않습니다.
Playwright
Playwright는 훨씬 더 정교한 도구입니다. 잘 정립된 오픈소스 브라우저 자동화 및 테스트 프레임워크입니다. 위에서 언급한 모든 항목을 비롯해 BrowserMCP가 할 수 없는 많은 작업을 할 수 있습니다.
복잡하고 안정적이며 반복 가능한 테스트 시나리오를 실행하는 데 훨씬 더 적합합니다. 또한 장기 실행 세션으로 작업하거나 여러 독립 세션을 동시에 실행하는 데 특히 적합합니다.
하지만 이러한 추가 기능에는 훨씬 가파른 학습 곡선이 따릅니다.
기술
다행히 Playwright 사용법을 직접 배울 필요는 없습니다. 대신 상담사 기술을 사용할 수 있습니다.
그렇다면 에이전트 스킬이란 정확히 무엇일까요? 특정 작업을 수행해야 할 때 AI 에이전트에게 전달할 수 있는 도메인 전문 지식이 긴밀하게 패키징된 번들이라고 생각하면 됩니다. 여기에는 특정 작업에 맞게 조정된 안내, 권장사항, 경우에 따라 도우미 스크립트가 포함되어 있습니다.
여기서 정말 영리한 부분은 점진적 공개입니다. 모든 가능한 API 문서와 테스트 프레임워크 규칙을 LLM의 초기 시스템 프롬프트에 밀어넣는 대신(컨텍스트 창을 차지하고 토큰을 소모함) 에이전트는 실제로 필요할 때만 스킬을 읽습니다. 기준 컨텍스트를 간결하게 유지하고 자세한 '방법'을 적시에 가져옵니다. 물론 스킬에는 특정 MCP 서버를 활용하여 작업을 완료하는 방법에 관한 안내가 포함될 수 있습니다.
영화 매트릭스의 한 장면을 생각해 보세요. 에이전트가 문제를 살펴보고 Playwright를 알아야 한다는 것을 깨닫고 스킬을 다운로드하자 갑자기 '나는 쿵푸를 안다'라고 말합니다. 붐 마이크 즉각적인 전문가
스킬에 대해 자세히 알아보려면 다음을 참고하세요.
Playwright에 스킬이 적합한 이유
여기에서는 스킬을 사용하는 것이 좋습니다. Playwright는 매우 강력하지만 구문이 까다로울 수 있습니다. 에이전트에게 Playwright 기술을 부여하면 LLM이 오래된 구문을 환각하거나 깨지기 쉬운 선택기를 작성하는 것을 걱정하지 않아도 됩니다. Playwright를 올바르게 사용하는 방법에 관한 선별된 공신력 있는 플레이북을 제공합니다.
Playwright CLI와 관련 기술을 사용하겠습니다.
이 접근 방식을 사용하면 Playwright CLI를 로컬에 설치한 다음 에이전트가 이를 활용하는 데 필요한 지식을 제공합니다. 혼동을 피하기 위해 말씀드리자면 Playwright MCP 서버를 설치하는 것이 아닙니다.
설치
먼저 오픈소스 Microsoft Playwright CLI를 설치해 보겠습니다. 아직 실행하지 않았다면 /quit``를 입력하여 Gemini 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를 일시적으로 사용 중지합니다. Gemini CLI를 다시 실행한 후 다음을 실행합니다.
/mcp disable browsermcp
이제 Gemini에 Playwright로 애플리케이션을 탐색해 달라고 요청합니다. 하지만 BrowserMCP와 달리 먼저 브라우저를 실행할 필요는 없습니다. Playwright는 로컬 프로세스를 사용하여 이를 수행합니다.
Gemini 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.
(언제나처럼 Gemini CLI는 도구를 실행하기 전에 권한을 요청합니다.)
여기서 다른 점은 무엇인가요?
- 브라우저를 먼저 시작할 필요가 없습니다.
- 브라우저 확장 프로그램을 시작하고 연결할 필요가 없었습니다.
- 에이전트에게 먼저 로그오프하라고 말할 필요가 없습니다. 테스트는 '클린' 세션에서 인스턴스화됩니다.
- 스크린샷을 찍어 로컬 파일로 저장할 수 있습니다.
잠시 후 output 폴더에 dashboard.png 파일이 표시됩니다.
Gemini 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 present them back to me in a markdown table.
잠시 후 Gemini CLI 출력은 다음과 같이 표시됩니다.
정말 멋지지 않나요?
8. Antigravity에서 바로 이 작업을 할 수 있습니다.
Google Antigravity에는 Playwright CLI와 유사한 기능을 제공하는 브라우저 하위 에이전트가 포함되어 있습니다. Antigravity의 Gemini에 URL을 대화형으로 스핀업하도록 요청하면 이 하위 에이전트가 자동으로 스핀업됩니다.
이 하위 에이전트는 대략적인 목표 (예: '로그인 양식이 작동하는지 확인')를 파악하고, 스크린샷과 DOM을 통해 페이지 레이아웃을 시각적으로 분석하고, 클릭과 키 입력을 스스로 파악합니다. 기본적으로 사람이 웹을 탐색하는 것과 마찬가지로 웹을 탐색하는 시각적 멀티모달 AI입니다. 게다가 실행하는 모든 작업을 자동으로 녹화하고 스크린샷을 찍어 완료한 작업의 시각적 증거로 로컬 작업공간에 바로 저장합니다. Antigravity에서는 이러한 시각적 증거를 아티팩트라고 합니다.
WSL 사용자를 위한 참고사항: 브라우저 에이전트가 Antigravity에서 작동하도록 하는 것은 다소 번거롭습니다. 작동은 시켰지만, 이 환경에서 하위 에이전트가 일관되지 않고 신뢰할 수 없다는 것을 알게 되었습니다. 그래서 Playwright CLI를 좋아합니다.
9. 브라우저 자동화의 기타 사용 사례
브라우저 자동화는 금요일 오후 배포 전에 로그인 버튼이 작동하는지 확인하는 것만이 아닙니다. LLM을 브라우저에 직접 연결할 수 있다는 사실을 알게 되면 자체 제작 에이전트 프로젝트의 새로운 세계가 열립니다.
자체 AI 에이전트를 빌드하는 경우 BrowserMCP 또는 Playwright CLI와 같은 도구를 사용하여 다음과 같은 작업을 수행할 수 있습니다.
- 개인 조사 어시스턴트: 에이전트가 특정 URL을 가리키고 주제를 조사하도록 요청했지만 사이트에서 로그인하고 복잡한 메뉴를 탐색해야 한다고 가정해 보겠습니다. 다음 주에 작동하지 않는 맞춤 웹 스크레이퍼를 작성하는 대신 에이전트에게 로그인하고 데이터로 이동하여 요약해 달라고 요청하면 됩니다.
- '스위블 체어' 통합자: API가 없는 기존 인트라넷 시스템이 있습니다. 시스템 A에서 데이터를 수동으로 복사하여 시스템 B의 양식에 붙여넣어야 하는 경우를 말합니다. 브라우저 자동화 기능이 있는 에이전트는 범용 접착제 역할을 하여 기존 시스템의 화면을 읽고 새 시스템의 양식을 작성할 수 있습니다.
- 자동 분류 및 해결: 오전 3시에 모니터링 시스템에서 P1 알림을 받으셨나요? 에이전트가 특정 대시보드 URL을 자동으로 열고, 멀티모달 비전 기능을 사용하여 그래프나 로그를 읽고, 요약을 Slack 채널에 직접 게시하여 인시던트 중에 소중한 시간을 절약할 수 있습니다.
이 접근 방식의 장점은 더 이상 사용 가능한 API에 제한을 받지 않는다는 것입니다. 사람이 브라우저에서 할 수 있다면 상담사도 할 수 있습니다.
10. 결론
축하합니다. AI 에이전트에게 원하는 작업을 영어로 설명하기만 하면 자동화되고 강력한 UI 테스트를 빌드하고 실행할 수 있습니다. 취약한 CSS 선택자도 복잡한 설정 스크립트도 없습니다.
학습한 내용은 다음과 같습니다.
- UI 테스트가 고통스러울 필요는 없습니다. 취약한 DOM 구현보다는 테스트의 의도에 집중하면 유지관리 오버헤드를 크게 줄일 수 있습니다.
- 모델 컨텍스트 프로토콜 (MCP)을 사용하면 에이전트가 도구, 데이터, 환경에 범용 플러그 앤 플레이 방식으로 액세스할 수 있습니다.
- BrowserMCP는 에이전트 기능을 로컬의 기존 Chrome 세션에 도입하는 데 유용한 도구입니다.
- 스킬과 Playwright CLI를 사용하면 점진적 공개를 기반으로 반복 가능하고 결정적인 자동화 테스트를 새로운 수준으로 수행할 수 있습니다.
- Antigravity의 브라우저 하위 에이전트는 자율 멀티모달 탐색과 아티팩트 녹화를 기본적으로 도입하여 한 단계 더 나아갑니다.
이제 지루한 작업을 자동화해 보세요.
유용한 링크
오늘 다룬 도구와 개념에 대해 자세히 알아보려면 다음 리소스를 확인하세요.
저장소 코드
핵심 도구 및 프레임워크
에이전트형 개념 및 기술
- 튜토리얼: Google Antigravity 스킬 시작하기
- Codelab: Getting Started with Antigravity Skills
- Dazbo의 원본 블로그: 몇 초 만에 자동화된 UI 테스트 만들기
기타