bun-browser
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseBrowse — Browser QA Tool
Browse — 浏览器QA工具
Overview
概述
browsebrowseQuick start
快速开始
Just run any command — the daemon cold-starts automatically if it isn't already running.
browse goto https://staging.example.com # navigate
browse snapshot # see page structure with refs
browse screenshot # capture the page
browse quit # shut down the daemonFirst useful sequence: → → .
browse goto <url>browse snapshotbrowse screenshot只需运行任意命令——如果守护进程尚未运行,它会自动冷启动。
browse goto https://staging.example.com # 导航
browse snapshot # 查看带引用标记的页面结构
browse screenshot # 捕获页面截图
browse quit # 关闭守护进程实用操作序列: → → 。
browse goto <url>browse snapshotbrowse screenshotCommand reference
命令参考
Navigation and content
导航与内容
browse goto <url> Navigate to URL, return page title
browse text Return visible text content of the page
browse quit Shut down the daemon
browse wipe Clear all session data (cookies, storage, buffers, refs)
browse benchmark [--iterations N] Measure command latency (p50/p95/p99)browse goto <url> 导航至指定URL,返回页面标题
browse text 返回页面可见文本内容
browse quit 关闭守护进程
browse wipe 清除所有会话数据(Cookie、存储、缓冲区、引用标记)
browse benchmark [--iterations N] 测量命令延迟(p50/p95/p99)Timeout control
超时控制
Any command accepts to override the default 30s timeout:
--timeout <ms>browse goto https://slow-page.example.com --timeout 60000Timeout precedence: flag > config file > 30s default. Commands and are exempt from timeout.
--timeouttimeoutquitbenchmark所有命令都可通过参数覆盖默认的30秒超时时间:
--timeout <ms>browse goto https://slow-page.example.com --timeout 60000超时优先级:参数 > 配置文件中的设置 > 30秒默认值。和命令不受超时限制。
--timeouttimeoutquitbenchmarkSnapshot and interaction (ref system)
快照与交互(引用标记系统)
browse snapshot Interactive elements with refs (@e1, @e2, ...)
browse snapshot -i Include structural elements (headings, text)
browse snapshot -f Full accessibility tree dump
browse click @eN Click element by ref
browse fill @eN "value" Fill input by ref (clears first)
browse select @eN "option" Select dropdown option by visible textbrowse snapshot 生成带引用标记(@e1、@e2等)的可交互元素快照
browse snapshot -i 包含结构性元素(标题、文本)
browse snapshot -f 导出完整可访问性树
browse click @eN 通过引用标记点击元素
browse fill @eN "value" 通过引用标记填充输入框(会先清空内容)
browse select @eN "option" 通过可见文本选择下拉选项Visual and debugging
视觉与调试
browse screenshot [path] Full-page screenshot (auto-generates path if omitted)
browse screenshot --viewport Viewport only (no scroll)
browse screenshot --selector ".css" Element-level screenshot
browse console Console messages since last call (drains buffer)
browse console --level error Filter to a specific level (error, warning, log, info, debug)
browse console --keep Return messages without clearing the buffer
browse network Failed requests (4xx/5xx) since last call (drains buffer)
browse network --all All requests including successful ones
browse network --keep Return requests without clearing the bufferbrowse screenshot [path] 生成全页截图(若省略路径则自动生成)
browse screenshot --viewport 仅捕获视口内容(不滚动)
browse screenshot --selector ".css" 捕获指定CSS选择器对应的元素截图
browse console 返回上次调用后的控制台消息(清空缓冲区)
browse console --level error 过滤指定级别消息(error、warning、log、info、debug)
browse console --keep 返回消息但不清空缓冲区
browse network 返回上次调用后的失败请求(4xx/5xx状态码,清空缓冲区)
browse network --all 返回所有请求(包括成功请求)
browse network --keep 返回请求但不清空缓冲区Auth and session
身份验证与会话
browse auth-state save <path> Export cookies + localStorage to file
browse auth-state load <path> Restore session from file
browse login --env <name> Automated login using configured environment
browse tab list Show open tabs with indices
browse tab new [url] Open new tab (optionally navigating to URL)
browse tab switch <index> Switch to tab by 1-based index
browse tab close [index] Close tab by index (defaults to current)browse auth-state save <path> 将Cookie + localStorage导出至文件
browse auth-state load <path> 从文件恢复会话
browse login --env <name> 使用配置的环境变量自动完成登录
browse tab list 显示所有打开的标签页及其索引
browse tab new [url] 打开新标签页(可指定导航URL)
browse tab switch <index> 切换至指定索引的标签页(索引从1开始)
browse tab close [index] 关闭指定索引的标签页(默认关闭当前标签页)Flows and assertions
流程与断言
browse flow list List configured flows from browse.config.json
browse flow <name> --var key=value Execute a named flow with variable substitution
browse assert visible <selector> Assert element is visible on page
browse assert not-visible <selector> Assert element is not visible
browse assert text-contains <text> Assert page body contains text
browse assert text-not-contains <text> Assert page body does not contain text
browse assert url-contains <substring> Assert current URL contains substring
browse assert url-pattern <regex> Assert current URL matches regex
browse assert element-text <sel> <text> Assert element's text contains string
browse assert element-count <sel> <n> Assert element count equals n
browse assert permission <name> granted Check permission via config (navigates to page)
browse assert permission <name> denied Check permission denial via config
browse healthcheck --var base_url=<url> Run healthcheck across configured pages
browse wipe Clear cookies, storage, buffers, refs, close extra tabsbrowse flow list 列出browse.config.json中配置的所有流程
browse flow <name> --var key=value 执行指定名称的流程并替换变量
browse assert visible <selector> 断言元素在页面上可见
browse assert not-visible <selector> 断言元素在页面上不可见
browse assert text-contains <text> 断言页面正文包含指定文本
browse assert text-not-contains <text> 断言页面正文不包含指定文本
browse assert url-contains <substring> 断言当前URL包含指定子串
browse assert url-pattern <regex> 断言当前URL匹配指定正则表达式
browse assert element-text <sel> <text> 断言指定元素的文本包含指定字符串
browse assert element-count <sel> <n> 断言指定元素的数量等于n
browse assert permission <name> granted 通过配置检查权限(会导航至指定页面)
browse assert permission <name> denied 通过配置检查权限是否被拒绝
browse healthcheck --var base_url=<url> 在配置的页面上运行健康检查
browse wipe 清除Cookie、存储、缓冲区、引用标记,关闭多余标签页The ref system
引用标记系统
Refs are the primary way to target elements on the page. They replace CSS selectors for most interactions.
- Always snapshot before interacting. Refs are assigned by and are the only way to target elements.
browse snapshot - Refs are ephemeral. They regenerate on every call. Old refs become invalid.
snapshot - Refs go stale after navigation. Any or click that triggers navigation invalidates refs. The tool returns a clear error — just run
gotoagain.browse snapshot - Ref format: ,
@e1,@e2, etc. Assigned sequentially in depth-first order.@e3
Typical interaction loop:
browse snapshot # see what's on the page
browse fill @e3 "test" # fill the search field
browse click @e4 # click a button
browse snapshot # re-snapshot after the page changesIf you see or , run to refresh.
"Refs are stale""Unknown ref"browse snapshot引用标记是定位页面元素的主要方式,多数交互操作可替代CSS选择器。
- 交互前务必先生成快照:引用标记由命令分配,是定位元素的唯一有效方式。
browse snapshot - 引用标记是临时的:每次调用都会重新生成引用标记,旧标记会失效。
snapshot - 导航后引用标记会过期:任何命令或触发导航的点击操作都会使引用标记失效。工具会返回明确的错误提示——只需重新运行
goto即可。browse snapshot - 引用标记格式:、
@e1、@e2等,按深度优先顺序依次分配。@e3
典型交互流程:
browse snapshot # 查看页面当前元素
browse fill @e3 "test" # 填充搜索框
browse click @e4 # 点击按钮
browse snapshot # 页面变化后重新生成快照若看到或提示,运行刷新引用标记即可。
"Refs are stale""Unknown ref"browse snapshotQA methodology
QA测试方法
Recommended workflow for a QA pass:
- Navigate: .
browse goto <url> - Observe: to see page structure.
browse snapshotfor visual state.browse screenshot - Check for errors: after every navigation.
browse console --level error - Interact: ,
browse fill,browse clickto exercise forms and flows.browse select - Verify: or
browse snapshotafter each interaction to confirm the expected result.browse screenshot - Repeat: Move through the application's pages and flows.
For configured applications, use first to get a quick pass/fail across key pages, then drill into failures.
browse healthcheck推荐的QA测试流程:
- 导航:。
browse goto <url> - 观察:运行查看页面结构,
browse snapshot保存视觉状态。browse screenshot - 检查错误:每次导航后运行检查控制台错误。
browse console --level error - 交互操作:使用、
browse fill、browse click测试表单与流程。browse select - 验证结果:每次交互后运行或
browse snapshot确认预期结果。browse screenshot - 重复操作:遍历应用的所有页面与流程。
针对已配置的应用,可先运行快速检查关键页面的通过/失败状态,再深入排查失败项。
browse healthcheckAuthentication
身份验证
Preferred — configured login:
browse login --env stagingUses credentials from environment variables defined in . Navigates to the login page, fills credentials, submits, and waits for the success condition.
browse.config.jsonManual login:
browse goto https://app.example.com/login
browse snapshot
browse fill @e1 "user@example.com"
browse fill @e2 "password123"
browse click @e3
browse snapshot # verify redirect / dashboard loadedSession reuse:
browse auth-state save /tmp/auth.json # after logging in
browse auth-state load /tmp/auth.json # in a future sessionSave auth state after a successful login. Load it in future sessions to skip re-authentication.
Session cleanup:
Use to clear all session data without restarting the daemon:
browse wipe- After testing with production-like credentials.
- Before switching between user roles/accounts.
- At the end of a QA session.
推荐方式——配置化登录:
browse login --env staging使用中定义的环境变量凭据,自动导航至登录页、填充凭据、提交表单,并等待登录成功条件触发。
browse.config.json手动登录:
browse goto https://app.example.com/login
browse snapshot
browse fill @e1 "user@example.com"
browse fill @e2 "password123"
browse click @e3
browse snapshot # 验证是否跳转至仪表盘会话复用:
browse auth-state save /tmp/auth.json # 登录成功后保存会话状态
browse auth-state load /tmp/auth.json # 后续会话中加载状态登录成功后保存身份验证状态,后续会话中加载该状态可跳过重新登录步骤。
会话清理:
使用命令清除所有会话数据,无需重启守护进程:
browse wipe- 使用类生产环境凭据测试后。
- 切换用户角色/账户前。
- QA测试会话结束后。
Common failure patterns and recovery
常见故障模式与恢复方案
| Symptom | Cause | Fix |
|---|---|---|
| Page changed since last snapshot | Run |
| Ref doesn't exist in current snapshot | Run |
| Daemon crashed or was killed | Just run the command again — CLI auto-restarts the daemon and retries once |
| Page is slow or unresponsive | Use |
| Daemon restart also failed | Check system resources, try |
| CSS selector is wrong | Check the selector, use |
| Login fails | Credentials missing or wrong | Check env vars, verify login URL, use |
| 症状 | 原因 | 解决方法 |
|---|---|---|
| 自上次快照后页面已发生变化 | 运行 |
| 当前快照中不存在该引用标记 | 运行 |
| 守护进程崩溃或被终止 | 重新运行命令即可——CLI会自动重启守护进程并重试一次 |
| 页面加载缓慢或无响应 | 对慢页面使用 |
| 守护进程重启失败 | 检查系统资源,尝试运行 |
| CSS选择器错误 | 检查选择器,使用 |
| 登录失败 | 凭据缺失或错误 | 检查环境变量,验证登录URL,使用 |
Configuration
配置
The tool is configured via in the project root. All sections except are optional.
browse.config.jsonenvironmentsjson
{
"environments": {
"staging": {
"loginUrl": "https://staging.example.com/login",
"userEnvVar": "BROWSE_STAGING_USER",
"passEnvVar": "BROWSE_STAGING_PASS",
"usernameField": "input[name=email]",
"passwordField": "input[name=password]",
"submitButton": "button[type=submit]",
"successCondition": { "urlContains": "/dashboard" }
}
},
"flows": {
"signup": {
"description": "Test the signup flow",
"variables": ["base_url", "test_email", "test_pass"],
"steps": [
{ "goto": "{{base_url}}/register" },
{ "fill": { "input[name=email]": "{{test_email}}" } },
{ "click": "button[type=submit]" },
{ "wait": { "urlContains": "/welcome" } },
{ "screenshot": true },
{ "assert": { "textContains": "Welcome" } }
]
}
},
"permissions": {
"create-user": {
"page": "{{base_url}}/admin/users",
"granted": { "visible": "button.create-user" },
"denied": { "textContains": "Access denied" }
}
},
"healthcheck": {
"pages": [
{ "url": "{{base_url}}/dashboard", "screenshot": true, "console": "error" },
{ "url": "{{base_url}}/settings", "assertions": [{ "visible": ".settings-form" }] }
]
},
"timeout": 45000
}See the project documentation for the full configuration schema.
工具通过项目根目录下的文件进行配置,除外所有配置项均为可选。
browse.config.jsonenvironmentsjson
{
"environments": {
"staging": {
"loginUrl": "https://staging.example.com/login",
"userEnvVar": "BROWSE_STAGING_USER",
"passEnvVar": "BROWSE_STAGING_PASS",
"usernameField": "input[name=email]",
"passwordField": "input[name=password]",
"submitButton": "button[type=submit]",
"successCondition": { "urlContains": "/dashboard" }
}
},
"flows": {
"signup": {
"description": "Test the signup flow",
"variables": ["base_url", "test_email", "test_pass"],
"steps": [
{ "goto": "{{base_url}}/register" },
{ "fill": { "input[name=email]": "{{test_email}}" } },
{ "click": "button[type=submit]" },
{ "wait": { "urlContains": "/welcome" } },
{ "screenshot": true },
{ "assert": { "textContains": "Welcome" } }
]
}
},
"permissions": {
"create-user": {
"page": "{{base_url}}/admin/users",
"granted": { "visible": "button.create-user" },
"denied": { "textContains": "Access denied" }
}
},
"healthcheck": {
"pages": [
{ "url": "{{base_url}}/dashboard", "screenshot": true, "console": "error" },
{ "url": "{{base_url}}/settings", "assertions": [{ "visible": ".settings-form" }] }
]
},
"timeout": 45000
}完整配置架构请查看项目文档。