E2E Testing with agent-browser

使用agent-browser进行E2E测试

AI 에이전트를 위한 헤드리스 브라우저 자동화 CLI

agent-browser

를 활용하여 E2E 테스트를 작성하고 실행하는 종합 가이드입니다.

本指南全面介绍了如何为AI Agent使用无头浏览器自动化CLI

agent-browser

编写并执行E2E测试。

이 스킬을 사용할 때

适用场景

웹 애플리케이션 E2E 테스트 작성
로그인/회원가입 플로우 테스트
폼 입력 및 제출 테스트
네비게이션 및 라우팅 테스트
UI 상호작용 테스트 (클릭, 호버, 스크롤)
시각적 상태 확인 (요소 존재, 텍스트 내용)
CI/CD 파이프라인에서 브라우저 테스트 실행

编写Web应用E2E测试
登录/注册流程测试
表单输入与提交测试
导航与路由测试
UI交互测试（点击、悬停、滚动）
视觉状态验证（元素存在性、文本内容）
在CI/CD流水线中执行浏览器测试

설치

安装

bash

undefined

bash

undefined

npm으로 설치 (권장)

npm安装（推荐）

npm install -g agent-browser

Chromium 브라우저 다운로드

下载Chromium浏览器

agent-browser setup

Linux의 경우 시스템 의존성 추가 설치

Linux系统需额外安装依赖

agent-browser setup --with-deps

undefined

agent-browser setup --with-deps

undefined

핵심 개념

核心概念

1. 스냅샷 + Ref 워크플로우

1. 快照+Ref工作流

agent-browser의 핵심은 **접근성 트리(Accessibility Tree)**와 ref 시스템입니다.

bash

undefined

agent-browser的核心是可访问性树(Accessibility Tree)和ref系统。

bash

undefined

1. 페이지 열기

1. 打开页面

agent-browser open https://example.com

2. 접근성 스냅샷 가져오기 (ref 포함)

2. 获取包含ref的可访问性快照

agent-browser snapshot -i

출력:

输出示例:

- heading "Example Domain" [ref=e1] [level=1]

- button "Submit" [ref=e2]

- textbox "Email" [ref=e3]

- link "Learn more" [ref=e4]

3. ref를 사용하여 요소와 상호작용

3. 使用ref与元素交互

agent-browser click @e2 # 버튼 클릭 agent-browser fill @e3 "test@example.com" # 텍스트 입력 agent-browser text @e1 # 텍스트 가져오기

undefined

agent-browser click @e2 # 点击按钮 agent-browser fill @e3 "test@example.com" # 输入文本 agent-browser text @e1 # 获取文本内容

undefined

2. 스냅샷 옵션

2. 快照选项

bash

undefined

bash

undefined

전체 접근성 트리

获取完整可访问性树

agent-browser snapshot

인터랙티브 요소만 (버튼, 입력, 링크)

仅获取交互式元素（按钮、输入框、链接）

agent-browser snapshot -i

컴팩트 모드 (빈 구조 요소 제거)

紧凑模式（移除空结构元素）

agent-browser snapshot -c

깊이 제한

限制深度

agent-browser snapshot -d 3

CSS 선택자로 범위 제한

通过CSS选择器限定范围

agent-browser snapshot -s "#main"

옵션 조합

组合选项

agent-browser snapshot -i -c -d 5

undefined

agent-browser snapshot -i -c -d 5

undefined

3. JSON 모드 (AI 에이전트용)

3. JSON模式（面向AI Agent）

bash

undefined

bash

undefined

JSON 출력으로 파싱 가능한 결과 반환

返回可解析的JSON格式结果

agent-browser snapshot --json

{"success":true,"data":{"snapshot":"...","refs":{"e1":{"role":"heading","name":"Title"},...}}}

undefined

undefined

E2E 테스트 패턴

E2E测试模式

패턴 1: 기본 페이지 테스트

模式1：基础页面测试

bash

#!/bin/bash

bash

#!/bin/bash

test_homepage.sh

set -e # 에러 시 즉시 중단

set -e # 出错时立即终止

페이지 열기

打开页面

agent-browser open https://myapp.com

페이지 타이틀 확인

验证页面标题

TITLE=$(agent-browser title) if [[ "$TITLE" != "My App" ]]; then echo "FAIL: Expected title 'My App', got '$TITLE'" exit 1 fi

TITLE=$(agent-browser title) if [[ "$TITLE" != "My App" ]]; then echo "FAIL: 预期标题为'My App'，实际为'$TITLE'" exit 1 fi

주요 요소 존재 확인

验证关键元素存在

agent-browser snapshot -i | grep -q "button.*Login" || { echo "FAIL: Login button not found" exit 1 }

echo "PASS: Homepage test" agent-browser close

undefined

agent-browser snapshot -i | grep -q "button.*Login" || { echo "FAIL: 未找到登录按钮" exit 1 }

echo "PASS: 首页测试通过" agent-browser close

undefined

패턴 2: 로그인 플로우 테스트

模式2：登录流程测试

bash

#!/bin/bash

bash

#!/bin/bash

test_login.sh

set -e

로그인 페이지 열기

打开登录页面

agent-browser open https://myapp.com/login

스냅샷으로 요소 ref 확인

通过快照获取元素ref

agent-browser snapshot -i

- textbox "Email" [ref=e1]

- textbox "Password" [ref=e2]

- button "Sign In" [ref=e3]

이메일 입력

输入邮箱

agent-browser fill @e1 "test@example.com"

비밀번호 입력

输入密码

agent-browser fill @e2 "password123"

로그인 버튼 클릭

点击登录按钮

agent-browser click @e3

URL 변경 대기

等待URL变更

agent-browser wait url "**/dashboard"

대시보드 확인

验证跳转到仪表盘

URL=$(agent-browser url) if [[ "$URL" != "dashboard" ]]; then echo "FAIL: Not redirected to dashboard" exit 1 fi

echo "PASS: Login flow" agent-browser close

undefined

URL=$(agent-browser url) if [[ "$URL" != "dashboard" ]]; then echo "FAIL: 未跳转到仪表盘" exit 1 fi

echo "PASS: 登录流程测试通过" agent-browser close

undefined

패턴 3: 폼 입력 및 유효성 검사 테스트

模式3：表单输入与验证测试

bash

#!/bin/bash

bash

#!/bin/bash

test_form_validation.sh

set -e

agent-browser open https://myapp.com/register

set -e

agent-browser open https://myapp.com/register

스냅샷으로 폼 요소 확인

通过快照确认表单元素

agent-browser snapshot -i

빈 폼 제출 시도

尝试提交空表单

agent-browser click @submit-btn

에러 메시지 대기

等待错误提示

agent-browser wait text "Email is required"

에러 메시지 확인

验证错误提示显示

agent-browser snapshot -i | grep -q "Email is required" || { echo "FAIL: Validation error not shown" exit 1 }

agent-browser snapshot -i | grep -q "Email is required" || { echo "FAIL: 未显示验证错误提示" exit 1 }

유효한 이메일 입력

输入有效邮箱

agent-browser fill @email "valid@example.com"

이메일 에러 메시지 사라짐 확인

验证邮箱错误提示消失

agent-browser snapshot -i | grep -q "Email is required" && { echo "FAIL: Email error should be gone" exit 1 }

echo "PASS: Form validation" agent-browser close

undefined

agent-browser snapshot -i | grep -q "Email is required" && { echo "FAIL: 邮箱错误提示应已消失" exit 1 }

echo "PASS: 表单验证测试通过" agent-browser close

undefined

패턴 4: 네비게이션 테스트

模式4：导航测试

bash

#!/bin/bash

bash

#!/bin/bash

test_navigation.sh

set -e

agent-browser open https://myapp.com

set -e

agent-browser open https://myapp.com

네비게이션 메뉴 클릭

点击导航菜单

agent-browser click role:link "About" agent-browser wait url "**/about"

뒤로 가기

返回上一页

agent-browser back agent-browser wait url "**/home"

앞으로 가기

前进到下一页

agent-browser forward agent-browser wait url "**/about"

echo "PASS: Navigation test" agent-browser close

undefined

agent-browser forward agent-browser wait url "**/about"

echo "PASS: 导航测试通过" agent-browser close

undefined

패턴 5: 모달/다이얼로그 테스트

模式5：模态框/对话框测试

bash

#!/bin/bash

bash

#!/bin/bash

test_modal.sh

set -e

agent-browser open https://myapp.com

set -e

agent-browser open https://myapp.com

모달 트리거 버튼 클릭

点击模态框触发按钮

agent-browser click @open-modal-btn

모달 나타날 때까지 대기

等待模态框出现

agent-browser wait @modal-dialog

모달 내용 확인

验证模态框内容

agent-browser snapshot -s "[role=dialog]" -i

모달 닫기

关闭模态框

agent-browser click @close-modal-btn

모달 사라짐 확인 (isvisible 사용)

验证模态框已关闭（使用isvisible）

VISIBLE=$(agent-browser isvisible @modal-dialog 2>/dev/null || echo "false") if [[ "$VISIBLE" == "true" ]]; then echo "FAIL: Modal should be closed" exit 1 fi

echo "PASS: Modal test" agent-browser close

undefined

VISIBLE=$(agent-browser isvisible @modal-dialog 2>/dev/null || echo "false") if [[ "$VISIBLE" == "true" ]]; then echo "FAIL: 模态框应已关闭" exit 1 fi

echo "PASS: 模态框测试通过" agent-browser close

undefined

패턴 6: 드래그 앤 드롭 테스트

模式6：拖拽测试

bash

#!/bin/bash

bash

#!/bin/bash

test_dnd.sh

set -e

agent-browser open https://myapp.com/kanban

set -e

agent-browser open https://myapp.com/kanban

드래그 앤 드롭 실행

执行拖拽操作

agent-browser drag @task-1 @column-done

결과 확인

验证结果

agent-browser snapshot -s "#column-done" | grep -q "Task 1" || { echo "FAIL: Task not moved" exit 1 }

echo "PASS: Drag and drop test" agent-browser close

undefined

agent-browser snapshot -s "#column-done" | grep -q "Task 1" || { echo "FAIL: 任务未移动到目标列" exit 1 }

echo "PASS: 拖拽测试通过" agent-browser close

undefined

패턴 7: 파일 업로드 테스트

模式7：文件上传测试

bash

#!/bin/bash

bash

#!/bin/bash

test_upload.sh

set -e

agent-browser open https://myapp.com/upload

set -e

agent-browser open https://myapp.com/upload

파일 업로드

上传文件

agent-browser upload @file-input "./test-file.pdf"

업로드 완료 대기

等待上传完成

agent-browser wait text "Upload complete"

echo "PASS: File upload test" agent-browser close

undefined

agent-browser wait text "Upload complete"

echo "PASS: 文件上传测试通过" agent-browser close

undefined

고급 기능

高级功能

인증 세션 유지

保持认证会话

bash

undefined

bash

undefined

프로필 디렉토리로 로그인 상태 유지

通过配置文件目录保存登录状态

agent-browser open https://myapp.com --profile ~/.browser-profile/myapp

환경 변수로 설정

通过环境变量设置

export AGENT_BROWSER_PROFILE=~/.browser-profile/myapp agent-browser open https://myapp.com

undefined

export AGENT_BROWSER_PROFILE=~/.browser-profile/myapp agent-browser open https://myapp.com

undefined

세션 분리

会话隔离

bash

undefined

bash

undefined

독립된 세션으로 병렬 테스트

使用独立会话执行并行测试

AGENT_BROWSER_SESSION=test1 agent-browser open https://myapp.com & AGENT_BROWSER_SESSION=test2 agent-browser open https://myapp.com & wait

세션 목록 확인

查看会话列表

agent-browser sessions

undefined

agent-browser sessions

undefined

네트워크 인터셉트

网络拦截

bash

undefined

bash

undefined

특정 요청 차단

拦截特定请求

agent-browser block "*.png" agent-browser block "analytics"

API 응답 모킹

模拟API响应

agent-browser mock "/api/users" '{"users": [{"id": 1, "name": "Test"}]}'

네트워크 요청 모니터링

监控网络请求

agent-browser requests

undefined

agent-browser requests

undefined

스크린샷 및 PDF

截图与PDF导出

bash

undefined

bash

undefined

현재 화면 스크린샷

截取当前屏幕

agent-browser screenshot ./screenshot.png

전체 페이지 스크린샷

截取完整页面

agent-browser screenshot ./full.png --full

PDF로 저장

导出为PDF

agent-browser pdf ./page.pdf

undefined

agent-browser pdf ./page.pdf

undefined

JavaScript 실행

执行JavaScript

bash

undefined

bash

undefined

JS 코드 실행

运行JS代码

agent-browser eval "document.title" agent-browser eval "window.localStorage.getItem('token')"

복잡한 스크립트

执行复杂脚本

agent-browser eval " const items = document.querySelectorAll('.item'); return items.length; "

undefined

agent-browser eval " const items = document.querySelectorAll('.item'); return items.length; "

undefined

테스트 러너 스크립트

测试运行器脚本

Node.js 테스트 러너

Node.js测试运行器

javascript

// e2e/runner.js
const { execSync } = require('child_process');

const tests = [
  'test_homepage.sh',
  'test_login.sh',
  'test_form_validation.sh',
  'test_navigation.sh',
];

let passed = 0;
let failed = 0;

for (const test of tests) {
  console.log(`Running ${test}...`);
  try {
    execSync(`bash e2e/${test}`, { stdio: 'inherit' });
    passed++;
  } catch (error) {
    failed++;
    console.error(`FAILED: ${test}`);
  }
}

console.log(`\nResults: ${passed} passed, ${failed} failed`);
process.exit(failed > 0 ? 1 : 0);

javascript

// e2e/runner.js
const { execSync } = require('child_process');

const tests = [
  'test_homepage.sh',
  'test_login.sh',
  'test_form_validation.sh',
  'test_navigation.sh',
];

let passed = 0;
let failed = 0;

for (const test of tests) {
  console.log(`正在执行 ${test}...`);
  try {
    execSync(`bash e2e/${test}`, { stdio: 'inherit' });
    passed++;
  } catch (error) {
    failed++;
    console.error(`FAILED: ${test}`);
  }
}

console.log(`\n测试结果: ${passed} 通过, ${failed} 失败`);
process.exit(failed > 0 ? 1 : 0);

npm 스크립트

npm脚本配置

json

{
  "scripts": {
    "test:e2e": "node e2e/runner.js",
    "test:e2e:headed": "AGENT_BROWSER_HEADED=1 npm run test:e2e"
  }
}

json

{
  "scripts": {
    "test:e2e": "node e2e/runner.js",
    "test:e2e:headed": "AGENT_BROWSER_HEADED=1 npm run test:e2e"
  }
}

CI/CD 통합

CI/CD集成

GitHub Actions

yaml

undefined

yaml

undefined

.github/workflows/e2e.yml

name: E2E Tests

on: [push, pull_request]

jobs: e2e: runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: Setup Node.js
    uses: actions/setup-node@v4
    with:
      node-version: '20'

  - name: Install dependencies
    run: npm ci

  - name: Install agent-browser
    run: |
      npm install -g agent-browser
      agent-browser setup --with-deps

  - name: Start app
    run: |
      npm run build
      npm run start &
      sleep 5

  - name: Run E2E tests
    run: npm run test:e2e

  - name: Upload screenshots on failure
    if: failure()
    uses: actions/upload-artifact@v4
    with:
      name: e2e-screenshots
      path: e2e/screenshots/

undefined

name: E2E Tests

on: [push, pull_request]

jobs: e2e: runs-on: ubuntu-latest

steps:
  - uses: actions/checkout@v4

  - name: 配置Node.js
    uses: actions/setup-node@v4
    with:
      node-version: '20'

  - name: 安装依赖
    run: npm ci

  - name: 安装agent-browser
    run: |
      npm install -g agent-browser
      agent-browser setup --with-deps

  - name: 启动应用
    run: |
      npm run build
      npm run start &
      sleep 5

  - name: 运行E2E测试
    run: npm run test:e2e

  - name: 测试失败时上传截图
    if: failure()
    uses: actions/upload-artifact@v4
    with:
      name: e2e-screenshots
      path: e2e/screenshots/

undefined

클라우드 브라우저 사용 (Browserbase)

使用云浏览器（Browserbase）

yaml

undefined

yaml

undefined

.github/workflows/e2e-cloud.yml

jobs: e2e: runs-on: ubuntu-latest env: AGENT_BROWSER_PROVIDER: browserbase BROWSERBASE_API_KEY: ${{ secrets.BROWSERBASE_API_KEY }} BROWSERBASE_PROJECT_ID: ${{ secrets.BROWSERBASE_PROJECT_ID }}

steps:
  - uses: actions/checkout@v4
  - run: npm run test:e2e

undefined

jobs: e2e: runs-on: ubuntu-latest env: AGENT_BROWSER_PROVIDER: browserbase BROWSERBASE_API_KEY: ${{ secrets.BROWSERBASE_API_KEY }} BROWSERBASE_PROJECT_ID: ${{ secrets.BROWSERBASE_PROJECT_ID }}

steps:
  - uses: actions/checkout@v4
  - run: npm run test:e2e

undefined

디버깅

调试技巧

headed 모드

有头模式（显示浏览器窗口）

bash

undefined

bash

undefined

브라우저 창 표시

打开可见的浏览器窗口

agent-browser open https://myapp.com --headed

undefined

agent-browser open https://myapp.com --headed

undefined

요소 하이라이트

元素高亮

bash

undefined

bash

undefined

요소 강조 표시

高亮指定元素

agent-browser highlight @button

undefined

agent-browser highlight @button

undefined

콘솔 로그 확인

查看控制台日志

bash

undefined

bash

undefined

브라우저 콘솔 로그 보기

查看浏览器控制台日志

agent-browser console

에러 로그만

仅查看错误日志

agent-browser console --error

undefined

agent-browser console --error

undefined

트레이스 녹화

录制追踪日志

bash

undefined

bash

undefined

트레이스 시작

开始录制追踪

agent-browser trace start

테스트 실행

执行测试操作

agent-browser open https://myapp.com agent-browser click @button

...

트레이스 저장

保存追踪日志

agent-browser trace stop ./trace.zip

undefined

agent-browser trace stop ./trace.zip

undefined

셀렉터 가이드

选择器指南

Ref 기반 (권장)

基于Ref（推荐）

bash

undefined

bash

undefined

스냅샷에서 얻은 ref 사용

使用快照中获取的ref

agent-browser click @e1 agent-browser fill @e2 "text"

undefined

agent-browser click @e1 agent-browser fill @e2 "text"

undefined

CSS 셀렉터

CSS选择器

bash

agent-browser click "#submit-btn"
agent-browser fill ".email-input" "test@example.com"
agent-browser click "div > button.primary"

bash

agent-browser click "#submit-btn"
agent-browser fill ".email-input" "test@example.com"
agent-browser click "div > button.primary"

시맨틱 로케이터

语义化定位器

bash

undefined

bash

undefined

Role 기반

基于角色（Role）

agent-browser click role:button "Submit" agent-browser fill role:textbox "Email" "test@example.com"

텍스트 기반

基于文本

agent-browser click text:label "Remember me" agent-browser click text: "Sign Up"

data-testid 기반

基于data-testid

agent-browser click testid:submit-form

undefined

agent-browser click testid:submit-form

undefined

대기 전략

等待策略

bash

undefined

bash

undefined

요소 대기

等待元素出现

agent-browser wait @element

텍스트 대기

等待文本出现

agent-browser wait text "Success"

URL 패턴 대기

等待URL匹配指定模式

agent-browser wait url "**/dashboard"

시간 대기 (ms)

固定时长等待（毫秒）

agent-browser wait 2000

로드 상태 대기

等待页面加载状态

agent-browser wait load # load 이벤트 agent-browser wait domcontentloaded agent-browser wait networkidle # 네트워크 안정화

agent-browser wait load # 等待load事件触发 agent-browser wait domcontentloaded agent-browser wait networkidle # 等待网络稳定

JS 조건 대기

等待JS条件满足

agent-browser wait js "window.appReady === true"

undefined

agent-browser wait js "window.appReady === true"

undefined

모범 사례

最佳实践

1. 스냅샷 우선 접근

1. 优先使用快照

bash

undefined

bash

undefined

항상 스냅샷으로 현재 상태 파악

始终先通过快照了解当前页面状态

agent-browser snapshot -i

그 다음 ref로 상호작용

再使用ref进行交互

agent-browser click @e1

undefined

agent-browser click @e1

undefined

2. 안정적인 대기

2. 使用稳定的等待方式

bash

undefined

bash

undefined

하드코딩된 sleep 대신 조건 대기 사용

避免硬编码等待时长，优先使用条件等待

BAD: agent-browser wait 5000

不推荐: agent-browser wait 5000

GOOD:

테스트 코드...

测试代码...

undefined

undefined

4. 환경별 설정

4. 分环境配置

bash

undefined

bash

undefined

.env.test

AGENT_BROWSER_PROFILE=~/.browser-test AGENT_BROWSER_HEADED=0 BASE_URL=http://localhost:3000

undefined

AGENT_BROWSER_PROFILE=~/.browser-test AGENT_BROWSER_HEADED=0 BASE_URL=http://localhost:3000

undefined

5. 테스트 격리

5. 测试隔离

bash

undefined

bash

undefined

각 테스트 전 쿠키/스토리지 초기화

每个测试前清空Cookie/存储

agent-browser cookies clear agent-browser local clear agent-browser session clear

undefined

agent-browser cookies clear agent-browser local clear agent-browser session clear

undefined

유용한 명령어 요약

常用命令汇总

명령어	설명
`agent-browser open <url>`	페이지 열기
`agent-browser snapshot -i`	인터랙티브 요소 스냅샷
`agent-browser click @ref`	클릭
`agent-browser fill @ref "text"`	텍스트 입력
`agent-browser text @ref`	텍스트 가져오기
`agent-browser wait text "msg"`	텍스트 대기
`agent-browser wait url "**/path"`	URL 대기
`agent-browser screenshot ./ss.png`	스크린샷
`agent-browser isvisible @ref`	가시성 확인
`agent-browser close`	브라우저 닫기

命令	说明
`agent-browser open <url>`	打开指定页面
`agent-browser snapshot -i`	获取交互式元素快照
`agent-browser click @ref`	点击指定元素
`agent-browser fill @ref "text"`	向元素输入文本
`agent-browser text @ref`	获取元素文本内容
`agent-browser wait text "msg"`	等待指定文本出现
`agent-browser wait url "**/path"`	等待URL匹配指定模式
`agent-browser screenshot ./ss.png`	截取页面截图
`agent-browser isvisible @ref`	检查元素是否可见
`agent-browser close`	关闭浏览器

리소스

参考资源

agent-browser 문서: https://agent-browser.dev
GitHub: https://github.com/vercel-labs/agent-browser
Playwright (내부 사용): https://playwright.dev

agent-browser官方文档: https://agent-browser.dev
GitHub仓库: https://github.com/vercel-labs/agent-browser
底层依赖Playwright: https://playwright.dev

e2e-agent-browser

Original

Translation

E2E Testing with agent-browser

使用agent-browser进行E2E测试

이 스킬을 사용할 때

适用场景

설치

安装

npm으로 설치 (권장)

npm安装（推荐）

Chromium 브라우저 다운로드

下载Chromium浏览器

Linux의 경우 시스템 의존성 추가 설치

Linux系统需额外安装依赖

핵심 개념

核心概念

1. 스냅샷 + Ref 워크플로우

1. 快照+Ref工作流

1. 페이지 열기

1. 打开页面

2. 접근성 스냅샷 가져오기 (ref 포함)

2. 获取包含ref的可访问性快照

출력:

输出示例:

- heading "Example Domain" [ref=e1] [level=1]

- heading "Example Domain" [ref=e1] [level=1]

- button "Submit" [ref=e2]

- button "Submit" [ref=e2]

- textbox "Email" [ref=e3]

- textbox "Email" [ref=e3]

- link "Learn more" [ref=e4]

- link "Learn more" [ref=e4]

3. ref를 사용하여 요소와 상호작용

3. 使用ref与元素交互

2. 스냅샷 옵션

2. 快照选项

전체 접근성 트리

获取完整可访问性树

인터랙티브 요소만 (버튼, 입력, 링크)

仅获取交互式元素（按钮、输入框、链接）

컴팩트 모드 (빈 구조 요소 제거)

紧凑模式（移除空结构元素）

깊이 제한

限制深度

CSS 선택자로 범위 제한

通过CSS选择器限定范围

옵션 조합

组合选项

3. JSON 모드 (AI 에이전트용)

3. JSON模式（面向AI Agent）

JSON 출력으로 파싱 가능한 결과 반환

返回可解析的JSON格式结果

{"success":true,"data":{"snapshot":"...","refs":{"e1":{"role":"heading","name":"Title"},...}}}

{"success":true,"data":{"snapshot":"...","refs":{"e1":{"role":"heading","name":"Title"},...}}}

E2E 테스트 패턴

E2E测试模式

패턴 1: 기본 페이지 테스트

模式1：基础页面测试

test_homepage.sh

test_homepage.sh

페이지 열기

打开页面

페이지 타이틀 확인

验证页面标题

주요 요소 존재 확인

验证关键元素存在

패턴 2: 로그인 플로우 테스트

模式2：登录流程测试

test_login.sh

test_login.sh

로그인 페이지 열기

打开登录页面

스냅샷으로 요소 ref 확인

通过快照获取元素ref

- textbox "Email" [ref=e1]

- textbox "Email" [ref=e1]

- textbox "Password" [ref=e2]

- textbox "Password" [ref=e2]

- button "Sign In" [ref=e3]