스테이지핸드: 브라우저 자동화 작업의 자연어 구현을 위한 프레임워크

일반 소개

Stagehand는 단순성과 확장성에 중점을 둔 AI 웹 브라우징 프레임워크입니다. Playwright와 완벽하게 호환되며 기본 Playwright 페이지 클래스 위에 구축된 세 가지 간단한 AI API(행위, 추출, 관찰)를 제공하여 자연어를 통한 웹 자동화를 위한 빌딩 블록을 제공합니다.Stagehand를 사용하면 지속적이고 효율적인 브라우저 자동화 코드 작성 를 더 쉽게 작성할 수 있으며, 특히 기술 전문가가 아닌 사용자도 UI/DOM의 작은 변경에 덜 민감하게 반응합니다. 해커 뉴스에서 오늘의 주요 기사를 가져오거나 아마존에서 제품을 검색하고 구매하는 등, 스테이지핸드를 사용하면 쉽게 할 수 있습니다. 이 프레임워크는 현재 초기 릴리스 상태이며 개발팀은 커뮤니티의 피드백을 적극적으로 구하고 있습니다.

 

기능 목록

• 행동, 추출, 관찰의 세 가지 간단한 AI API 제공
• Playwright와 완벽하게 호환
• 자연어를 통한 웹 자동화 지원
• 세션 리플레이 및 단계별 디버깅과 같은 디버깅 도구 제공
• 기술 전문가가 아닌 사용자를 위한 정보
• 사소한 UI/DOM 변경에 민감하지 않음
• 보다 강력한 디버깅 도구를 제공하기 위해 Browserbase와의 통합을 지원합니다.

 

도움말 사용

설치 프로세스

1. 스테이지핸드 프로젝트를 복제합니다:

   git clone https://github.com/browserbase/stagehand.git
cd stagehand

2. 종속성을 설치합니다:

   npm install
npx playwright install

3. 샘플 스크립트를 실행합니다:

   npm run example

사용 가이드라인

새 프로젝트 만들기

기본 설정으로 구성된 스테이지핸드 프로젝트를 만들려면 다음 명령을 실행하면 됩니다:

npx create-browser-app --example quickstart

자세한 내용은 빠른 시작 가이드를 참조하세요.

기존 프로젝트에 추가

다음 명령을 사용하여 기존 타입스크립트 프로젝트에 스테이지핸드를 추가할 수 있습니다:

npm install @browserbasehq/stagehand zod
npx playwright install

API 키 구성

최상의 스테이지핸드를 사용하려면 LLM 공급자 API 키와 브라우저베이스 자격 증명이 필요합니다. 이를 프로젝트에 추가하려면 실행하세요:

cp .env.example .env
nano .env  # 编辑.env文件以添加API密钥

주요 기능

1. act API버튼 클릭, 양식 작성 등과 같은 작업을 수행하는 데 사용됩니다.

   await page.act('点击登录按钮');

2. 추출 API페이지에서 텍스트, 링크 등의 정보를 추출하는 데 사용됩니다.

   const headlines = await page.extract('提取所有新闻标题');

3. 관찰 API요소 표시 대기, 페이지 로딩 모니터링 등 페이지 변경 사항을 관찰하는 데 사용됩니다.

   await page.observe('等待加载完成');

디버깅 도구

스테이지핸드와 브라우저베이스의 통합은 세션 재생 및 단계별 디버깅과 같은 강력한 디버깅 도구를 제공합니다. 아래 단계에 따라 이러한 도구를 활성화할 수 있습니다:

1. 프로젝트에 Browserbase API 키를 추가합니다:

   nano .env  # 添加BROWSERBASE_API_KEY和BROWSERBASE_PROJECT_ID

2. 세션 재생을 활성화합니다:

   await page.enableSessionReplay();

3. 단계별 디버깅을 사용하도록 설정합니다:

   await page.enableStepByStepDebugging();

다음 단계를 따라 스테이지핸드의 기능을 최대한 활용하여 브라우저를 효율적으로 자동화할 수 있습니다.